Create Survey Technical Design Document - AashnaNarang/SurveyLab GitHub Wiki

Backend

Models

• At the moment, we have everything we think we need for this feature

APIs

• Create a survey

  • POST /surveys

    body: {
    	title: "untitled",
    	isLive: false,
    	wentLiveAt: null, 
    }
    

  • PATCH /surveys/:surveyId

    body: {
    	title: "Survey Title",
    	isLive: true,
    	wentLiveAt: 23-02-2022 00:00:00, 
    }
    

  • DELETE /surveys/:surveyId

• Add an open-ended question to a survey

  • POST /textquestion

    body: {
    	surveyId: du93209dj39d9d, 
    	question: "How many goldfish do you have"
    }
    

  • PATCH /textquestion/:questionId

    body: {
    	surveyId: du93209dj39d9d, 
    	question: "How many sea horses do you have"
    }
    

  • DELETE /textquestion/:questionId

• Add a multiple-choice question to a survey

  • POST /mcquestion

    body: {
    	surveyId: fjd923jejds, 
    	question: "Do you like hot chocolate?", 
      options: [
    		"Yes", 
    		"No",
    	]
    }
    

  • PATCH /mcquestion/:questionId

    body: {
    	surveyId: fjd923jejds, 
    	question: "Do you like chocolate milk?"
    }
    

  • DELETE /mcquestion/:questionId

Frontend

• Add React Functions for each of the API calls listed above

  For each API call we create we need to create function in react to interact with that endpoint. If we agree on what each API call looks like we can work on Frontend and Backend separately.

  See example from Rails React Guide here https://www.honeybadger.io/blog/react-rails/

  

• Create Survey Page

  • When you open this page, call the POST /surveys API with title = untitled, isLive = false, wentLiveAt=null.

  • Add Open Ended Question

    • Give users the option to add a text question. Auto fill in the question to be called “Untitled Question”
    • Have a delete button next to the question. Remove the question from the frontend state variables if clicked

  • Add Multiple Choice Question

    • Give the users the option to add a multiple choice question and to add options
    • Add a limit of x options
    • Have a delete button next to the question. Remove the question from the frontend state variables if clicked

  • Submit Survey

    • Validate the user input. Outline a field in red if it is a required field but was left blank
    • When a user submits a survey, call the POST /textquestion API to add the question. Pass in the existing survey id that was created when the page was first opened and the question
    • When a user submits a survey, call the POST /mcquestion API to add the question. Pass in the existing survey id that was created when the page was first opened, the question, and the options
    • Show a success message if all the API calls were successful. Show an Error modal if any of the APIs fail + show a readable error message
      • If one or some requests fail, for now no worries. Rely on frontend validation for now
    • Make a PATCH /surveys/:surveyId to update the title, isLive, wentLiveAt field
    • Once the survey is submitted, leave page as is for now.

  • Edit Survey

    • If any questions are edited, use the appropriate PATCH requests
    • If any questions are deleted, use the appropriate DELETE requests
    • If the survey title is changed, then use PATCH /surveys/:surveyId

  • UI inspiration

    

Tasks

• Backend
  • Create survey (Aashna + Vasugi)
  • Add open-ended question (Aashna + Vasugi)
  • Add multiple choice question (Andrew)
• Frontend
  • Create survey button on homepage (Judy)
  • Create survey page (Judy)
  • • Done Monday -
  • Text-based question (Vasugi + Sama)
  • Multiple choice question component (Andrew)
  • Submit survey logic (Aashna)