Purpose of this issue

This relates back to what I mentioned about code style and convention in the backend repo. A formatter is necessary to have a consistent code style and format across the entire codebase. We have 6 developers and most likely 6 different opinions about how things should look: some wants trailing commas, some don't, some don't want multiline function invocation, some wants them, list go on.

We shall use Prettier for the formatter, it's opinionated and used frequently in the industry. We will use ESLint Airbnb style since that's also popular.

I will not listen to any objection, disputes between code styling is trivial and waste of time. Settles on one convention so code reviews focuses more on the logic and functionalities instead of arguing about whether the object in line 102 should have trailing commas or not.

Code complete

• I can run the script npm run format to format all the relevant files
• I can run the script npm run lint to have the linter gives me error and/or warnings
• NB: My code editor automatically formats the file with Prettier when I save. This depends on editor used, I will add instruction for VSCode later.

P.S.: NB stands for Non Blocking, it means whatever the requirement/suggestion is does not need to be satisfied/agreed upon for the issue to be completed.

Purpose of this issue

We need to have a Figma design for the login/signup page. We will utilize Ant design since it's open source. There are some inspirations for the design of the page on the Internet, let's choose a simple one.

Completion Criteria

• A Figma file exists with the design
• The design is agreed upon by the majority

Purpose of this issue

We want to have the login/signup page that matches the layout specified in the design. We do not need to add thorough CSS styling, that can be done later.

Ideally we would want a React component for the login/signup card. Error states can be done in the ticket that add CSS styling

Code Complete

• The page matches the layout specified in the design
• I can interact with the components
• TBD

Related issues

Blocked by:

• #1
• #3

Purpose of this ticket

We want to have robust error state for when user enter invalid inputs, we also want the styling to matches the Figma design.

Code Complete

• When I enter invalid email, I see an error state
• When I enter invalid token, I see an error state

Related issues

Blocked by:

• #4

Purpose of this issue

We want to have reusable React components throughout the apps. We need an input component that supports:

• email inputs
• password inputs
• number inputs (for token)

These are the 3 types we need right now, we can add more type later. If the component is built properly, supporting more input types should be trivial.

Figma design

https://www.figma.com/file/c6bQyGPmh66Vv5x8Gs1XN9/StudyHub-Signup%2FLogin-Flow?node-id=1-420&t=O59lg5c3Qa0uGRxM-0

Code complete

• The input component matches the Figma design
• Email input should only accepts email
• Password input should be masked with dot, or asterisk
• Number input should only accept number
• The validation done should be very simple, we will implement more thorough validation later.
• NB: @j-ngo828 to add the component to Storybook

Related issues

Relates to:

• #1