Skip to content

Latest commit

 

History

History
98 lines (74 loc) · 3.73 KB

README.md

File metadata and controls

98 lines (74 loc) · 3.73 KB
Raw

Challenge Project: Flashcards

Netlify Status

Description

This projects goal is to manage a flashcard-style quiz apps complex state with Redux and Redux Toolkit using Codecademy's provided starter code.

Although this app uses React Router for client-side routing, it is not a challenge requirement. However, knowledge of how it works is helpful.

This Challenge Project is a part of the CodeCademy Front-End Engineer path, more info can be found at https://www.codecademy.com/

Live site: https://react-redux-flashcards.netlify.app/

Setup Instructions

Extract flashcards-starting-code-react-v18.zip and from the extracted folder run npm install to install dependencies.

Start the server with npm start and visit http://localhost:3000/

Technologies used

  • npm v. 8.19.2
  • @reduxjs/toolkit v. 1.9.5
  • react v. 18.2.0
  • react-dom v. 18.2.0
  • react-redux v. 8.1.2
  • react-router-dom v. 6.16.0
  • react-scripts v. 5.0.1
  • uuid v. 8.3.2

State

The application state consists of 3 slices created using RTK createSlice. Each slice is responsible for managing its piece of state using the reducers/actions/selectors they generate:

topicsSlice

src/features/topics/topicsSlice.js

  • stores topics keyed by id 'ID': {id: 'ID', name: 'NAME', icon: 'icon url', quizIds: []}
  • exports addTopic action for adding topics
  • adds quiz ids to topics when addQuiz is dispatched
  • exports selectTopics selector for selecting all topics

quizzesSlice

src/features/quizzes/quizzesSlice.js

  • stores quizzes keyed by id 'ID': {id: 'ID', name: 'NAME', topicId: 'topic ID', cardIds: []}
  • exports addQuiz action for adding quizzes
  • exports selectQuizzes selector for selecting all quizzes

cardsSlice

src/features/cards/cardsSlice.js

  • stores cards keyed by id 'ID': {id: 'ID', front: 'card front', back: 'card back'}
  • exports addCard action for adding cards
  • exports selectCard selector for selecting a card with a given id

Components

Topics

src/features/topics/Topics.js

  • uses selectTopics to list all topics
  • Route path /topics
  • topics displayed link to Topic component

Topic

src/features/topics/Topic.js

  • uses selectQuizzes/selectTopics to list quizzes associated with current topic
  • Route path /topics/:topicId
  • quizzes displayed link to Quiz component

Quizzes

src/features/quizzes/Quizzes.js

  • uses selectQuizzes to display all quizzes
  • Route path /quizzes
  • quizzes displayed link to Quiz component

Quiz

src/features/quizzes/Quiz.js

  • uses selectQuizzes to display cards
  • Route path /quizzes/:quizId

Card

src/features/cards/Card.js

  • uses selectCard to display card front/back
  • Route path none

NewQuizForm

src/components/NewQuizForm.js

  • form for creating new quizzes
  • uses selectTopics to display topics in drop-down list
  • dispatches addQuiz and addCard
  • Route path /quizzes/new

NewTopicForm

src/components/NewTopicForm.js

  • form for creating new topics
  • dispatches addTopic
  • Route path /topics/new

Notes

Create React App README