This is a Next.js project bootstrapped with create-next-app.

This project uses json-server to mock a backend API.

Data in the json for the server is from dummyjson.com but modified to fit the needs of this project. Most of the endpoints mirrors those in that documentation.

Getting Started

First, install the dependencies:

npm install
# or
yarn install
# or
pnpm install
# or
bun install

To start the full development environment (Next.js frontend + JSON Server backend), use:

npm run dev:full

Open http://localhost:3000 with your browser to see the result.

The JSON server is running on http://localhost:4000. Here you can see the API endpoints and test them.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

JSON Server Setup

This project uses json-server to mock a backend API.

Configuration

The server configuration files are located in the server/ directory:

• server/products.json: The database file containing the product data.
• server/middleware.js: Custom middleware for the server.

Scripts

The following scripts are available in package.json:

• npm run mock-server: Starts the json-server on port 4000.
• npm run dev:full: Runs both the Next.js development server and the json-server concurrently.

API Endpoints

The mock server (running on port 4000) provides the following endpoints:

Resources

• GET /products: Get all products
• GET /products/:id: Get a single product by ID
• GET /categories: Get all categories
• GET /categories/:id: Get a category by ID
• GET /categories?slug=:slug: Get a category by slug

Create Product

• POST /products: Create a new product

Required Fields:

• title: String
• price: Number
• description: String
• thumbnail: URL String
• categoryId: Number (ID of an existing category)
• brand: String

Auto-generated Fields:

• id: Sequential ID
• sku: Generated SKU (format: CAT-BRA-TIT-ID)
• meta: Creation and update timestamps

Pagination & Sorting (json-server 0.17.4)

See json-server documentation for more information.

Pagination

Use _page and _limit to paginate data:

• GET /products?_page=1&_limit=10 (First page, 10 items)
• GET /products?_page=2&_limit=10 (Second page, 10 items)

The response will include the Link header with first, prev, next, and last links. Our custom middleware also adds X-Total-Count header and wraps the response to include pagination metadata (total, limit, page, pages).

Sorting

Use _sort and _order to sort data:

• GET /products?_sort=price&_order=asc (Sort by price, ascending)
• GET /products?_sort=price&_order=desc (Sort by price, descending)
• GET /products?_sort=price,title&_order=desc,asc (Sort by multiple fields)

Filtering

• GET /products?price_gte=10&price_lte=50 (Price between 10 and 50)
• GET /products?q=mascara (Full-text search)

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.