Skip to content

Latest commit

 

History

History
145 lines (105 loc) · 3.77 KB

README.md

File metadata and controls

145 lines (105 loc) · 3.77 KB

Lendsqr Frontend Engineer Assessment

Project Overview

This project is a frontend web application built as part of the Lendsqr Frontend Engineer Assessment. The application includes the following pages:

  • Login Page
  • Dashboard
  • User Page
  • User Details Page

The application is built using:

  • React (for the UI framework)
  • TypeScript (for type safety and maintainability)
  • Tailwind CSS (for styling and responsiveness)

Features Implemented

  • Pixel-perfect design following the provided Figma design.
  • Mock API with 500 records to fetch and display user data.
  • Local Storage/IndexedDB for storing and retrieving user details.
  • Mobile responsiveness to ensure a seamless experience across different screen sizes.
  • Unit testing to cover positive and negative test cases.

Installation & Setup

Prerequisites

Ensure you have the following installed:

  • Node.js (>= 14.x)
  • npm or yarn

Steps to Run Locally

  1. Clone the repository: 
    git clone https://github.com/your-username/lendsqr-fe-test.git
cd lendsqr-fe-test
  2. Install dependencies: 
    npm install  # or yarn install
  3. Start the development server: 
    npm run dev  # or yarn dev
  4. Open your browser and navigate to http://localhost:3000.

Deployment

The application has been deployed to Vercel and is accessible via the following URL:

Project Structure

├── src
│   ├── components   # Reusable components
│   ├── pages        # Application pages
│   └── App.tsx      # Main application entry point
├── public           # Public assets
├── tests            # Unit and integration tests
├── .eslintrc        # Linting configuration
├── .prettierrc      # Code formatting configuration
├── tsconfig.json    # TypeScript configuration
├── package.json     # Project dependencies and scripts
└── README.md        # Project documentation

Testing

This project includes unit tests to ensure functionality. Run the tests using:

npm test  # or yarn test

Code Snippets

Fetching Data from Mock API

import { useEffect, useState } from "react";

const fetchUsers = async () => {
  const response = await fetch("https://mock-api-url.com/users");
  return response.json();
};

const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers().then((data) => setUsers(data));
  }, []);

  return (
    <div>
      {users.map((user) => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
};

export default UserList;

Using Local Storage

const saveToLocalStorage = (key: string, data: any) => {
  localStorage.setItem(key, JSON.stringify(data));
};

const getFromLocalStorage = (key: string) => {
  const data = localStorage.getItem(key);
  return data ? JSON.parse(data) : null;
};

Decisions & Justifications

  • Tailwind CSS over SCSS: Tailwind CSS was chosen over SCSS for rapid development and easy utility-based styling.
  • React Query: Used for efficient data fetching and caching.
  • Vercel for deployment: Chosen for its seamless integration with React projects and quick deployments.

Resources

Submission Details

Contact

For any questions or clarifications, feel free to reach out via email at your-email@example.com.