webguru11124/olimp-warehouse-test

Transaction Management Application

This application is a simple transaction management system built with Nest.js for the backend and React for the frontend. It allows users to create, view, and manage transactions between different individuals.

Overview

The application consists of two main parts:

1. Backend: Built with Nest.js, it provides RESTful API endpoints for managing transactions, pagination, error handling, and database operations.

2. Frontend: Developed with React, it offers a user-friendly interface for interacting with the transaction data. It utilizes React Query for data fetching and caching, Material-UI for styling components, and React Hook Form for form management.

Setup Instructions

Backend

1. Clone the repository:

   git clone https://github.com/your-username/transaction-management.git

2. Navigate to the backend directory:

   cd transaction-management/backend

3. Install dependencies:

   npm install

4. Set up the database configuration by creating a .env file in the backend directory and providing the necessary environment variables.

5. Run the application:

   npm run start:dev

6. Access the API endpoints at http://localhost:3000.

Frontend

1. Navigate to the frontend directory:

   cd transaction-management/frontend

2. Install dependencies:

   npm install

3. Run the application:

   npm start

4. Access the application in your browser at http://localhost:5173.

Design Choices

• Transaction Entity and Repository: Utilized to model and manage transaction data in the database.
• Pagination: Implemented pagination for fetching transactions in batches to improve performance and reduce network load.
• REST API: Designed RESTful API endpoints for CRUD operations on transactions.
• Controllers: Created controllers to handle incoming HTTP requests and delegate business logic to the service layer.
• React Query Cache: Utilized React Query's caching mechanism for efficient data fetching and management on the frontend.
• Infinite Query: Implemented infinite query for loading transactions with pagination as the user scrolls, providing a seamless user experience.
• Interval Query Polling: Used interval query polling to automatically fetch updated transaction data at regular intervals.
• React Hook Form and Dynamic Array: Leveraged React Hook Form for managing form state and dynamic array fields for adding multiple transactions.
• Suspense for Data Fetching: Employed React Suspense for handling asynchronous data fetching and rendering loading states.
• Error Handling: Implemented error boundaries on the frontend to gracefully handle and display errors to users.
• Material-UI Styling: Applied Material-UI components and styling for a modern and consistent UI design.