Table of Contents

1. About The Project
2. Installation
3. App Overview
4. Languages and Tools
5. License
6. Contact

About The Project

This project was started the 6th May and finished the 10th May 2021.

Pokedex is a Frontend web application that allows users to login and search for pokemons. In this application, the users will be able to filter the pokemons by location, color and species. On top of this, they will be able to choose 2 pokemons in order to compare the stats and abilities for battle.

I have added a small backend built with Nodejs, Sequelize and MySQL database. All data fetching was done using Express and Axios for declaring JSON structures.

The front end was created with Reactjs and JavaScript and uses the Redux architectural framework for an optimal single-page user-experience.

Authentication page

Back-end and front-end user authentication was built from scratch by encrypting user password with Bcryptjs and creating a unique session token with JSONWebToken for each user on sign up or login. This allows for secure access to one's account on the single-page application.

Expra features and improvements added:

• Small backend that is able to register, log in and index users.
• Register and Login with full user validation.
• All the features like the modal or the dropdown menu are made entirely by myself. Not external libraries used at all.
• Redux LocalStorage Simple is used for data persistence .
• Docker-compose to initialize the backend
• Create React Native App

Installation

For the Frontend you will need to follow the bellow instructions

Access the frontend directory.

cd frontend/

Install the dependencies and devDependencies for the frontend repository.

npm i

In the project directory, you can run:

npm start

And if you wish, you can run the scss

npm run scss

---

For the Backend you will need to follow the bellow instructions

Access the backend directory.

cd backend/

Install the dependencies and devDependencies for the frontend repository.

npm i

Run the docker-compose.yml with:

docker-compose up

Create the DB and do all the migrations.You will need to do this only the first time as Docker-compose will create a volume which will give you data persistence:

sequelize db:create

sequelize db:migrate

Now start the server

npm run start

APP OVERVIEW

Registration & Login

Pokedex

Home view

Location view

Color view

Species view

Battle view

---

Languages and Tools:

License

Distributed under the MIT License. See LICENSE for more information.

Contact

• Diego García
  • GitHub
  • LinkedIn