Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Entertainment App

P

@12Ricky0

Desktop design screenshot for the Entertainment web app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my first full stack application using the MERN Stack. My main challenge was user authentication using JWT as I was a bit confused in trying to get the generated user token in the frontend of the app.

Moreover, one of the major challenge i encountered was using the reducer function. In trying to Update the initial state, the state return an "undefined value" which a big blow for me hence I had to use the useState instead.

I will be much happy if any can assist me regarding the best use scenario for reducer function.

Community feedback

@dev-anurag-singh

Posted

Hey, Richard I have read your code on GitHub and tried to explain how you can use useReducer correctly

const initialState = {
   loggedIn:false,
    token:"",
   bookmarkResults:"",
}
// reducer function gets access to the current state and action dispatched 
 function reducer(state,action){
    switch (action.type) {
    case 'login':
      return { ...state, token: action.payload, loggedIn: true };
     case 'logout':
      return { ...state,  token: "", loggedIn: false};
    // you can create more actions for adding a bookmark or removing a bookmark 
    default:
      throw new Error('unknown action');
  }
}

// Invoke this function to update login state

function  login(email,password){
 // code to check email & password
// if email && password are correct

      dispatch({ type: 'login', payload: token });
}

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord