Flashcards Challenge Project (Redux)

Projects Challenge Projects
42

Here is my stab at the project!

The thunk section definitely gave me trouble. The only instruction in the course was for async thunks and I was just having trouble visualizing a synchronous thunk.

Github Link: GitHub - jsdiekmann/flashcards-project

43

Hello Daniel,
I completed a code review of your flashcards project, and sent you a pull request on github. I hope you will find it helpful!

Sincerely, Jacob

44

Hi everyone!
I have just finished the project:

It was challenging, especially the thunk part. To solve this task I also used Official Redux documentation

45

Hello,

Here is my solution for the flashcards project:

https://github.com/rafael0rueda/flashcards-starter

46

Hi, Everyone!

I have finished this fun project. You can check my code and website:
https://miyano-flashcards-starter.netlify.app/
https://github.com/MiyanoX/flashcards-starter

Feel free to ask any questions!

47

Hello All,

I need some help with the quizzes selector. I did it the same way I did the topics selector, which works fine, but I keep getting the below error:

image
image1110×479 27.1 KB

Here is the code I have for the quiz slice.

import { createSlice } from "@reduxjs/toolkit";
import { addQuizIdForTopic } from "../topics/topicsSlice";

export const quizzesSlice = createSlice({
  name: "quizzes",
  initialState: {
    quizzes: {}
  },
  reducers: {
    addQuiz: (state, action) => {
      const { id } = action.payload;
      state.quizzes[id] = action.payload;
    }
  }
});

export const addQuizForTopicId = (quiz) => {
  const { topicId, id } = quiz;
  return (dispatch) => {
    dispatch(quizzesSlice.actions.addQuiz(quiz));
    dispatch(addQuizIdForTopic({ topicId: topicId, quizId: id }));
  };
};



export const selectQuizzes = (state) => state.quizzes.quizzes;
export const { addQuiz } = quizzesSlice.actions;
export default quizzesSlice.reducer;

I cannot figure out what I am doing wrong. Any advice would be appreciated. Thank you!

49

Hello all,

This is my solution for the Flashcards project. I had to start this entire Redux section over several times before I was able to finally get to this point. It was worth it… Keep at it!!!

I did not do this project in the Codecademy environment, I used VSCODE for all of it and I would recommend the same to others as you can debug A LOT better there. The Codecademy environment works great for the lessons, but it is much better to work on the projects inside of our own dev environments imho…

Some advise to those who are having trouble with this one USE REDUX DEV TOOLS A LOT!!!

TomoFromEarth’s Flashcards solution

1 Like
50

Hello all,

This is my solution for the Flashcards project.

I did not do this project in the Codecademy environment, I used VSCODE for the project. If any of you have a problem using the file provided by Codecademy due to an outdated version, here is the boilerplate I used.

Big thanks to @joacopaz

1 Like
51

Here is my solution to the project. Let me know if you have any feedback!

1 Like
52

You are the best! Thank you!

1 Like
53

Hi
Here is my code https://github.com/TEH3OP/flashcards-starter.git

2 Likes
54

I literally can’t complete this project.

If I try and do it on platform I get the error that others have gotten which is “Store doesn’t have a valid reducer”.

If I do it off platform, pretty much everything is deprecated, which sucks but it’s not too bad except I can’t run npm start because I get an error. I shouldn’t have to debug the starter code to get it to work. I have had issues like this before which is why I initially just tried it on platform, but I just can’t get it to work.

EDIT: If anyone else is having these issues you should use @joacopaz updated version of this project that can be found below. The “Store doesn’t have a valid reducer” error is something to do with codecademy’s ide i think. I am grateful they made this so I can complete the project, however it should not be down to community members to fix codecademy’s broken and out of date projects.

2 Likes
55

Cheers mate! Your code was a helpful guide in getting my own setup to work. Can I ask why you’re not using createBrowserRouter() and createRoutesFromElements()? I suspect this is because you define the routes at the bottom of the App function, but my knowledge is shaky around these things and I’d appreciate if you (or anyone) could shed light on this.

1 Like
56

Hey! Cheers to you also firgrep.

I’m trying to recall the decision making process, reading the docs and seeing the original code, I suspect the reason I went with importing the BrowserRouter instead of creating it as the docs recommend with createBrowserRouter() is because it was the closest way to bridge the gap between the legacy/outdated code of the exercise and the new way to build routers in v6 onwards.

I would recommend if you feel comfortable building it with createBrowserRouter to do so as the docs recommend it as the preferable way. But the modules that teach us about react-router are so deprecated that I tried to mantain similarity in how the original exercise structure was as to not have to refactor every single route and just keeping it as similar as possible, as the original form.

TLDR the idea was to make it functional and user-friendly, but I would recommend to use createBrowserRouter if one is interested in delving deeper into the documentation.

Kind regards!

1 Like
57

That makes a lot of sense. As you say, while it’s better to use the recommended method, there’s potentially a lot of work involved in making sure everything in the old code still works as intended. I think you went for a good middle way for this project and as long as we’re aware of recommended route and the trade-offs, we’ll have learned lesson and can implement the right way for new projects.

Thanks for your extensive response, joacopaz! Appreciate it!

59

Here is the solution to my Flashcards project. I used joacopaz’s boiler plate repo in order to be able to complete the project. It can be found here Commits · joacopaz/Flashcards_Boilerplate · GitHub. I was a little worried with using Redux, however this project is a great intro to it. I am going to try a few more projects so that I kind become more familiar with it.

My project: GitHub - dmobley0608/flashcards

60

Hello,

Honestly React and Redux is a tough subject to learn so I had to use ChatGPT to help guide me with the project.

Here is the link React App

61

Have you checked the configureStore() in the src/app/store.js file?

I also had the same problem and it works fine after I have added quizzes slice to the reducer property in configureStore function.

The store.js’s code should look like this:

import { configureStore } from "@reduxjs/toolkit";
import topicsSlice from "../features/topics/topicsSlice";
import quizzesSlice from "../features/quizzes/quizzesSlice";

export default configureStore({
  reducer: {
    topics: topicsSlice,
    quizzes: quizzesSlice // < ----- This is the missing slice of quizzes!
  },
});

I hope this helps!

62

Hey guys,

I just completed the project. Here are my links:

Flashcards Challenge Project

Live App on Netlify

63

Hello, here is my flashcards project,
it has been one of the most difficult ones I’ve worked on thus far

Live site: https://chabulsqu-flashcards.netlify.app/topics
Github repository: GitHub - Chabulsqu/flashcards

I’ve managed to save topics and quizzes using LocalStorage and it worked pretty well.

Now I’m left wondering how to implement a delete feature, if you know how, please reach out to me! :grin:

1 Like