This is a "lite" pokedex that I created for a code challenge. It uses Context API and custom hooks for state management, styled-components for the CSS-in-JS, routes, etc..
- Amazing design, with beautiful fonts, perfectly mixing modernity to a retro vibe
- State management: passing states down to components available in specific routes and state manipulation from children nodes via callback function passed through with the context
- Pagination
- Media queries, responsive design
- Styled components (CSS-in-JS)
- LoadingAnimation (entirely in CSS3 for faster rendering)
- SVG images (local) for faster rendering
- Basic unit testing
- and more..
I did not have a lot of time to complete the challenge and testing was not a requirement. I still added a few basic tests nonetheless.
Pokemon page
✓ should render the Pokemon page
✓ should render the Pokemon's name container
✓ should render the Pokemon's type container
✓ should render the Pokemon's evolution container
About page
✓ should render the About page
|
|
|
|
To run this project, just clone the repository, cd into it on your local machine and download all dependencies by simply typing:
git clone https://github.com/xdth/pokedex_challenge.git
cd pokedex_challenge
yarn
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
For production, you might need to add something like the .htaccess below:
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]