/quiz-backend

Primary LanguageJavaScript

quiz app

Deploying

For the backend:

  • git clone https://github.com/ishitap/quiz-backend.git && cd quiz-backend
  • npm install && node app

For the frontend:

  • git clone https://github.com/ishitap/quiz-frontend.git && cd quiz-frontend
  • npm install && npm start
  • If, for whatever reason, your backend is not on localhost:5000, you can run REACT_APP_BACKEND=your_backend npm start instead of just npm start.

Limitations

  • limited to no error handling. If there is an error there is no helpful modal or other recovery route. Usually the data will just not save and the error is returned in the response body, just not printed out for the user.
  • very few loading states currently
  • styling is very poor, and some not great UX decisions to make the app simpler (for example, instead of having a zero-state, I just automatically populate each new question with some options).
  • JWT times out after 3600s, but we can change this easily

Frontend component tree

  • App/: entry point, router code is here

  • PageLayout/: Overall structure/styling of each page

  • Login/: Login page

  • QuizDetail/: HOC around PlayQuiz and EditQuiz that handles fetching the specific quiz and 404’ing if there’s a bad ID

  • QuizList: list of quizzes when you are at the home page

  • EditQuiz/: all the stuff that is on the page when you edit a quiz

  • PlayQuiz/: all the stuff that is on the page when you play a quiz

  • Question: displays a question. Has two modes - edit & regular. Edit is enabled only when onSave is truthy

  • QuestionOptions: displays the options for a question *used in Question)

Sources & attribution:

  • Backend JWT/auth code from here
  • Followed these rules from MongoDB about how to structure schema.
  • I'm not super familiar with Node/MongoDB best practices so I tried to do my best to structure the app meaningfully from what I've seen in other projects.