malparty / react-survey Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 2.89 MB

Nimble internal certification for React — the opportunity to learn with deep practice!

License: MIT License

JavaScript 85.05% HTML 2.07% SCSS 3.04% TypeScript 9.83%

react-survey's People

Contributors

Watchers

react-survey's Issues

[Feature] As a user, I can answer an NPS question

Why

In order to complete a survey containing such question types.

Acceptance Criteria

✅ Handle the answer type
✅ Handle the answer constraints — required, format regex, default value, etc...

Design

[Chore] Update Readme and PR templates

Why

In order to start from clean foundations, ensure the 'README.md' and the default PR templates are aligned with the project need.

Who Benefits?

Developers and reviewers will have a clean repository even before we bring code in.

[Feature] [Backend] As a User, I can overview the list of survey I did not complete yet

Why

In order to select which next survey the user will complete.

Acceptance Criteria

✅ Handle the API logic to fetch all non completed surveys
Do not handle lazyload of pages
Do not handle the UI yet — outputting non formated text is OK

Who Benefits?

Logged users.

[Chore] Setup scss and style framework

Why

In order to save time on UI tasks and keep the code clean.

Insight

Configure the project to use SCSS from this source.
Choose to include bootstrap of tailwind library.
Setup default variables in order to get closer to the targeted UI

Who Benefits?

Developers.

[Feature] As a user, I can visit the application in different languages

Why

In order to ease my navigation when I am not a native English user.

Acceptance Criteria

All English instructions held inside the application should be in a common location
The language files to load should be configuration on page load
Default values should fallback to Enligh in case of incomplete translation files
[optional] Build an FR/EN switch to demo the multi-lang feature

Design

N/A

Resources

We can use react-i18next

[Feature] [Backend] As a user, when I complete a form, the answers are sent to the API

Why

In order to enable the survey owner to get value from the whole application! 🎉

Acceptance Criteria

✅ Handle happy path
✅ Handle non-happy path with an error message displayed to the user
✅ Redirect the user to the homepage — with a refreshed list of survey

[Chore] Configure Unit Tests

Why

In order to enable writing unit tests and ensure the tests will auto-run.

Insights

Configure JEST on the project following this source.
Configure the GitHub action to run the tests on push.

Who Benefits?

Developers for ease to extends the code
Users for improved quality

[Feature] [Frontend] As a user, I can scroll the next question using a horizontal swipe gesture

Why

In order to get a better navigation experience while completing a survey.

Acceptance Criteria

✅ Add a trigger on swipe and bind it to the same action as the "next question" button

[Feature][BackEnd] As a User, when I login, I get redirected to the application main screen

Why

In order to enable a user to sign in to the application

Acceptance Criteria

✅ Create a new empty screen for the logged application and redirect successful log in requests to it, using routing
Do not handle the token refresh mechanism yet
Do not handle layout style yet

Who Benefits?

Users who could not use the future features without being logged in.

[Feature] As a User, I can see a lazy loading UI while all surveys are being fetched

Why

Users do not like to wait, seeing a lazy loading UI helps with that while confirming the user that something is happening.

Acceptance Criteria

✅ Handle lazy UI with animation
Do not handle the cache logic

Who Benefits?

Users with an improved experience.

[Chore] Create the base React-app

Why

In order to have the whole config done and to be able to work on the deployment issues.

Insights

Use the create-react-app tool to generate the app.

Ensure linters are well setup & Nimble compliant

Use the typescript option

npx create-react-app my-app --template typescript

Who Benefits?

Developer to reduce the load on manual configuration.

[Chore] Configure Staging deployment

Why

In order to ensure any change in develop is reflected in the staging environment.

Use netlify by following these instructions.

Who Benefits?

Developers.

[Feature] As a User, I can answer a satisfaction question

Why

In order to complete a survey containing such question types.

Acceptance Criteria

✅ Handle the answer type — warning, these can be thumbs up, stars, hearts and maybe more!!!
✅ Handle the answer constraints — required, format regex, default value, etc...

Design

[Feature] [FrontEnd] As a User, when I click on a survey card, I see an invitation to take the survey

Why

In order to provide an entry point for a user to start a survey.

Acceptance Criteria

✅ Handle the survey homepage
✅ Handle the return button
Do not handle the action of the Start survey button

Who Benefits?

Users.

[Feature][Front End] As a User, I can see a Login form

Why

In order to enable a user to sign in to the application

Acceptance Criteria

✅ Handle base screen layout and input styling
Do not handle API requests yet
Do not handle the token refresh mechanism yet

Who Benefits?

Users who could not use the future features without being logged in.

[Feature] As a User, I can answer a text field question

Why

In order to complete a survey containing such question types.

Acceptance Criteria

