Secure Notes Web App

A minimalist, secure notes application with client-side encryption, built with React, Redux (MVI pattern), and Node.js/Express.

Features

• Client-side encryption: Notes are encrypted using AES-GCM before being sent to the server
• Offline support: Full offline functionality with IndexedDB and automatic sync
• Minimalist design: Black and white UI with Arial font
• Mobile-first: Optimized for iPhone
• Secure authentication: JWT-based authentication with bcrypt password hashing

Tech Stack

Frontend

• React 18 + TypeScript
• Redux Toolkit (MVI pattern)
• Vite
• Vitest + React Testing Library
• IndexedDB (via idb)
• Service Worker

Backend

• Node.js + Express + TypeScript
• PostgreSQL + Prisma
• JWT authentication
• bcryptjs for password hashing

Development Setup

Prerequisites

• Node.js 18+
• PostgreSQL database
• npm or yarn

Frontend Setup

cd frontend
npm install
npm run dev

Backend Setup

1. Create a .env file in the backend directory:

DATABASE_URL="postgresql://user:password@localhost:5432/secure_notes?schema=public"
JWT_SECRET="your_jwt_secret_here"
PORT=3000

2. Run Prisma migrations:

cd backend
npm run prisma:generate
npm run prisma:migrate

3. Start the backend server:

npm run dev

Testing

Frontend Tests

cd frontend
npm test

Backend Tests

(Add test setup as needed)

Deployment

Frontend (Vercel)

1. Install Vercel CLI (if not already installed):

npm i -g vercel

2. Deploy:

cd frontend
vercel

3. Set environment variable:

vercel env add VITE_API_URL
# Enter your backend API URL

Backend (Railway)

1. Install Railway CLI (if not already installed):

npm i -g @railway/cli

2. Login to Railway:

railway login

3. Initialize and deploy:

cd backend
railway init
railway up

4. Set environment variables:

railway variables set DATABASE_URL="your-postgres-url"
railway variables set JWT_SECRET="your_jwt_secret_here"
railway variables set PORT=3000

5. Run database migrations:

railway run npm run prisma:migrate

Project Structure

secure-notes/
├── frontend/
│   ├── src/
│   │   ├── components/        # React components
│   │   ├── store/             # Redux store (MVI Model)
│   │   ├── intents/           # MVI Intent layer
│   │   ├── models/            # Type definitions
│   │   ├── views/             # MVI View layer
│   │   └── services/          # Encryption, API, offline
│   └── public/
│       └── sw.js             # Service Worker
├── backend/
│   ├── src/
│   │   ├── routes/           # API routes
│   │   ├── middleware/       # Auth middleware
│   │   └── server.ts
│   └── prisma/
│       └── schema.prisma
└── README.md

Security Notes

• Passwords are hashed on the backend using bcrypt
• Notes are encrypted client-side using Web Crypto API (AES-GCM)
• JWT tokens are used for authentication
• All API requests require authentication
• HTTPS should be used in production

License

ISC