yurivyatkin / react-signup-form

An example of a signup form implemented within a React application.

A Sign-Up Form Exercise

This exercise showcases the use of React + TypeScript + Tailwind CSS to build single-page applications following a Test-Driven Development approach.

Requirements

The application has a form with three fields:

• "username", must be a valid email address;
• "password", must contain a capital letter, a numeric symbol, and a special number;
• "confirm password", must match the value of the password field.

The form has a button with the text "Sign In".

The form can be submitted if all the fields are valid.

Upon successful submission, a success message is displayed.

Technical Solution

The technical solution chosen for implementing the requirements is explained in this Wiki page.

How to run locally

Clone the repository:

git clone [email protected]:yurivyatkin/react-signup-form.git

Install the dependencies

npm install

Run the development server:

npm run dev

Open the local copy at http://localhost:5173/.

How to test

Run the test runner:

npm test

How to develop components in isolation

Run Storybook:

npm run storybook

See the deployed application

Open the link: Sign-Up Form.

react-signup-form's Issues

Implement form's behavior.

The form should validate the user's input as described in the Functional Requirements section.
We need to leverage the idea to leverage React Hook Form.

Show a Thank You page after submitting the form.

As required, when the form is submitted, display a success message.

Describe the proposed technical solution.

The README.md file is suitable for all initial thoughts and findings.

Sharing the link to the repository immediately gives access to the stakeholders who can provide their technical solution review feedback in the comments on this issue.

Update README.

We need to add a brief description of the project.
We can use some parts of the Technical Stack from the Wiki.
A link to the deployed application must be somewhere in the README file or the repository description.

Add tests to cover the requirements.

All the functional requirements should be covered with unit or integration tests.

Deploy to GitHub Pages.

See the instructions here.

Configure a base application.

Follow the proposed technical solution in the README.md file.

Build the initial static prototype.

We can quickly prototype the desired design using the technologies already enabled in the base application.

For that, we need to perform the following steps.

1. Implement all the ingredient components in the Storybook:

• Input (with variants);
• Button (with variants);
• Card;
• Form;
• Page.

2. Assemble the signup page from the obtained components. Make this page the initial view of the app.
3. Ensure that the markup is responsive, that is, the form is usable for various screen sizes.

Don't implement the behaviour yet (no validations, no submit, etc, as they will be implemented in the following tickets).