Table of Contents

Frontend

1. Environment Setup
2. Project Hierarchy
3. Code Examples
   • React Components
   • Server-Side
4. Frontend Environment Variables

Backend

1. Environment Setup
2. Project Hierarchy
3. How to Use Prisma ORM
   • Adding a Model to the Schema
   • Relating Models
   • Updating MongoDB w/ Schema Changes
   • Using Prisma Client (in code)
4. Endpoints
5. Backend Environment Variables

Frontend

Environment Setup Frontend

Run these commands

cd frontend
npm install
npm run dev

Create a .env file in the root directory with the following contents:

NEXT_PUBLIC_API_URL=http://localhost:9000/api

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

Project Hierarchy

App Router - Pages and Layouts hierarchy /src/app/

Components - All accessory components organized by page /src/components/**/*.{jsx,tsx}

Static - All static files /public/

Environment Variables - .env file for development /.env

Code Examples

React Components

"use client"  // Required at top of file in order to use client-side features like useState() or useEffect()

import { useState } from "react";

// Add props to interface like so...
interface Props {
    // ...add properties here 
    // i.e. 
    textField: string;
    numberField: number;
}

// Finally react function...
export function ComponentName({textField, numberField} : Props) {
    //...some code
    return <>{/* ...some html */}</>
}

Server-Side

// '/src/app/<route_path>/route.ts'

// ...GET/POST/UPDATE/DELETE functions
export async function GET(request: Request) {
    // ...server-side code
}

**NOTE: Always fetch using env variable! This will help when deploying in the future!

Backend

Environment Setup Backend

Run these commands

cd backend
npm install
npx prisma generate
npm run dev

Create a .env file in the root directory with the following contents:

PORT=9000
DATABASE_URL="mongodb+srv://ejinsw:Bokchoy1@cluster0.0ob8v.mongodb.net/Roominate?retryWrites=true&w=majority&appName=Cluster0"

This will start the server by default on http://localhost:9000.

Project Hierarchy

Server - Node.js Server /src/app.ts

Routes - All route handlers /src/routes/**/*.{js,ts}

Controllers - All controller handlers /src/controllers/**/*.{js,ts}

Typing - TypeScript Global interface /src/types/index.d.ts

Prisma - Prisma Schema /prisma/schema.prisma Prisma Client /src/config/prisma.ts

Environment Variables - .env file for development /.env

How to Use Prisma ORM

Prisma ORM provides

Adding a Model to the Schema

Models are Prisma's way of creating a MongoDB collection or a PostgreSQL table while using syntax similar to creating a JavaScript object.

Each one requires an id field which should be written exactly as shown.

model ModelName {
  id String @id @default(auto()) @map("_id") @db.ObjectId 
  //...additional fields
}

Other fields can be created the same way one might expect with the pattern being name Type <Options> and can be made optional with a ? placed directly after the name.

Relating Models

Relating models can be done as so...

model User {
  id           String   @id @default(auto()) @map("_id") @db.ObjectId

  posts     Post[] // One-to-many relation
}

model Post {
  id           String   @id @default(auto()) @map("_id") @db.ObjectId
    //...fields

  userId    String     @db.ObjectId // required parent id
  user      User       @relation(fields: [userId], references: [id], onDelete: Cascade) // reference to parent
}

Updating MongoDB w/ Schema Changes

After making changes to the schema, the DB will not be aligned. You must push changes using the Prisma CLI using the following terminal command:

npx prisma db push

Using Prisma Client (in code)

Prisma Client makes accessing collections and querying databases into a simple process of calling methods.

First import Prisma Client from /src/config/prisma.ts like so...

import { prisma } from "../config/prisma"; // path may vary based on location

Then call its methods like any other object!

Useful Methods

• Adding to a collection const newUser = await prisma.user.create({ data: { ...fields... }, });
• Retrieve all in a collection const allUsers = await prisma.user.findMany({ include: { ...fields... } })
• Retrieve a single entry const specificUser = await prisma.user.findUnique({ where { ...filter... } })
• Remove a single entry await prisma.user.delete({ where: { ...filter... } })
• Update an entry await prisma.user.delete({ where: { ...filter... }, data: { ...updated fields... } })