This project is built using Next.js, a React framework that provides several advantages over traditional React applications:

• Server-side rendering (SSR): Next.js supports SSR out of the box, which enhances SEO and provides faster initial page loads by rendering pages on the server.

• Automatic code splitting: Next.js automatically splits code bundles, ensuring that only necessary JavaScript is loaded, optimizing performance.

• File-based routing: Next.js uses a file-based routing system, making it intuitive to create and organize routes within the pages directory.

• Next.js: Chosen for its SSR capabilities and simplified routing compared to React.js.

• Sass: Used for styling due to its advanced features like variables and nesting, enhancing maintainability and scalability.

• IndexedDB: Utilized for storing user details and authentication data locally, ensuring data persistence and offline access.

Ensure you have Node.js and npm installed on your machine.

1. Clone the repository: git clone https://github.com/summyalena/lendsqr-fe-test

2. Install dependencies:

   npm install

To run the application in development mode:

npm run dev

This command starts the development server. Open http://localhost:3000 to view it in the browser.

The project follows a structured organization:

• components/ui: Contains reusable UI components used across the application.

• utils/component: Houses IndexedDB for storing user authentication and details.

• protectedRoute and authContext files: Implements authentication mechanisms to secure routes and manage user sessions.

• pages/page.tsx: The main entry point (dashboard), displaying the core content of the application.

• dashboard/layout: Provides a layout structure for the dashboard content.

1. Signup: Users must register to access the application.

2. Sign In: After signup, users log in to authenticate themselves.

3. Dashboard: Upon successful authentication, users are directed to the dashboard where they can access application features.

• Ensure to explore the components/ui folder for reusable components and utils/components for IndexedDB integration details.

• Authentication and route protection are managed through protectedRoute and authContext, ensuring a secure user experience.

• I used vercel to deploy th web app

https://docs.google.com/document/d/1gs-PK-mHqs1GM3N0aV70pCF0ndb6xBdBR-5uIR7NRHI/edit

attached here is the document that shows what i have done so far.