📓 NotebookApp - Full Stack Application

A modern, responsive note-taking application built with React and Node.js, featuring Google authentication, real-time sync, and enhanced privacy controls.

Features

• Google Authentication - Secure login with Firebase Auth
• Rich Note Management - Create, edit, delete, and organize notes
• Image Support - Upload and attach images to notes
• Privacy Controls - Toggle notes between public and private
• Pin Important Notes - Keep important notes at the top
• Search & Filter - Find notes quickly with search and filters
• Fully Responsive - Beautiful UI on all devices
• Real-time Updates - Instant synchronization

Tech Stack

Frontend

• React 19 with Vite
• TailwindCSS v4 for styling
• Firebase Auth for authentication
• React Router for navigation
• Framer Motion for animations

Backend

• Node.js with Express
• MongoDB Atlas (Cloud MongoDB)
• Firebase Admin for authentication
• Cloudinary for image storage
• JWT for session management

Docker Deployment

Quick Start (Development)

1. Clone the repository

   git clone <repository-url>
   cd notebook

2. Configure environment variables

   cp .env.example .env

   Edit .env with your actual values:

   # Backend
   MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/notebook
   JWT_SECRET=your-super-secret-jwt-key
   FRONTEND_URL=http://localhost:3000
   FIREBASE_PROJECT_ID=your-firebase-project-id
   CLOUDINARY_CLOUD_NAME=your-cloudinary-cloud-name
   CLOUDINARY_API_KEY=your-cloudinary-api-key
   CLOUDINARY_API_SECRET=your-cloudinary-api-secret
   
   # Frontend
   VITE_FIREBASE_API_KEY=your-firebase-api-key
   VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
   VITE_FIREBASE_PROJECT_ID=your-firebase-project-id
   VITE_FIREBASE_STORAGE_BUCKET=your-project.firebasestorage.app
   VITE_FIREBASE_MESSAGING_SENDER_ID=your-sender-id
   VITE_FIREBASE_APP_ID=your-app-id
   VITE_API_URL=http://localhost:5000/api

3. Start with Docker Compose

   docker-compose up -d

   This will start:

   • Backend API on port 5000
   • Frontend on port 3000
   • Uses your MongoDB Atlas database

4. Access the application

   • Frontend: http://localhost:3000
   • Backend API: http://localhost:5000

Production Deployment

1. Create production environment file

   cp .env.example .env

2. Update with production values

   # Backend
   MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/notebook
   JWT_SECRET=your-super-secret-jwt-key-production
   FRONTEND_URL=https://your-domain.com
   FIREBASE_PROJECT_ID=your-firebase-project-id
   CLOUDINARY_CLOUD_NAME=your-cloudinary-cloud-name
   CLOUDINARY_API_KEY=your-cloudinary-api-key
   CLOUDINARY_API_SECRET=your-cloudinary-api-secret
   
   # Frontend
   VITE_FIREBASE_API_KEY=your-firebase-api-key
   VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
   VITE_FIREBASE_PROJECT_ID=your-firebase-project-id
   VITE_FIREBASE_STORAGE_BUCKET=your-project.firebasestorage.app
   VITE_FIREBASE_MESSAGING_SENDER_ID=your-sender-id
   VITE_FIREBASE_APP_ID=your-app-id
   VITE_API_URL=https://your-api-domain.com/api

3. Deploy with production compose

   docker-compose -f docker-compose.prod.yml up -d

Cloud Deployment Options

1. Render.com

Backend Deployment:

1. Connect your GitHub repository
2. Create a new Web Service
3. Set build command: docker build -t backend ./backend
4. Set start command: docker run -p $PORT:5000 backend

Frontend Deployment:

1. Create a new Static Site
2. Set build command: npm run build
3. Set publish directory: dist

2. DigitalOcean App Platform

1. Create new app from GitHub repository
2. Configure services:
   • Backend: Docker container with health check
   • Frontend: Static site with build command
3. Set environment variables in DigitalOcean dashboard

3. Railway

1. Connect GitHub repository
2. Deploy both services separately
3. Configure environment variables in Railway dashboard
4. Set up custom domains

Configuration

Required Services

1. MongoDB Atlas (Cloud)

   • Create cluster at https://cloud.mongodb.com
   • Get connection string
   • Keep credentials secure!

2. Firebase Project

   • Enable Authentication with Google provider
   • Get project configuration
   • Keep API keys secure!

3. Cloudinary Account

   • For image upload and storage
   • Get API credentials
   • Keep API secrets secure!

Project Structure

notebook/
├── backend/                 # Node.js API server
│   ├── models/             # Mongoose models
│   ├── routes/             # Express routes
│   ├── middleware/         # Custom middleware
│   ├── config/             # Configuration files
│   ├── Dockerfile          # Backend Docker image
│   └── package.json
├── frontend/               # React application
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── pages/          # Page components
│   │   ├── contexts/       # React contexts
│   │   ├── services/       # API services
│   │   └── hooks/          # Custom hooks
│   ├── public/             # Static assets
│   ├── Dockerfile          # Frontend Docker image
│   ├── nginx.conf          # Nginx configuration
│   └── package.json
├── docker-compose.yml      # Development setup
├── docker-compose.prod.yml # Production setup
├── .env.example           # Template for environment variables
├── .gitignore             # Git ignore rules (includes .env)
└── README.md

Performance

• Code splitting with React Router
• Image optimization with Cloudinary
• Gzip compression in production
• Static asset caching
• Lazy loading of components

---

Built with ❤️ by fardinkai