Docs Editor

A full-stack document collaboration app built with React, TypeScript, Express, Prisma, and SQLite. Users can create, edit, import, share, and manage documents with authentication and document-level permissions.

Project Overview

Docs Editor is a lightweight document workspace for creating and managing text-based documents. It supports:

• user authentication
• document creation and editing
• markdown/text import
• document sharing between users
• owner and shared-user permissions
• responsive UI for dashboard and editor workflows

Features

• Sign up and sign in with JWT authentication
• Create new documents from the dashboard
• Edit document titles and content in a rich text editor
• Import .txt and .md files as new documents
• Share documents with other users
• Restrict delete/share actions to document owners
• Loading states, empty states, skeletons, and error feedback in the UI
• Centralized backend error handling with JSON responses

Tech Stack

Frontend

• React
• TypeScript
• Vite
• Tailwind CSS
• React Router
• Axios
• React Hook Form

Backend

• Node.js
• Express
• TypeScript
• Prisma ORM
• SQLite
• JWT
• Zod
• Multer

Folder Structure

docs-editor/
  client/
    src/
      components/
      contexts/
      lib/
      pages/
      styles/
  server/
    prisma/
      migrations/
    src/
      config/
      middleware/
      modules/
      routes/
      utils/

Installation

From the repository root:

npm install
npm --prefix client install
npm --prefix server install

Environment Variables

Create environment files before running the app.

Client

Create docs-editor/client/.env with:

VITE_API_BASE_URL=http://localhost:4000/api

Server

Create docs-editor/server/.env with:

NODE_ENV=development
PORT=4000
CLIENT_ORIGIN=http://localhost:5173
DATABASE_URL="file:./dev.db"
JWT_SECRET=replace-with-a-long-random-secret
JWT_EXPIRES_IN=7d

Run Locally

Start the frontend and backend in separate terminals:

cd docs-editor/client
npm run dev

cd docs-editor/server
npm run dev

The frontend will typically run at http://localhost:5173 and the API at http://localhost:4000.

Database Migration

Apply Prisma migrations:

cd docs-editor/server
npx prisma migrate dev

Generate Prisma client:

cd docs-editor/server
npx prisma generate

Seed Users

Seed the database with demo users:

cd docs-editor/server
npx prisma db seed

This creates sample accounts:

• alice@test.com / 123456
• bob@test.com / 123456

Deployment

Frontend (Vercel)

• Connect the client app in Vercel
• Set the build command to:

  npm run build

• Set the output directory to:

  dist
  

• Configure the environment variable:

  VITE_API_BASE_URL=https://your-backend-url.onrender.com/api

Backend (Render)

• Connect the server app in Render
• Use the following build command:

  npm install && npm run prisma:generate && npm run build

• Use the following start command:

  npm start

• Set environment variables:

  NODE_ENV=production
  PORT=10000
  CLIENT_ORIGIN=https://your-frontend-url.vercel.app
  DATABASE_URL=your-render-postgres-url
  JWT_SECRET=your-long-random-secret
  JWT_EXPIRES_IN=7d

Screenshots

Placeholder for screenshots:

• Dashboard view
• Document editor view
• Share dialog / permissions view

Notes

• The app uses a SQLite database for local development.
• For production deployments, switch to a managed database such as PostgreSQL.
• The server includes centralized error handling and document authorization middleware.