Codecademy Full Stack Engineer path - Challenge Project
Project brief (codecademy members only) »
Explore the docs »

View Demo · Report Bug · Request Feature

"In this project, you will practice using Redux and Redux Toolkit to manage the complex state of a flashcard-style quiz app. Users will be able to create their own topics, quizzes for those topics, and flashcards for those quizzes. Users will also be able to interact with their quizzes by flipping flashcards over."

Project tasks completed after a day and a half. As others have said on the codecademy forums for the task, there are a couple of tasks (12 & 16, referred to below) that I got stuck on where it says to test on the site that the item appears but it only really appears properly when you use the selector in the following task. The issue was that the topic displayed 0 quizzes when I had assigned a topic to the quizzes.

Code edited from the provided solution code. Basically I had overcomplicated the extraReducer in topicsSlice with a builder & an if statement that weren't necessary. The solution code was very close to the 3 lines of code that I originally had but I had it as another action creator, not an extraReducer.

Moving forward I plan to add instructions to the page to make it clearer to user for what they actually need to do with the app. Then I will work on the styling of the page, personalise it a bit, perhaps make the cards look like cards in more of a grid system instead of appearing like blocks that fill the page. Feel free to request a feature and I will see what I can do.

Task 12:

Next, import the action from your quiz slice and dispatch it from the handleSubmit() event handler that fires when the new quiz form is submitted.

• Remember, that action creator expects to receive a payload of the form { id: '123', name: 'quiz name', topicId: '456', cardIds: ['1', '2', '3', ...]}. You’ll have to generate an id by calling uuidv4. For now, pass the empty cardIds array variable for the cardIds property (you’ll change that in a later task).

• Test that your action creator works by filling out the new quiz form. After your quiz is created you should be rerouted to the /quizzes page and should see your newly created quiz there.

Task 16:

You previously passed an empty array for cardIds to the action creator that generates a new quiz. Now that you have written code to collect an array of all the cardIds created whenever the new quiz form is submitted, replace the empty array with this array of cardIds.

To test that your code is working, create a new quiz with some cards. Navigate to that quiz from the /quizzes page, and verify that your cards show up. Flip them over by clicking on them to make sure that you’ve correctly captured all of the state belonging to each card.

(back to top)

• HTML5
• CSS
• JavaScript
• React
• Redux
• Node.js
• Visual Studio Code

(back to top)

These are instructions on setting up the project locally. To get a local copy up and running follow these simple example steps.

This is an example of how to list things you need to use the software and how to install them.

• npm

  npm install npm@latest -g

1. Clone the repo

   git clone https://github.com/mattsteen14/flashcards.git

2. Install NPM packages

   npm install

3. Run app in development mode in local browser

   npm start

This project was bootstrapped with Create React App, using the Redux and Redux Toolkit template.

In the project directory, you can run:

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

(back to top)

• Complete project as per Codecademy brief.
• Share on Codecademy forums for feedback.
• Solve issue of quizzes not selecting topics.
• Request code review on codecademy forums.
• Add instructions to page to make it clearer what user needs to do.
• Edit & personalise styling with CSS.
• Testing & Debugging.
• Use surge to deploy.

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Matt Steen-Brookes - @mattsteen14 - [email protected]

Project Link: https://github.com/mattsteen14/flashcards

(back to top)

• Mo Ashqar for introducing me to Codecademy in the first place.
• Othneil Drew for the README template.
• Choose an Open Source License

(back to top)