/lendsqr-fe-test

A test to demonstrate proficiency in frontend skills

Primary LanguageTypeScript

Project Documentation

Overview

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.

Technologies Used

  • 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.

Getting Started

Prerequisites

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

Installation

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

  2. Install dependencies:

    npm install

Running the App

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.

Folder Structure

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.

Authentication Flow

  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.

Additional Notes

  • 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.

Deployment

  • 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.