Pokémon Safari & Pokédex

Pokémon Safari and Pokédex developed with React, Redux and Express. Gotta Catch 'Em All!

Functionality and Technologies

HTML, CSS & JS Creating all the layout, styles of each element and some animations/interactions (Like the Intersection Observer on the Pokédex while scrolling for more Pokémon limited to the 151 Pokémon (Just as Classic Pokédex), if you want to see other Pokémon all of them are available and you can search them on the box!).
NodeJs & Express Creating a Backend to serve the Pokémon data, handling requests to the server (In order to hide the real API URL, just my Endpoints are visible).

Creating First Render Content from the Server Side for better UX, SEO and Performance.
React User interface library to create reactive and reusable componentes.
React Router Handling the available and unavailable routes (Look at Safari Route that respond with a Not Found).
*Redux Handling the application state and the data that will be shared between the components. (The Pokémon loaded on the Pokédex List should not need to request again their data even when visiting a different route and returning).
Webpack Creating different staging environments (Development & Production), Bundling all the packages and handling a server side approach. (Splitting code on vendors and app code).
Cypress Creating End To End Tests to verify the user application flows and interactions.
Mocha and NYC Creating Tests for the Routes of the Backend and creating a coverage report.
i18next Adding Multi-Language applications support (You can switch the language selecting a Flag!).
ESLint Handling Code Analysis to Prevent Errors and Define a code writting style.
Google Cloud Platform & Now Cloud Platforms that Deploy instantly, scale automatically, and requires no supervision at all, with minimum configuration.

Pre-requisites

You must create a .env file on the root folder following the .env-example file. The file just contains the PORT for running the Application and the Environment you want to use (development or production).

Note: The suggested PORT for the .env file is the 3001, if you decide to take a different PORT, consider to update it on the cypress.json file on the baseUrl key.

How It Works?

Require Node.JS

npm install For instailling dependencies.
npm run lint For verifying ESLint rules.
npm run build For creating production files on the public output path.
npm run start:dev For running SSR Application on development environment.

Note: the .env file must have development as NODE_ENV value.

npm run start For running SSR Application on production environment.

Note: the .env file must have production as NODE_ENV value.

npm run cypress:open For opening Cypress Application with the available tests.
npm run cypress:run For running Cypress with the available tests, on the terminal.
npm run test:ssr For building the SSR Application, running the development environment and opening the Cypress Application in order to run the tests availables.
npm run test For building the Application, running the production environment and Cypress tests available, on the terminal(Great for CI).

Note: The .env and cypress.json on the baseUrl key must have the same PORT specified. Note: The .env should have the respective environment when running the test scripts.