Loan Application Seeder

This repository contains the Seeder Application, a web application developed to simplify and streamline the process of companies opting for loans. This application leverages a modern, modular, and scalable technology stack and adheres to best practices in front-end development.

Overview

• The Loan Application Seeder is designed to provide an intuitive and user-friendly interface for companies to initiate and manage their loan applications efficiently.
• This project is based on designs provided via Figma, ensuring pixel-perfect implementation that aligns with user experience (UX) and user interface (UI) best practices.

Technology Stack

Front-End Framework

• React.js: Used for building the component-based user interface, ensuring reusability and better performance.
• TypeScript: Adds static type-checking, enabling robust development with fewer runtime errors.

UI Framework

• Material UI (MUI): Provides pre-designed, customizable components to ensure a modern and consistent UI.

Design System

• Atomic Design Methodology: The application follows the atomic design principle, enabling the creation of a modular and maintainable component architecture.

Mock Server

• Mock Server Setup: Simulates API responses for seamless front-end development and testing without dependencies on a live back end.

Testing

• React Testing Library: Ensures components function as expected by focusing on behavior from the user's perspective.
• Jest: A robust JavaScript testing framework for unit tests and integration tests.

Documentation and Component Showcase

• Storybook: An interactive tool for developing and testing UI components in isolation, ensuring consistent implementation.

Images Of Application:

Sign Up Page:

Any new user might be ceo/company owners can opt for loans just by regestering and by applying for loans in our website.

Email Existence Validation

Password validation

Login Page:

Once after registering, any user has to login, for taking up loan and for repayments.

Cecking for user existence in mock server

Forgot Password Page:

To change the password if user has forgotten their password.

Reset Button enables only if email is correctly typed in Mock Server

If user does not exists in mock server then an error message is shown in ui

Reset Code Page

Home Page:

When User does not take any loan

When User takes a loan

Cash Acceleration Page:

From this page we can actually take a loan and if loan is already taken all the information about payments are shown here.

Edge Cases

New Cash Kick Page:

When user wants to take a loan then this page will help to opt for loans provided by different companies/persons/banks with different rates

Installation and Setup

• Clone the repository: git clone https://github.com/your-repo/loan-application-seeder.git
• Navigate to the project directory: cd loan-application-seeder
• Install dependencies: npm install
• Start the application: npm start
• Access the application at http://localhost:3000
• To run the tests, use the following commands: npm test
• To View Storybook: npm run storybook & Storybook will run on http://localhost:6006