Skip to content
OverviewSolutions
4
Comments
5
Anurag Singh
@dev-anurag-singh

All comments

  • Anurag Singh•250
    @dev-anurag-singhPosted about 1 year ago

    @dashok-myr

    Congratulations on completing the challenge Here are a few things I think you can do to improve user experience

    • Showing a loading Spinner instead of a login form when checking if a user is present
    • By removing the scrollbar on the links Component
    • Adding an event listener on the document outside the select to close it when a user clicks outside the select element
    0
  • Anurag Singh•250
    @dev-anurag-singhPosted about 1 year ago

    <img srcicon-luxury.svg" alt="" srcset="" />

    fix this by doing this and your icons will show properly

    <img src="icon-luxury.svg" alt="luxury" />

    Marked as helpful
    0
  • Anurag Singh•250
    @dev-anurag-singhPosted about 1 year ago

    hey, peace nice work but your layout completely breaks at the screen width of above 375px and also you are not using tailwinds classes for media breakpoint but using your own which isn't a good practice

    2
  • Rohit Rajak•60
    @RoRajakSubmitted about 1 year ago

    Hello Guys,

    Hope you are doing well. I made lots of mistake specially in responsive design so if you able to suggest or improve my coding. It will be helpful

    Thank you in advance

    Results summary component

    3
    Anurag Singh•250
    @dev-anurag-singhPosted about 1 year ago

    Hey, Rohit I have gone through your code and here are some suggestions I have that can be easily incorporated into your code

    .main-container {
 // remove height and width and instead use flex property and rem instead of px(1rem=16px)
 flex: 0 0 43.75rem,
}

.left-side{
 // remove width and add flex
  flex: 0 0 50%,
}

.right-side{
 // add align items property
 align-items : center,
}
    Marked as helpful
    0
  • Richard Addo•480
    @12Ricky0Submitted about 1 year ago

    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.

    Entertainment App

    1
    Anurag Singh•250
    @dev-anurag-singhPosted about 1 year ago

    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