Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed on your system:
  • Node.js >= 18.x
  • npm or bun (recommended) as package manager
  • PostgreSQL database
  • Git for version control
While npm is supported, Noteverse is optimized for Bun. Some features may work best with Bun as the package manager.

​
Clone the repository

Start by cloning the Noteverse repository to your local machine: 
git clone https://github.com/your-username/noteverse-frontend.git
cd noteverse-frontend

​
Install dependencies

Install the required packages using your preferred package manager: 
npm install
The postinstall script will automatically run prisma generate after dependencies are installed.

​
Environment configuration

Create a .env.local file in the root directory with the following environment variables:
.env.local
# API Configuration
NEXT_PUBLIC_API_URL=your_api_url
NEXT_PUBLIC_SOCKET_URL=your_socket_url
NEXT_PUBLIC_UPLOAD_URL=your_upload_url

# Authentication
NEXTAUTH_URL=your_auth_url
NEXTAUTH_SECRET=your_auth_secret

# Database
DATABASE_URL=postgresql://user:password@localhost:5432/noteverse

​
Variable descriptions

The base URL for your API endpoints. In development, this is typically http://localhost:3000/api.
The URL for Socket.IO real-time connections. Must be accessible from the client browser.
The endpoint URL for file uploads, typically using Vercel Blob storage.
The canonical URL of your site for NextAuth.js. In development: http://localhost:3000.
A random string used to encrypt JWT tokens. Generate one with: openssl rand -base64 32
PostgreSQL connection string in the format: postgresql://USER:PASSWORD@HOST:PORT/DATABASE
For Google OAuth, you’ll also need to configure GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET in your environment variables.

​
Database setup

Noteverse uses Prisma ORM with PostgreSQL. Follow these steps to set up your database:

​
Database schema overview

The application uses the following key models:
schema.prisma
// User model with authentication
model User {
  id                Int            @id @default(autoincrement())
  email             String         @unique
  username          String         
  password          String         
  authToken         String?       
  emailVerified     Boolean        @default(false) 
  verificationToken String?
  
  notes           Note[]         @relation("Owner")
  comments        Comment[]
  likedNotes      Note[]         @relation("LikesOnNotes")
  favoriteNotes   Note[]         @relation("FavoritesOnNotes")
}

// Note model with visibility and collaboration
model Note {
  id          Int       @id @default(autoincrement())
  title       String
  description String?
  data        String?
  thumbnail   String?
  views       Int       @default(0)
  visibility  Visibility @default(Private)
  
  owner       User       @relation("Owner", fields: [ownerId], references: [id])
  tags        Tag[]      @relation("TagsOnNotes")
  comments    Comment[]  @relation("CommentsOnNote")
  likes       User[]     @relation("LikesOnNotes")
  favorites   User[]     @relation("FavoritesOnNotes")
}

​
Run migrations

Apply the database schema to your PostgreSQL instance: 
npx prisma migrate dev

​
Generate Prisma Client

Generate the Prisma Client for type-safe database access: 
npx prisma generate
This command runs automatically during npm install via the postinstall script.

​
Seed the database (optional)

Populate your database with sample data: 
npm run seed

​
Development server

Start the development server with real-time Socket.IO support: 
npm run dev
The application will be available at http://localhost:3000.
The dev script runs node server.mjs which includes both the Next.js server and Socket.IO for real-time features.

​
Build for production

Create an optimized production build: 
npm run build

​
Start production server

Run the production server: 
npm start

​
Deployment

​
Vercel deployment

Noteverse is optimized for deployment on Vercel:
  1. Push your code to GitHub
  2. Import the repository in Vercel
  3. Configure environment variables in Vercel dashboard
  4. Deploy
The vercel-build script handles Prisma generation and migrations:
package.json
{
  "scripts": {
    "vercel-build": "prisma generate && prisma migrate deploy && next build"
  }
}
Ensure your DATABASE_URL points to a production PostgreSQL instance, not your local database.

​
Available scripts

​
dev
command
Starts the development server with Socket.IO support
​
build
command
Creates an optimized production build
​
start
command
Starts the production server
​
postinstall
command
Automatically generates Prisma Client after installing dependencies
​
vercel-build
command
Prepares the application for Vercel deployment with database migrations
​
seed
command
Seeds the database with sample data

​
Technology stack

​
Core technologies

  • Next.js 14: React framework with App Router
  • TypeScript: Type-safe development
  • Prisma: Database ORM with type safety
  • PostgreSQL: Relational database

​
UI and styling

  • Tailwind CSS: Utility-first CSS framework
  • Radix UI: Unstyled, accessible component primitives
  • Ant Design: Enterprise-grade component library
  • Lucide React: Beautiful icon library
  • Framer Motion: Production-ready animations

​
Features and integrations

  • Novel.sh: Notion-style WYSIWYG editor built on TipTap
  • Socket.IO: Real-time bidirectional communication
  • NextAuth.js: Authentication for Next.js
  • Vercel Blob: Edge-compatible blob storage
  • React Hook Form + Zod: Form management and validation

​
Troubleshooting

If you encounter Prisma Client errors, try regenerating the client:
npx prisma generate
Then restart your development server.
Verify your DATABASE_URL in .env.local is correct and your PostgreSQL server is running:
npx prisma db push
Ensure NEXT_PUBLIC_SOCKET_URL is set correctly and accessible from the client. Check browser console for connection errors.
Clear your package manager cache and reinstall:
rm -rf node_modules package-lock.json
npm install

​
Next steps

Quickstart guide

Learn how to create your first note and start collaborating

API reference

Explore the available API endpoints

Database schema

Deep dive into the Prisma schema and relationships

Contributing

Learn how to contribute to Noteverse

Build docs developers (and LLMs) love

Get started for freeTalk to us