For this project, I used React and pokeapi. This API was particularly challenging because of the sheer amount of information and the way all of the endpoints are set up. Not all of the information pertaining to each Pokémon is available at one endpoint, so I had to make queries to multiple different endpoints in order to get all of the information I wanted. For the styling, I used the styling done by Eric Varela in order to save myself some time so that I could focus my efforts on practicing Redux. The only changes I made were refactoring the vanilla CSS to Styled Components, as well as adding some animated transitions for the Pokédex entries, evolutions, and moves.

This project was built from a project prompt for Lambda School. No code was provided in advance. The instructions for the project are found below:

Module Project: Async Redux - React Redux App

This project allows you to practice the concepts and techniques learned in this module and apply them in a concrete project. This module explored asyncronous action creators in Redux. In your project you will demonstrate proficiency of these subjects and principles by building an app from scratch that consumes and API of your choosing, and displays data fetched from that API.

Instructions

Read these instructions carefully. Understand exactly what is expected before starting this project.

Commits

Commit your code regularly and meaningfully. This helps both you and your team lead in case you ever need to return to old code for any number of reasons.

Description

In this project you'll choose an api to consume. You will build an application from scratch that uses your chosen API and displays the data you are getting from it.

Project Set Up

• Create a forked copy of this project.
• Add your team lead as collaborator on Github.
• Clone your OWN version of the repository in your terminal
• CD into the project base directory cd react-redux-app
• Use CRA to create a new React app, the cd into the react app
• Using the same command tool (yarn or npm) start up the app using yarn start or npm start
• Create a new branch: git checkout -b <firstName-lastName>.
• Implement the project on your newly created <firstName-lastName> branch, committing changes regularly.
• Push commits: git push origin <firstName-lastName>.

Follow these steps for completing your project.

• Submit a Pull-Request to merge Branch into master (student's Repository). Please don't merge your own pull request
• Add your team lead as a reviewer on the pull-request
• Your team lead will count the project as complete by merging the branch back into master.
• Do your magic!

Minimum Viable Product

• Build a React Redux app
• Fetch data inside an async action creator from an API of your choosing
• Add the data from the API to the Redux store
• Display the data from the store in a component
• Some styling must be applied. It can be basic, but the app must not only use browser default stylings

Directions

This is the chance to let your skills shine! You have learned sooo much the last month, and now you get to put all of your hard-earned skills to work. Choose an open api (this list has a lot of great ones - look for ones with Auth: no and HTTPS: yes - or just do a google search for open apis). Protip - don't take too long choosing an API. Pick one that looks interesting, and get building.

Once you have chosen an API to consume, build an app that makes sense for the data you will be retrieving. Have fun with this. You get to be the creative mind. You get to make all the decisions here. I'm excited to see what you build!

Stretch Problems

Take the app as far as you can go! Styling, redux hooks, another API, an input to fetch data dynamically, etc. Work on it, improve it until the end of the day. If you find yourself finishing with time left to spare, jump on with your TL or fellow student to ask them what feature they think you should build next. Good luck!