This is a front-end assignment where you are required to build 4 pages - Login, Dashboard, User page, and User details page. The design for these pages can be found at this Figma link. The user pages will pull data from a mock API with 500 records. You will also need to use local storage or indexedDB to store and retrieve user details on the user details page. The page must be mobile responsive.

• Next.js as the UI framework
• TypeScript as the language of choice
• SCSS for style processing

• JSON Web Token (JWT) for authentication
• Axios for making HTTP requests
• React Query for managing data fetching and caching
• Storybook for developing UI components in isolation
• Cypress for end-to-end testing of the application

To get started with the project, you will need to do the following:

1. Clone the repository to your local machine
2. Install dependencies by running pnpm install
3. Run the development server by running pnpm run dev
4. Visit http://localhost:3000 in your browser to view the application

You will be redirected to the login page. The login page has authentication implemtented using JWT. To enter the app, you have two options.

1. When running locally, you can have ADMIN_EMAIL, ADMIN_PASSWORD set in your env file and those will be used.
2. Use the default values

email='[email protected]'
password='password1234'

The Login page is the starting point for the application.
If you already logged in before(by checking the token in your local storage),
visiting the app base route will take you to the dashboard page,
otherwise you will be redirected to the login page.

From there, you can click on users and go to the users route.
All the users are cached in indexedDb, and the cache is invalidated every 1 minute.
Clicking on a user/using the action button will take you to the User details page.
The user details will also be stored indexedDB in a separate collection, and invalidated every 1 minute.

In the src folder, you will find

• Assets
• Consts
• Page Components
• Service
• Shared
• Styles
• Page: This contains nextjs pages and the api folder which contains some api routes.

The choice of Nextjs as a React framework was used given the nature of the app, it could greatly benefit with search engine optimization from the server-side rendering feature which Next js provides out of the box.