This project is a User Application built with a Node.js backend and a Next.js frontend. It allows you to manage and display a list of users with pagination. The application is designed to be scalable, efficient, and easy to maintain, making it suitable for both small and large-scale deployments.
- Features
- Architecture
- Tech Stack
- Prerequisites
- Setup
- Running the Application
- Pagination and Response Handling
- User Management: Add, display, and paginate through a list of users.
- Pagination: Efficiently fetch users in chunks to improve performance.
- Infinite Scrolling: Load more users as you scroll (frontend implementation).
- Database Seeding: Automatically seed the database with initial data from a file.
- RESTful API: Backend exposes a clean and well-documented API for user management.
The application follows a monolithic architecture, where the backend and frontend are tightly coupled but logically separated. This approach is ideal for small to medium-sized projects due to its simplicity and ease of deployment.
- Single Codebase: Both the backend and frontend are part of the same repository.
- Centralized Database: A single PostgreSQL database is used to store all user data.
- RESTful API: The backend exposes a REST API that the frontend consumes.
- Simplicity: Easy to develop, test, and deploy.
- Low Overhead: No need for complex microservices or distributed systems.
- Quick Iteration: Changes can be made and deployed rapidly.
While the application is monolithic, it is designed with scalability in mind:
- Pagination: Reduces the load on the database by fetching users in chunks.
- Efficient Queries: Uses Prisma’s
skip
andtake
parameters to optimize database queries. - Modular Code: The backend and frontend are logically separated, making it easy to scale or refactor individual components.
- Node.js: A fast and scalable runtime for building the backend.
- Express: A minimal and flexible web framework for Node.js.
- Prisma: A modern ORM for database management and querying.
- PostgreSQL: A powerful, open-source relational database.
- Next.js: A React framework for building server-rendered and static web applications.
- Tailwind CSS: A utility-first CSS framework for styling the frontend.
- Docker: For containerizing the PostgreSQL database.
- Makefile: For automating setup and deployment tasks.
- TypeScript: For type-safe development across the entire stack.
Before running the application, ensure you have the following installed:
- Node.js (v18 or higher)
- npm (Node Package Manager)
- Docker (for running the PostgreSQL database)
- Make (for running commands via the
Makefile
)
-
Create a
.env
file in the root of the project using the provided template:cp .env.template .env
-
Update the
.env
file with your PostgreSQL credentials -
Copy the same
.env
in the root ofBackend/source
dir.
# PostgreSQL credentials
POSTGRES_USER=******
POSTGRES_PASSWORD=******
POSTGRES_DB=******
# Prisma database URL
DATABASE_URL=postgresql://******:******@localhost:5432/******
If make
is not installed on your Linux/Unix system, install it using your package manager:
sudo apt install make
brew install make
Start the PostgreSQL database:
make up
Run the backend setup (install dependencies, generate Prisma client, run migrations, and seed the database):
make setup_backend
The backend will automatically start after the setup is complete.
The backend will run on http://localhost:3001.
Run the frontend setup (install dependencies and build the frontend):
make setup_frontend
The frontend will automatically start after the setup is complete.
The frontend will run on http://localhost:3000.
The backend supports pagination for fetching users. You can request users with the following query parameter:
- page: The page number (default: 1).
GET /users?page=1
{
"users": [
{
"id": 1,
"name": "JohnDoe",
"createdAt": "2023-10-30T12:34:56.789Z"
},
{
"id": 2,
"name": "JaneSmith",
"createdAt": "2023-10-30T12:35:10.123Z"
}
]
}
- Uses Prisma to query the database with pagination.
skip
andtake
parameters are used for pagination.skip
value is calculated as(page - 1) * take
, wheretake
is the number of users per page (default: 10).orderBy
parameter ensures users are returned in alphabetical order by name.
-
Calculate skip and take:
page
: The page number requested by the client (default: 1).take
: The number of users to return per page (fixed at 10).skip
: The number of users to skip, calculated as(page - 1) * take
.
For example:
- If
page = 1
, thenskip = 0
andtake = 10
. This returns the first 10 users. - If
page = 2
, thenskip = 10
andtake = 10
. This returns the next 10 users.
-
Query the Database:
- The
findMany
method is used to fetch users from the database. - The
skip
parameter ensures that the query skips the firstskip
users. - The
take
parameter limits the result to the nexttake
users. - The
orderBy
parameter ensures that users are returned in alphabetical order by name.
- The
- Uses infinite scrolling to load more users dynamically.
- The
page
state is incremented to fetch the next set of users.