Flashcards Challenge Project (Redux)

Hi everyone,

Just finished the project. Please take a look at my code, will be grateful for any kind of feedback. It was quite a challenge for me to be honest.

GitHub: GitHub - josefhlava/flashcards

Hi,
I seem to be having some issues with this one, which unless I’m doing something really daft, I’m wondering if there are some technical issues with the project files?
I first tried following the instructions to install it, so I could work off-platform but it installed a lot of out of date and deprecated packages. Because I have a newer version of the eslint package higher up the tree, I have run into some critical dependency issues which won’t allow the app to run at all. I tried following the advice in the error messages but it didn’t work.
So I then tried doing the project on-platform and I have got to step 9. Nothing gets added on the topic form and the console is giving the message of: Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.
I have checked and rechecked my code many times and have even tried copying/pasting the solution code directly and it always gives exactly the same error message.
I would be grateful for any advice on this.
Many thanks!
Tom
P.S. Although not related to this particular issue, I noticed that the Quiz component function has been given the name ‘Topic’. So there appear to be two topic components. This is in both starter and solution files.

I had the same issue, you need to change the quiz file to have the name quiz. If you are still working on this commit it to git and post a link to get help

I completed the project in Typescript, here’s my github repo: GitHub - ajhausdorf/flashcards: Typescript rendition of Codecademy's Redux challenge project

Hello everyone!
This is my solution for the Flashcards project.
Repo
Netlify
Good experience of debugging because none of the features worked the first time I tested it!
Happy coding! Keep struggling!
Angelika

hey guys
here is my solution:

github: GitHub - amanc1248/flashcardcodecademy

done!
This project was awesome. but I wish this was involved with react topics too. That way it would be more challenging. by the way, thank you.

hiradfazeli/flashcards-starter

please, can someone explain me why in TopicsSlice.js:

export const selectTopics = state => state.topics.topics;
and not
export const selectTopics = state => state.topics;

? why state.topics.topics?

The state has the following structure according to its instructions:
{
topics: {
topics: {
‘123’: {
id: ‘123’,
name: ‘example topic’,
icon: ‘icon url’,
quizIds: [‘456’]
}
}
},
so we need to use state.topics.topics

Hi all,
sharing my solution here. Any feedback is much appreciated.

I just finished the Flashcard Challenge which I enjoyed. On going into it, I was a bit intimidated. I found this great multi-part tutorial on Youtube and spent a couple of days going through it - slowly.

Redux Toolkit Tutorial from Codevolution

After completing the project requirements, I made some enhancements:

  • Added Header component.
  • Added Error component.
  • Added “New Topic” as header link.
  • Made header links conditional on existing topics/quizzes.
  • Added checks for duplicate topic and quiz names, cards within a given quiz.
  • Require icon to be entered for topic
  • Require at least 1 card per quiz.
  • Pass topic id as param when clicking on “add quiz” from topic page.

Please check it out, comments aoppreciated.

My Github Repo

Here is my solution for the project:

LIVE: flashcards-sultanby.surge.sh/

good luck))

This is my project:

GitHub: https://github.com/after909/Flashcards-Challenge-Project-Redux-

Live site: https://edu-flashcards.netlify.app/

Note: The thunk section and the card loop, I had to see in others’ solutions because I had a lot of doubts there. I feel so guilty :frowning:

NOTE: THIS IS NOT THE FINISHED PROJECT, JUST A STARTING POINT

For anyone trying to run this project in 2022 and you find it outdated, with a deprecated react-router-dom config, I made a boilerplate on my github. This is the project ready to start, with the fixes provided to make it compatible with react-router-dom v6 onwards, so you can start this exercise without having to do the same i just did.

You can download that, fork it, or whatever. The readme has a short explanation for getting started and troubleshooting.

1 Like

Hey,

Here is my Flashcards Project (not optimized for different screen sizes).
Got caught up on a few things but got there in the end and feel confident enough I could now bodge Redux into a project.
Filtering objects for the delete functionality was one, but learnt to use Object.entries() and Object.fromEntries() from MDN. (may have covered this on Codecademy but have the memory of a sieve lol)

GitHub Pages - Live Site

GitHub repo - GitHub repository

After finishing the base project I added:

  • Actions to delete individual quizzes and associated cards
  • Action to delete a topic and all liked quizzes/cards
  • Pop up warning when deleting a topic
  • Quizzes in quiz list display what topic they belong too and how many cards they have
  • Quiz list when a topic is clicked show number of cards

Thanks for any advice

Here’s my solution: GitHub - mendelgordon/flashcards: Basic Flashcards App
I made the state stay even after you refresh by saving it to the browsers localstorage.
(I also used react-router v6 instead of v5 like the starting code has)