Building a Local Artisan Marketplace with Next.js 16, Prisma, and TailwindCSS

In this expanded guide, we will take a deeper dive into how to build a Local Artisan Marketplace — a complete full-stack project that allows artisans to display their unique handcrafted products and enables customers to browse, purchase, and track their orders easily. We’ll be using Next.js 16 (App Router) for both backend and frontend development, Prisma ORM for data management, JWT for secure authentication, and TailwindCSS for a modern, responsive design.

Creating a project like this from scratch gives developers a full-stack experience, showcasing how frontend and backend can work seamlessly together inside a single framework. However, explaining every component in one post can be quite a challenge. Therefore, we’ve also included a Google Drive link at the end of this article where you can find the full project code, copy it, and explore the entire setup hands-on on your own machine.

Project Overview

Features Implemented

✅ Backend (API Routes) — built with Next.js Route Handlers to create flexible server APIs.
✅ Database Layer — managed using Prisma ORM with SQLite (easily switchable to PostgreSQL or MySQL).
✅ Authentication System — developed with bcrypt for password hashing and JWT for generating secure access tokens.
✅ Frontend Application — created using the Next.js App Router, styled with TailwindCSS for a clean UI.
✅ CRUD Functionality — complete Create, Read, Update, and Delete operations for Users, Artisans, Products, and Orders.
✅ Role-based Access — supports different roles: Admin, Artisan, and Customer, each with distinct privileges.
✅ Buy Now Integration — enables instant product ordering and creates real-time order entries.

This architecture balances simplicity with scalability, making it an ideal foundation for larger production-grade applications.

Setting Up the Backend

We started the project setup by initializing Next.js and Prisma, laying down the groundwork for database and API management.

npx create-next-app@latest my-next-app
cd my-next-app
npm install prisma @prisma/client bcrypt jsonwebtoken
npx prisma init

npx create-next-app@latest my-next-app
cd my-next-app
npm install prisma @prisma/client bcrypt jsonwebtoken
npx prisma init

Then we defined models for User, Artisan, Product, and Order in prisma/schema.prisma, including relational mappings and enums for roles and order statuses.

After that, we migrated the database and seeded it with sample records:

npx prisma migrate dev --name init
npm run seed

npx prisma migrate dev --name init
npm run seed

This created a working local SQLite database containing test users, artisans, and products. Each of these entities is linked by relational IDs to ensure data consistency.

We also took advantage of Next.js Route Handlers (inside app/api/) to build structured API endpoints, keeping the backend modular and easy to maintain.

Authentication Logic

Authentication is implemented with bcrypt for hashing passwords and JWT for session control. When a user registers or logs in, the backend generates a signed JWT token, which is stored in the browser’s localStorage. That token is used to access protected routes such as order creation and product management.

Endpoints for authentication:

• POST /api/auth/register — register new users.
• POST /api/auth/login — log in existing users and return a JWT token.

This approach provides security and scalability while keeping the app stateless.

API Endpoints

Our backend includes several RESTful routes, each designed to handle specific business logic.

Each endpoint was secured and validated to ensure that unauthorized users cannot access sensitive data.

Building the Frontend with Next.js App Router

For the frontend, we designed user-friendly pages using the Next.js App Router with TailwindCSS. This allows both server-side rendering (SSR) and client interactivity.

Pages Overview

• Home Page: Introduces the marketplace.
• Login & Register: Allows users to authenticate and create accounts.
• Artisans Page: Displays artisan profiles with bios and locations.
• Products Page: Lists all products with descriptions, prices, and the new Buy Now button.
• Orders Page: Shows the logged-in customer’s order history.

We also created a lightweight API helper:

export async function apiFetch(path: string, options: any = {}) {
  const token = localStorage.getItem("token")
  const headers = {
    "Content-Type": "application/json",
    ...(token ? { Authorization: `Bearer ${token}` } : {})
  }
  const res = await fetch(`/api${path}`, { ...options, headers })
  if (!res.ok) throw new Error(`API Error: ${res.status}`)
  return res.json()
}

export async function apiFetch(path: string, options: any = {}) {
  const token = localStorage.getItem("token")
  const headers = {
    "Content-Type": "application/json",
    ...(token ? { Authorization: `Bearer ${token}` } : {})
  }
  const res = await fetch(`/api${path}`, { ...options, headers })
  if (!res.ok) throw new Error(`API Error: ${res.status}`)
  return res.json()
}

This function automatically attaches the token to every API call, simplifying authentication.

The “Buy Now” Feature

A key addition to this marketplace is the Buy Now button, which enables customers to place orders instantly. When clicked, it sends a POST /api/orders request containing product details and quantity. The backend verifies the JWT token, calculates the total cost, creates the order entry, and redirects the customer to the My Orders page.

This workflow ensures a smooth purchasing experience from browsing to checkout.

Tech Stack Summary

• Next.js 16 App Router — seamless combination of backend and frontend.
• Prisma ORM — intuitive database operations.
• TailwindCSS — clean and responsive design.
• JWT + bcrypt — secure authentication system.
• TypeScript — improved maintainability and reliability.

Each of these technologies complements the others, helping to create a powerful yet developer-friendly architecture.

Final Outcome

By the end of this project, we built a complete web application that enables:

• Artisans to create and manage their product listings.
• Customers to browse and order handcrafted goods.
• Secure authentication and data protection through JWT.

Potential upgrades include:

• Integrating payment gateways like Stripe or Razorpay.
• Enabling product image uploads via Cloudinary or AWS S3.
• Adding an admin dashboard for moderation and analytics.
• Implementing search and filtering functionality for easier navigation.

Access the Full Source Code

Since demonstrating every code snippet in a single article can become lengthy, we’ve made the entire source code available on Google Drive. You can easily clone it, explore each module, and test how everything works together.

👉 Click here to access the complete project and all code files

This link will take you to the full repository so you can copy, experiment, and truly enjoy building this marketplace project on your own.

Conclusion

With Next.js 16, building full-stack applications has never been simpler. By combining Prisma, TailwindCSS, and JWT authentication, developers can create robust, secure, and elegant marketplaces or eCommerce applications.

Our Local Artisan Marketplace project stands as a practical example of how creativity and technology can come together to support small businesses while giving developers valuable hands-on experience with modern tools.

Support local artisans — and celebrate full-stack innovation!