✅ Handle the text field answer type — one question can have many text fields
✅ Handle the answer constraints — required, format regex, default value, etc...

Design

[Feature] [Frontend] As a user, when I quite a survey without submission, I can see a confirmation modal

Why

In order to prevent an unwanted dismissal of all the user's answers.

Acceptance Criteria

✅ Handle the display of the confirmation message
✅ When the user clicks YES, continue with the survey closure
✅ When the user clicks cancel, close the message and stay on the current survey

Design

[Feature][BackEnd] As a User, I do not need to reconnect after my current token expires

Why

In order to enable a user to remain signed in to the application

Acceptance Criteria

✅ Handle the token refresh mechanism

Who Benefits?

Users who could not use the future features without being logged in.

[Feature] [Backend] As a User, the surveys loads much faster when I already visited the site before

Why

The users do not like to wait and time is money.

Acceptance Criteria

✅ Handle the caching of fetched surveys
✅ Handle the surveys refresh (on page reload only) from the API once the cached survey are displayed

Who Benefits?

Users with a reduced waiting time.

[Feature] [Frontend] As a user, when I complete a form, I see a confirmation message

Why

In order to be aware of the successful submission of the survey.

Acceptance Criteria

✅ Show an SVG-based animation (or alternative) on completing the survey.

Design

(Optional) Add design screenshots or Figma links for UI/UX-related stories.

Resources

[Feature] As a user, I can answer a text area question

Why

In order to complete a survey containing such question types.

Acceptance Criteria

✅ Handle the answer type
✅ Handle the answer constraints — required, format regex, default value, etc...

Design

[Feature] [Frontend] As a User, I can overview the list of survey I did not complete yet

Why

In order to select which next survey the user will complete.

Acceptance Criteria

✅ Handle the UI to render the fetched surveys from #15
✅ Handle the carousel — a horizontal scroll of survey
Do not handle lazyload of pages

Who Benefits?

Logged users.

[Feature][Frontend] As a User, I can see a friendly message when I do not have any survey to complete

Why

The user needs to know that there is no more survey to complete. Not having this information might create confusion to the user.

Acceptance Criteria

✅ Handle the You’ve completed all the surveys. Take a moment. message
Do not handle the page lazyloading yet
Do not handle the survey API requests yet

Who Benefits?

The user gets a better experience.

[Chore] Configure UI tests

Why

In order to guaranty the main workflow/happy paths are still working — even the code changed.

Insights

Setup and configure Cypress for running UI tests.
Configure a GitHub action to run the tests on push.

Who Benefits?

Developers for ease to extend the code
Users for improved quality

[Feature] [Backend] As a user, I can navigate across the survey questions

Why

In order to read them, but also to update my answer when needed.

Acceptance Criteria

✅ Handle the questions iteration logic with a non-styled <QuestionContainer> component for each question — the basic text for Proof of Work can be implemented
✅ Handle moving forward as well as the close button
✅ Display a Submit button when reaching the last question
✅ Redirect the survey homepage when returning from the close button
Do not handle the action of the Submit button
Do not handle the question styling
Do not handle the navigation styling

[Feature] [Frontend] As a user, I can navigate across the survey questions

Why

In order to read them, but also to update my answer when needed.

Acceptance Criteria

✅ Handle the navigation styling
✅ Handle the question text formating
Do not handle the action of the Submit button
Do not handle the question styling

Design

[Feature] As a user, I can answer a multi choice question

Why

In order to complete a survey containing such question types.

Acceptance Criteria

✅ Handle the answer type
✅ Handle the answer constraints — required, format regex, default value, etc...

Design

[Feature] As a User, I can answer a single choice question

Why

In order to complete a survey containing such question types.

Acceptance Criteria

✅ Handle the answer type
✅ Handle the answer constraints — required, format regex, default value, etc...

Design

[Feature] As a User, I can answer a yes/no question

Why

In order to complete a survey containing such question types.

Acceptance Criteria

✅ Handle the answer type

Design

[Feature][BackEnd] As a User, I can submit the login form and see the status of my login request

Why

In order to enable a user to sign in to the application

Acceptance Criteria

✅ Handle API requests (including setting up the base API connection structure and staging/production logic)
✅ Handle the storage of access&refresh tokens
Do not add a new screen yet — use a default "you are logged in" message instead
Do not handle the token refresh mechanism yet
Do not handle layout style yet

Who Benefits?

Users who could not use the future features without being logged in.

[Feature] As a user, I can log out from the application

Why

In order to prevent other users to use the application under my identity.

Acceptance Criteria

✅ When a user clicks an avatar on the top right corner of the screen, a menu is displayed with the logout button
✅ When the user clicks the logout button, the current token is logged out and the user is redirected to the home page