This project is a website that implements a login page, consuming an API and then showing a page with the user informations. This project is part of the b2bit company challenge.
git clone https://github.com/noefernandes/b2bit-app.git
cd b2bit-app
npm install
npm run devThe following screenshots show the final state of the site's pages, paying attention to responsiveness for both desktops and smartphones.
| Checklist | Done |
|---|---|
| Typescript | ✅ |
| ReactJS | ✅ |
| React Router | ✅ |
| Formik | ✅ |
| Interceptors | ✅ |
| Unit Tests | ✅ |
| Component Tests | ✅ |
| e2e Tests | ✅ |
| TailWind | ✅ |
| Deploy | ✅ |
About the tests:
- Unit tests were performed using the library Vitest, while e2e and component tests were performed using Cypress.
- A github actions pipeline runs the application build and testing process with each push.
The application is deployed to Vercel with each push.
Users can authenticate using their credentials, meanwhile the jwt tokens are stored in the browser's local storage.
2. As a user, I want the system to keep me signed in, so I don't need to put my credentials every time I open the system
As the access is still on the browsers local storage, the user does not need to login. The application will always allow the user access while the token is still valid.
3. As a user, I want to have a feedback if I fill the wrong credentials, so I know that I did something wrong and I can fix it
In this case, formik deals with form errors, while submission errors are validated by an application function that expects to receive a valid access token.
The following gif shows the user page with all user informations displayed. Also you can see that the tokens were registered after the login.
The logout functionality works fine as well. After pressing the logout button, you can see that the tokens are removed from local storage and now the user needs to authenticate again if he wants to use the site.
- Noé Fernandes