A Searchable Select App for Marvel Characters
This app was built in React. The app allows a user to enter a marvel character name, and on initial input, pings the marvel api and returns a list of characters matching the input.
Check it out at react-searchselect.autumnfjeld.com
This app is not related to Marvel, just an exercise in React and design implementation.
TODOs
- Set up AWS Gateway API with lamba function to run marvel proxy server
- DONE
Add spinner to indicate to user waiting for server response - Add responsive styling
- DONE
Put app on react-searchable-select.autumnfjeld.com
Development Environment
- Mac OS X Sierra (version 10.12.6)
- Node v6.0.0
- This project was bootstrapped with Create React App.
- Styling done in sass, via npm module node-sass
How to run this app locally
- Install node if necessary
- Register for an api key with Marvel and note your public and private key
- Clone or download this repo
- In your terminal:
cd
to the root directory and run:npm install
- To run the app you will need to start the marvel proxy server and start React
- Marvel proxy server:
cd api
and thennpm start <private key> <public key>
- Fire up React: 'cd' to the root directory and then
npm start
will launch the app on http://localhost:3033
- Marvel proxy server:
Testing
Tests are in src/tests and can be run from root directory with npm test
.
Overview
This app provides and example of communication between React components. It demonstrates the React principle of 'lifting up state', in which multiple components share data that is managed by a single parent. The parent maintains the React state and passes data and callbacks to the child components via the props
object.
Discussion
- This is my first react app, so that is very exciting! I really likethe React structure, modularity, and clean organziation. It reminds me of Angular directives (when they are done correctly)
- Testing docs found on online are all over the place, seemed more difficult than necessary to grasp basic testing syntax
- Very curious to know how the scrollbar was implemented in the guidelines stated for this project. My implementation is CSS only and I could not figure out how to set the scrollbar within the scrollable div. During my search for info on custom scrollbars I found RocketScroll which could be used to mimic perfectly the images provided in the project guidelines.
How to use
Enter a charcater name in the input field to ping the Marvel api and get a list of matching Marvel characters.
License
This project is licensed under the MIT License - see the LICENSE.md file for details
Acknowledgments
I learned so much building this app. Many hours of research included devouring the following docs: