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.

Introduction

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!

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.

Instructions

Task 1: 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.
  • Run npx create-react-app app --use-npm to make a CRA app.
  • CD into the react app cd app.
  • Start up the app using 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>.

Task 2: 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

Task 3: 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!

Submission Format

  • Submit a Pull-Request to merge <firstName-lastName> Branch into main (student's Repo). Please don't merge your own pull request