Giter Club home page Giter Club logo

react-survey-challenge's Introduction

Nimble Survey

This project is for Nimble React Internal Certification. It was bootstrapped with Nimble React template.

Development

Install Dependencies

yarn

Runs the App

yarn start

Open http://localhost:3000 to view it in the browser.

Testing

Linting

Runs All Linting

Run ESLint and Stylelint together in the project.

yarn codebase:lint

Fix auto-correctable ESLint and Stylelint errors together in the project.

yarn codebase:fix

ESLint

Run ESLint in the project.

yarn lint

Fix auto-correctable ESLint errors in the project.

yarn lint:fix

Stylelint

Run Stylelint in the project.

yarn stylelint

Fix auto-correctable Stylelint errors in the project.

yarn stylelint:fix

Unit Test (Jest)

To launch, the test runner in the interactive watch mode runs the following command. See the section about running tests for more information.

yarn test

UI Test (Cypress)

To run Cypress tests run the following command. By default, cypress run will run all tests headlessly in the Electron browser. Check options

yarn cypress:run

To open the Cypress Test Runner run the following command. Check options

yarn cypress:open

Other Useful Scripts

In the project directory, you can run:

yarn build: Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes. Your app is ready to be deployed!

See the section about deployment for more information.

yarn eject: If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project. Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them.

Note: this is a one-way operation. Once you eject, you can’t go back!

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

react-survey-challenge's People

Contributors

carryall avatar

Watchers

Hoàng Mirs avatar Rafayet Monon avatar

react-survey-challenge's Issues

As a user, I can see the home page header

Why

User can see the home page header after they logged in so they know that they already logged in

Acceptance Criteria

  • Display logo and a avatar on the home page header

Resources

Screen Shot 2564-10-11 at 11 56 05

As a user, I can see reset password page

Why

User can see the reset password page so that they can reset password when they forgot

Acceptance Criteria

  • The reset password page UI is implemented
  • DO NOT call the reset password API yet, it'll be implemented in another story

As a user, I can submit the survey

Why

The user can submit the survey.

Acceptance Criteria

  • Display submit button on the last question of the survey
  • When clicking on the submit button, call API to submit the survey
  • When successfully submitted the survey, display the thank you message

Resources

The thank you message can be found with outro display type in the API response

As a user, I can logout

Why

User can logout so they can remove their session on the app

Acceptance Criteria

  • Add logout link to the sidebar
  • Log user our when they click on that link

Setup CD

Why

To align with Nimble's workflow and ensure the effectiveness of the product delivery we should have automated CD

Acceptance Criteria

  • Setup CD on Github Action to deploy on Netlify

As a user, I can see rating questions

Why

User can see rating questions so that they can rate the question. The following are display types for rating question

  • Star ⭐
  • Smily 😃
  • Heart ❤️
  • Thumb 👍🏼

Acceptance Criteria

  • Display the question with the mentioned display type

Resources

Screen Shot 2564-10-11 at 12 54 21

As a user, I can quit the survey

Why

User can quit the survey when they want but they will lost the answer they already added.

Acceptance Criteria

  • Display a confirmation modal when the user click on the close button to quite the survey
    Screen Shot 2564-10-11 at 14 07 33
  • If the user confirm to quite redirect to home page and do not save any previous answer

Use alias import instead of relative path

Why

To reduce mistakes while using relative path import and make the implementation easier

Relative Path Import

import SomeComponent from '../../../path/to/component'

Alias Module Import

import SomeComponent from '@components/ComponentName'

Acceptance Criteria

Configure alias module for

  • Assets
  • Components

As a user, I can see login page

Why

User can see login page so that they can login to see their survey

Acceptance Criteria

  • Implement the UI for login page
  • Also provide the style for error message
  • Do NOT call the login API yet, it'll be implement in another story

As a user, I can reset password when I forgot

Why

User can reset their password when they forgot their password so that they can login again with the new password

Acceptance Criteria

  • Call reset password API when submit reset password form
  • Display the notification message

As a user, I can see single choice questions

Why

User can see single choice questions so that they can answer the question by selecting a choice

Acceptance Criteria

  • Display the question with choice display type and have pick attribute set to one

Screen Shot 2564-10-11 at 12 54 28

As a user, I can login

Why

User can login so that they can see their survey

Acceptance Criteria

  • Use adapters for API call
  • Call Login API when submit login form
  • Display error if any

As a user, I can see survey detail

Why

User can see the survey detail when they click on the navigation button on the survey on the home page.

Acceptance Criteria

  • Display survey introduction on the detail page
  • DO NOT implement the survey question pages yet

Resources

The introduction message can be found with intro display type in the API response

Design on Figma

Setup base component

Why

Setup base styles for component and icons so we can use it later while implement the features

Acceptance Criteria

  • Add styles for base component
  • Add base icons

Resources

App component on Figma

As a user, I can see NPS questions

Why

User can see NPS questions so that they can answer the question

Acceptance Criteria

  • Display the question with nps display type

Resources

Screen Shot 2564-10-11 at 12 54 00

Setup CI

Why

To align with Nimble's workflow and ensure the effectiveness of the product we should have automated CI

Acceptance Criteria

  • Setup CI with Github Action

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.