Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/aj1732/osezele-ejemen-iboi-lendsqr-fe-test

indexeddb mocky nextjs reactjs scss

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/aj1732/osezele-ejemen-iboi-lendsqr-fe-test
Owner: AJ1732
Created: 2024-11-03T21:46:17.000Z (2 months ago)
Default Branch: main
Last Pushed: 2024-11-10T17:07:34.000Z (about 2 months ago)
Last Synced: 2024-11-10T18:19:19.437Z (about 2 months ago)
Topics: indexeddb, mocky, nextjs, reactjs, scss
Language: TypeScript
Homepage: https://osezele-ejemen-iboi-lendsqr-fe-test.netlify.app/
Size: 2.21 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Lendsqr Admin Console - Frontend Assessment

This repository contains the frontend implementation of the Lendsqr Admin Console, developed as part of the Lendsqr job assessment. The project aims to mirror the provided Figma design with a focus on pixel-perfect rendering, responsive design, code quality, and performance.

## Table of Contents
- [Project Overview](#project-overview)
- [Tech Stack](#tech-stack)
- [Features](#features)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Running the Project](#running-the-project)
- [Project Structure](#project-structure)
- [Design and Architecture](#design-and-architecture)

---

## Project Overview

The Lendsqr Admin Console is built with a focus on:
- **Visual Fidelity**: Pixel-perfect and responsive UI that mirrors the provided Figma design.
- **Code Quality**: Well-structured code adhering to React best practices.
- **Component Reusability**: Modular components following the atomic design principle.
- **Scalability**: Using state management and organized directory structure to support growth.

## Tech Stack

- **Framework**: Next.js
- **Language**: TypeScript
- **Styling**: SCSS Modules
- **State Management**: Context API
- **HTTP Client**: Axios

## Features

- **Responsive Design**: Works seamlessly across desktop, tablet, and mobile.
- **Global State Management**: ContextAPI is used to manage global states efficiently.
- **Reusable Components**: Follows atomic design principles to create scalable and reusable components.
- **API Integration**: Axios for handling API calls with efficient data handling.

## Getting Started

### Prerequisites

Make sure you have the following installed on your system:
- [Node.js](https://nodejs.org/) (version 16+)
- [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)

### Installation

1. **Clone the repository**:
```bash
git clone https://github.com/AJ1732/osezele-ejemen-iboi-lendsqr-fe-test.git
cd osezele-ejemen-iboi-lendsqr-fe-test
```

2. **Install dependencies**:
```bash
npm install
# or
yarn install
```

### Running the Project

To start the development server:
```bash
npm run dev
# or
yarn dev
```

The app will be available at `http://localhost:3000`.

## Project Structure

## Design and Architecture

The app follows **React design patterns** for scalability and maintainability:
- **Atomic Design**: Components are broken down into smaller, reusable parts.
- **Compound Components**: Used for flexible component customization.
- **Provider Pattern**: Encapsulates context API state management in a central context provider.
- **Custom Hooks**: Encapsulates reusable logic in `/utils`.

```

### Example Test Scenarios
- **Component Rendering**: Tests to check if components render correctly.
- **API Calls**: Mocked API calls for both success and failure cases.
- **UI Behavior**: Positive and negative test cases for user interactions.