Next.js 13, Express.js, Prisma, PostgreSQL – A Full-Stack Car Repair Service App Project

In this tutorial, we will be creating a Full-Stack Car Repair Service App using Next.js 13, Express.js, Prisma, and PostgreSQL. This app will allow users to schedule appointments for car repairs at a service center. We will be covering the setup of the backend server using Express.js and Prisma with a PostgreSQL database, as well as the frontend using Next.js.

Step 1: Setting up the Backend Server

To start, make sure you have Node.js installed on your machine. Create a new directory for your project and navigate to it in your terminal.

Run the following command to initialize a new Node.js project:

npm init -y

Install the necessary dependencies for the backend server:

npm install express @prisma/client pg

Create a new file called server.js and add the following code to set up an Express server with Prisma and PostgreSQL:

const express = require('express');
const { PrismaClient } = require('@prisma/client');

const prisma = new PrismaClient();
const app = express();
const PORT = process.env.PORT || 3001;

app.use(express.json());

// Define routes here

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Step 2: Setting up Prisma with PostgreSQL

Before moving forward with setting up the routes, let’s set up Prisma with PostgreSQL for our database.

Run the following command to initialize a new Prisma project:

npx prisma init

This will create a prisma directory with configuration files. Update the schema.prisma file with the following code to define your data model:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

Update the DATABASE_URL in the .env file with your PostgreSQL connection string.

Run the following command to generate Prisma client:

npx prisma generate

Step 3: Creating Database Tables and Migrations

Next, let’s create a new migration to create the necessary tables for our application.

Run the following command to create a new migration:

npx prisma migrate dev --name init

This will create a new migration file in the prisma/migrations/ directory. Update the migration file with the necessary schema changes.

Run the migration to apply the changes to the database:

npx prisma migrate deploy

Step 4: Setting up Routes in the Express Server

Now that we have set up Prisma with our database, let’s define the routes for our API in the Express server.

Here’s an example route to get all appointments:

app.get('/appointments', async (req, res) => {
  const appointments = await prisma.appointment.findMany();
  res.json(appointments);
});

Step 5: Setting up the Frontend with Next.js

To create the frontend for our application, we will be using Next.js. First, install Next.js and other necessary dependencies by running the following command:

npx create-next-app@13 car-repair-service-app

Navigate to the car-repair-service-app directory and start the development server:

cd car-repair-service-app
npm run dev

Step 6: Creating Components and Pages

Create new components and pages in the pages and components directories to build the frontend of your application. You can use React components to display data from the API endpoints.

Step 7: Fetching Data from the API

To fetch data from the API endpoints in the backend server, you can use the fetch API or a library like axios. Here’s an example of fetching appointments in a Next.js page:

import React, { useEffect, useState } from 'react';

const AppointmentsPage = () => {
  const [appointments, setAppointments] = useState([]);

  useEffect(() => {
    fetch('/api/appointments')
      .then(response => response.json())
      .then(data => setAppointments(data));
  }, []);

  return (
    <div>
      {appointments.map(appointment => (
        <div key={appointment.id}>
          <p>{appointment.date}</p>
          <p>{appointment.service}</p>
          <p>{appointment.status}</p>
        </div>
      ))}
    </div>
  );
};

export default AppointmentsPage;

Step 8: Final Steps

Congratulations! You have successfully set up a Full-Stack Car Repair Service App using Next.js 13, Express.js, Prisma, and PostgreSQL. You can now continue building out the features of your application, such as user authentication, appointment scheduling, and more.

Remember to regularly test your application and handle any errors that may occur during development. Feel free to customize and expand upon this project to suit your needs and requirements. Good luck!