https://github.com/jacceycode/lendsqr-fe-test
https://github.com/jacceycode/lendsqr-fe-test
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/jacceycode/lendsqr-fe-test
- Owner: JacceyCode
- Created: 2025-02-14T21:23:16.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-21T12:28:35.000Z (about 1 year ago)
- Last Synced: 2025-02-26T15:19:22.801Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://jacob-oluwasesan-adebayo-lendsqr-fe-test.vercel.app
- Size: 545 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Lendsqr Frontend Engineering Test
## Project Overview:
This project is a frontend engineering assessment for Lendsqr. The goal is to build a web application that includes a login page, a dashboard, a user listing page, and a user details page while adhering to the provided Figma design.
## Tech Stack
- Framework: Next.js
- Language: TypeScript
- Styling: SCSS, Shadcn
- Testing: Jest
- Mock API: mocky.io
## Features
- Authentication: Login functionality
- Dashboard: Overview of user data
- Navigation: An interactive navigation side bar.
- User Management:
- Fetch and display user records from a mock API (500 records).
- Store and retrieve user details using local storage.
- Responsive Design: Optimized for mobile and desktop views.
- Unit Testing: Various test cases.
- Pixel-Perfect UI: 100% match to the Figma design.
## Installation & Setup
### Prerequisites
Ensure you have the following installed:
- Node.js (LTS recommended)
- Yarn or npm
#### Clone the Repository
```bash
git clone https://github.com/JacceyCode/lendsqr-fe-test
cd lendsqr-fe-test
```
#### Install Dependencies
```bash
yarn install
# or
npm install --legacy-peer-deps
```
#### Run the Development Server
```bash
yarn dev
# or
npm run dev
```
Open http://localhost:3000 in your browser.
#### Run Tests
```bash
yarn test
# or
npm test
```
## Deployment
This project is deployed on `Vercel`. You can access it at:
https://yourname-lendsqr-fe-test.vercel.app
## Approach & Decisions
- Next.js: Used for optimized performance and SEO.
- TypeScript: Ensures type safety and better maintainability.
- Shadcn: Provides reusable and accessible UI components.
- SCSS: Enables modular and scalable styling.
- Mock API (mocky.io): Simulates user data for development and testing.
- LocalStorage: Efficient data storage for user details.
- Jest: Ensures high code quality through testing.
## Challenges & Solutions
- Ensuring Visual Fidelity: Carefully matched design elements to Figma specifications.
- Handling Large Data (500 Records): Optimized rendering and pagination for performance.
## Submission Details
- Live App: [https://jacob-oluwasesan-adebayo-lendsqr-fe-test.vercel.app](https://jacob-oluwasesan-adebayo-lendsqr-fe-test.vercel.app)
- GitHub Repo: [https://github.com/JacceyCode/lendsqr-fe-test](https://github.com/JacceyCode/lendsqr-fe-test)
- Documentation: [https://docs.google.com/document/d/1Jz7D8Lhb8dx3c5en3r4jTtoF2GZv955VrDEmZmgtrCM/edit?usp=sharing](https://docs.google.com/document/d/1Jz7D8Lhb8dx3c5en3r4jTtoF2GZv955VrDEmZmgtrCM/edit?usp=sharing)
- Video Review: [https://www.loom.com/share/e36825b1167044e989c0cc60626b91e2?sid=e250858d-c9c7-452a-a273-3200c4d45fb4](https://www.loom.com/share/e36825b1167044e989c0cc60626b91e2?sid=e250858d-c9c7-452a-a273-3200c4d45fb4)
## Contact
For any inquiries, feel free to reach out:
- Email: jacobadebayo.ja@gmail.com
- GitHub: JacceyCode
##
Note: This assessment was completed following all instructions and best practices outlined by Lendsqr.