Giter Club home page Giter Club logo

pokedex-reactapp's Introduction

Pokedex React App

MyMind screenshot

Contributors

Pedro Sales-Muniz LinkedIn | GitHub

Technologies used

Frontend - React.js, Recharts.js
Backend - Node.js, MongoDB Altlas

How to Run the project

  1. Make sure you have Node.js and Git installed.

  2. Clone this repo from your command line.

  3. Navigate into the ./server directory and run the command npm install

  4. Create a new file in the public project directory and call it .env.

  5. Connect your project to the database:

  • Create a MongoDB Atlas account at https://mongodb.com
  • Connect your project to the MongoDB Cluster by clicking on the "connect" button, choosing the "connect to your application" option and copying the link.

Sample .env:

DB_STRING="mongodb+srv://.........."
PORT=8081
SESSION_SECRET="Very strong password"
  1. Run nodemon on your cmd. Your backend server will be running on port 8081.

  2. Open another cmd, navigate into the ./react-app directory and run the command npm install

  3. Run the command npm start on your cmd.

  4. Go to http://localhost:3000/ on your browser.

Debugging

If you get a CORS error when making requests to the backend server:

  • make sure to include https://localhost:3000 in the whitelist array in ./backend/server.js
  • change the secure attribute to false in the session obj in in ./backend/server.js

How to use main features

Pokemons

  • Go to the SignUp page and create a new account
  • Filter or search pokemons by typing on the search input or clicking the filter checkboxes
  • Play pokemon OST, change the volume, switch songs through the media player on top
  • Make pokemons dance throught the 'Everybody Dance' button
  • Favorite pokemons by clicking on the star inside a pokemon's card
  • Expand pokemons to see their stats by clicking on the cards

Admin Dashboard

  • Make yourself an admin by changing the isAdmin property to true on your user document (in MongoDB Atlas)
  • click on the 'Dashboard' option on the navbar
  • See multiple stats pertaining to your project (Top Users, Most recent errors, etc)

How to contribute

Pull requests are welcome. Please divide your PRs in 3 sections: Problem, Solution, Testing.

pokedex-reactapp's People

Contributors

salesp07 avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

tannhatcms

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.