https://github.com/vicolas11/lendsqr-fe-test
The Lendsqr Frontend Test project is a responsive dashboard application built using React, TypeScript, SCSS, and Tailwind CSS. It features several key pages including Login, Dashboard, User Page, and User Details Page. Each page interacts with a mock API to fetch data and utilizes local storage for persistent user data management.
https://github.com/vicolas11/lendsqr-fe-test
jest reactjs redux rest-api scss tailwindcss typescript
Last synced: 3 months ago
JSON representation
The Lendsqr Frontend Test project is a responsive dashboard application built using React, TypeScript, SCSS, and Tailwind CSS. It features several key pages including Login, Dashboard, User Page, and User Details Page. Each page interacts with a mock API to fetch data and utilizes local storage for persistent user data management.
- Host: GitHub
- URL: https://github.com/vicolas11/lendsqr-fe-test
- Owner: Vicolas11
- Created: 2024-06-16T06:06:37.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-23T23:20:03.000Z (about 2 years ago)
- Last Synced: 2025-03-15T03:43:13.428Z (over 1 year ago)
- Topics: jest, reactjs, redux, rest-api, scss, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://victor-akoh-lendsqr-fe-test.vercel.app
- Size: 944 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Table of Contents
- [Table of Contents](#table-of-contents)
- [Project Overview](#project-overview)
- [Features](#features)
- [Installation](#installation)
- [Tech Stack](#tech-stack)
- [Mock API](#mock-api)
- [Data Storage](#data-storage)
- [Authentication and Authorization](#authentication-and-authorization)
- [Unit Testing](#unit-testing)
- [Folder Structure](#folder-structure)
- [Deployment](#deployment)
- [Acknowledgments](#acknowledgments)
## Project Overview
This project is a responsive dashboard application built using React, TypeScript, and SCSS. It includes several pages such as Login, Dashboard, User Page, and User Details Page, each designed to interact with a mock API and local storage for user data management [read more](https://docs.google.com/document/d/1G3pKi4uwbgFA0kfJJJh_5u1paEuCCldFHBCN3iZOLgw/edit?usp=sharing). Here's a live [link](https://victor-akoh-lendsqr-fe-test.vercel.app/) to the application.
## Features
- **Login Page**: Allows users to authenticate.
- **Dashboard**: Displays summary data and statistics.
- **User Page**: Lists users with interactive features.
- **User Details Page**: Shows detailed information for each user with local storage persistence.
## Installation
To run this project locally, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/Vicolas11/lendsqr-fe-test.git
cd lendsqr-fe-test
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. Open http://localhost:5173 to view it in the browser.
## Tech Stack
- React: Frontend library for building user interfaces.
- TypeScript: Typed superset of JavaScript for improved developer productivity.
- SCSS: CSS preprocessor for styling components.
- Tailwind CSS: A utility-first CSS framework that provides low-level utility classes to build custom designs without writing traditional CSS.
- Jest: JavaScript testing framework.
## Mock API
The application fetches data for the user pages from a mock API containing 500 dummy records. However, handling large datasets efficiently is crucial for performance. In real-time applications, datasets often exceed tens of thousands of records, making it impractical to fetch them all at once.
To address this issue, I created a [server](https://github.com/Vicolas11/lendsqr-mockyapi-be) using Express.js. This server fetches data directly from [Mocky.io](https://run.mocky.io/v3/ad281a0d-05ad-4e4f-a527-26603b13e6a8) and returns it in smaller chunks based on the `pageSize` query parameter. By paginating the data (typically 9 items per page), we improve server performance and reduce the load on the client side.
The server is hosted on [render](https://api-lendsqrmocky.onrender.com/data?page=1&pageSize=9), ensuring reliable access and scalability for handling large datasets without compromising performance. This approach enhances the application's responsiveness and usability, aligning with best practices for managing extensive data in web applications.
## Data Storage
User details on the Dashboard and User Details Page are stored using the Redux Persist module, which utilizes local storage for data persistence. This data is accessed and managed through the Redux state management module, ensuring that user information remains available across components. This approach guarantees seamless user experience and data continuity, aligning with best practices in state management for web applications.
## Authentication and Authorization
The application implements authentication to restrict access to protected pages:
- **Authentication Flow:** Users must provide a valid email address and password on the Login page to access protected areas.
- **Authorization:** Upon successful login, users are redirected to the Dashboard page. Incorrect credentials display an error message on the Login page.
## Unit Testing
A unit test was conducted on the Login page to verify successful user login functionality. The test was executed using the Jest testing framework, which is integrated into the project for automated testing purposes.
The purpose of the unit test was to ensure that the login process functions correctly under different scenarios, including valid credentials, invalid credentials, and edge cases. The test focused on verifying the following aspects:
- **Successful Login:** Testing login with valid credentials should result in successful authentication and navigation to the Dashboard page.
- **Error Handling:** Testing login with invalid credentials should display an appropriate error message on the Login page without navigating away.
## Folder Structure
The project structure is organized as follows:
```php
lendsqr-fe-test/
├── public/ # favicon.svg file
├── src/ # Source files
│ ├── assets/ # Static assets (fonts, icons, images)
│ ├── components/ # Reusable UI components and styling
│ ├── config/ # Constant Config from .env
│ ├── data/ # Dashboard local data
│ ├── hooks/ # React custom hooks
│ ├── interfaces/ # Typescript interface
│ ├── layout/ # Dashboard layout
│ ├── pages/ # Application pages (Login, Dashboard, User, UserDetail)
│ ├── router/ # ReactDOM Router
│ ├── store/ # Redux State Management
│ ├── styles/ # Root SCSS stylesheets
│ ├── tests/ # Test Component Pages
│ └── utils/ # Utility functions
└── main.tsx # Root Project file
└── README.md # Project overview and instructions
```
## Deployment
The build output in the **dist** folder was deployed using [Vercel](https://victor-akoh-lendsqr-fe-test.vercel.app/):
```bash
npm run build
```
## Acknowledgments
- Inspired by [Mocky.io](http://mocky.io/)
- Inspired by [Vercel](https://vercel.com/)
- Inspired by [Render](https://render.com/)