Build react components to catch & display pokemon, write MySQL queries to get and save your caught pokemon, and connect it all together using an express server in this fullstack workshop.
- Fork the repository
- Clone your forked repository:
git clone <your_repo_link>- Navigate to the root directory of the repository:
cd fullstackPokemon- Install dependencies
npm install- Seed the database
npm run seed- Bundle and compile the frontend code
npm run build- Open a new terminal and start the server
npm start- You are now ready to start working on the exercise!
It is reccomended to complete the requirements in an order similar to the outline below:
| ORDER | DESCRIPTION |
|---|---|
| 1 | Fix Pokemon.jsx. Pass the dummy data from pokemonData.js to PokemonList.jsx as props to help with building out Pokemon.js until you have correctly implemented step 4. |
| 2 | Finish writing the retrieveAllPokemon function in queries.js. This function should query the database for all pokemon. |
| 3 | Finish writing the '/api/pokemon' route. This endpoint should invoke the retrieveAllPokemon function we wrote in step 1. |
| 4 | Fix the getPokemon method in PokemonList.jsx. This method should make a GET request to the server for all pokemon. |
| 5 | Create a '/api/addPokemon' endpoint in server.js. This endpoint should should add a new pokemon to the database(you will need to create a function that will query the DB as well). |
| 6 | Fix the addCaughtPokemon method in PokemonList.jsx. This method should update the pokemonList in state and make a request to the DB to add the new pokemon. You will know if you implemented steps 4, 5, & 6 correctly if when you reload the page, your newly caught pokemon appear in your pokemonList. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent