README

This project is a full-stack application built with Node.js, TypeScript, Express, React, and Vite. It is designed to provide a robust and scalable backend service for handling various data operations and a modern frontend for interacting with the data. The application fetches data from a remote endpoint and transforms it to handle filtering and pagination. It also includes a caching system to optimize performance.

Structure

The application is structured into two main parts:

Server

The server-side application is structured as follows:

• Controllers: These handle incoming HTTP requests and send responses. See IndexController and DataController.

• Services: These contain the business logic of the application. See DataService and CacheService.

• Routes: These define the application's endpoints. See IndexRoute and DataRoute.

• Middlewares: These handle error processing and other intermediate functions. See errorMiddleware.

• Models: These define the structure of the data. See DataModel and DataList.

Web

The client-side application is structured as follows:

• Components: These are the building blocks of the UI

• Containers: These manage the state and logic of the Paginated and filtered data table. See PaginatedTableContainer.

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Running the Application

Server

1. Navigate to the server directory:

   cd server

2. Install dependencies:

   npm install

3. Run the server in development mode (watches for any file changes):

   npm run dev

4. The server will be running at http://localhost:3000/ or http://localhost:3000/data.

5. To build and run the server from the dist directory:

   npm run start

To run tests:

1. After dependencies are installed, run tests:

   npm run test

2. Run tests watching for changes:

   npm run test:watch

Web

1. Navigate to the web directory:

   cd web

2. Install dependencies:

   npm install

3. Run the web application in development mode:

   npm run dev

4. The web application will be running at http://localhost:5173/.

5. To build the web application:

   npm run build

6. To preview the built web application:

   npm run preview

To run tests:

1. After dependencies are installed, run tests:

   npm run test

2. Run tests with coverage:

   npm run test:coverage

Design Decisions, Trade-offs, and Assumptions

Design Decisions

• The application uses TypeScript for type safety and better developer experience.
• Express is used for the backend to handle HTTP requests and responses.
• React is used for the frontend to build a dynamic and responsive user interface.
• Vite is used as the build tool for the frontend for faster development and build times.
• Axios is used for making HTTP requests from both the server and the client.
• A caching system is implemented on the server to optimize performance by reducing the number of requests to the remote endpoint.

Trade-offs

• Using TypeScript adds a learning curve for developers not familiar with it, but it provides better type safety and code quality.
• Implementing a caching system adds complexity to the server-side code but significantly improves performance.

Conclusion

This project provides a robust and scalable solution for handling data operations with a modern frontend for interacting with the data. By following the instructions above, you can set up and run the application locally for development and testing purposes.