Skip to content
/ scribo-notes-ai Public

Scribo is an AI-powered note-taking app that helps you write smarter with rich-text editing, AI summarization, grammar and tone tools, secure cloud storage, and a sleek, responsive interface.

scribo-frontend.vercel.app

License

MIT license
0 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

huzaifa-fullstack/scribo-notes-ai

BranchesTags

Repository files navigation

✍️ Scribo – AI-Powered Smart Notes Application

Scribo React TypeScript Node.js Express MongoDB Tailwind CSS Vite TipTap Zustand React Router Radix UI Zod JWT Passport Cloudinary Mailgun Axios Framer Motion React Hook Form Lucide Date-fns Sonner HTML5 CSS3 JavaScript Mocha Chai Vitest ESLint Helmet CORS SonarQube Sentry GitHub Actions CI/CD Pipeline Render Vercel MIT License Project Status

🌐 Live Demo: Coming Soon!

📋 Overview

Scribo is a modern, AI-powered smart notes application built with the MERN stack. It combines powerful rich-text editing, intelligent AI assistance, and secure cloud storage to deliver an exceptional note-taking experience for students, professionals, and anyone who values organized thinking.

Key highlights include:

  • Advanced Rich-Text Editor powered by TipTap with full formatting capabilities
  • AI-Powered Features for content enhancement, summarization, and smart suggestions
  • Secure Authentication with JWT, Google OAuth, and email verification
  • Cloud File Storage with Cloudinary integration for images and attachments
  • Smart Organization with tags, colors, pinning, and archiving
  • Export Capabilities to PDF and Markdown formats
  • Recycle Bin with automatic cleanup for deleted notes recovery
  • Dark Mode Support with smooth theme transitions
  • Responsive Design optimized for all devices
  • Comprehensive Testing with 105 test cases and SonarQube integration

🏗️ Features

✍️ Rich-Text Editor

  • Full Formatting Support - Bold, italic, underline, strikethrough
  • Text Styling - Headings, colors, highlights, alignment
  • Lists & Structure - Bullet points, numbered lists, blockquotes
  • Media Embedding - Images, links with preview
  • Code Blocks - Syntax highlighting for developers
  • Undo/Redo - Complete history management
  • Keyboard Shortcuts - Power user productivity

🤖 AI-Powered Features

  • Content Enhancement - Improve writing quality and clarity
  • Smart Summarization - Extract key points automatically
  • Tone Analysis - Professional, casual, or academic suggestions
  • Grammar & Style - Intelligent writing assistance
  • Auto-Completion - Context-aware suggestions
  • Content Organization - AI-suggested tags and categories

📊 Smart Organization

  • Color Coding - 9 vibrant colors for visual organization
  • Tag System - Categorize and filter notes efficiently
  • Pin Important Notes - Keep critical notes at the top
  • Archive System - Clean workspace without losing data
  • Search Functionality - Find notes instantly
  • Recycle Bin - 30-day recovery window with auto-cleanup

🔐 Authentication & Security

  • JWT-Based Authentication - Secure token-based sessions
  • Google OAuth Integration - One-click social login
  • Email Verification - Secure account activation
  • Password Reset - Email-based secure recovery
  • Rate Limiting - Protection against brute force attacks
  • Helmet.js Security - HTTP headers protection
  • CORS Configuration - Controlled cross-origin requests
  • Input Validation - Comprehensive data sanitization

☁️ Cloud Integration

  • Cloudinary Storage - Optimized image hosting
  • Automatic Optimization - Image compression and resizing
  • CDN Delivery - Fast global content delivery
  • Secure Upload - Authenticated file operations
  • Profile Pictures - Avatar management system

📤 Export & Sharing

  • PDF Export - Professional document generation
  • Markdown Export - Developer-friendly format
  • Bulk Export - Multiple notes at once
  • Email Sharing - Send notes via email
  • Print Support - Optimized for printing

📱 Modern UX/UI

  • Responsive Design - Mobile-first approach
  • Dark/Light Themes - Eye-friendly viewing options
  • Smooth Animations - Framer Motion powered
  • Toast Notifications - Non-intrusive user feedback
  • Loading States - Skeleton screens and spinners
  • Accessibility - WCAG 2.1 compliant
  • Radix UI Components - High-quality, accessible primitives

💻 Technologies Used

Frontend Framework

State Management & Forms

UI Components & Styling

Rich-Text Editor

  • TipTap 3.6.2 — Headless editor framework
    • Starter Kit - Essential editing features
    • Extensions - Color, Highlight, Image, Link, Placeholder, Text Style
  • @tiptap/react — React integration

Backend Framework

Authentication & Security

File Handling & Storage

Email & Communication

Utilities & Processing

Logging & Monitoring

Testing & Quality

Code Quality & Analysis

Development Tools

Web Technologies

DevOps & Deployment

🔄 CI/CD Pipeline

🚀 Automated Workflow

Our CI/CD pipeline ensures code quality, security, and reliable deployments:

Quality Checks ✅

Check Tool Description
Code Quality SonarCloud Security scanning and code smells
Linting ESLint Code style and best practices
Type Safety TypeScript Static type checking
Build Vite Production build verification
Testing Mocha/Vitest 105+ automated tests
Coverage NYC/V8 Code coverage reporting
Security npm audit Dependency vulnerability scan

Deployment Strategy 🌐

Branch Action Platform
main Production Deploy Render + Vercel
develop Quality Checks Only -
Pull Requests Preview + Quality Checks Vercel Preview

Pipeline Triggers 🔄

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main, develop]

Workflow Status 📊

┌─────────────────────────────────────────────────────────┐
│  ✅ Install Dependencies (Backend + Frontend)          │
│  ✅ Run Linting & Type Checks                          │
│  ✅ Execute Tests with Coverage                        │
│  ✅ Build Production Bundle                            │
│  ✅ SonarCloud Analysis                                │
│  ✅ Security Audit                                     │
│  🚀 Deploy Backend → Render                            │
│  🚀 Deploy Frontend → Vercel                           │
└─────────────────────────────────────────────────────────┘

📖 Production Deployment

This project is configured for deployment on Render (backend) and Vercel (frontend).

Quick Deploy Steps:

  1. Backend on Render: Connect GitHub repo → Set Root Directory: backend → Add environment variables → Deploy
  2. Frontend on Vercel: Connect GitHub repo → Set Root Directory: frontend → Add VITE_API_URL → Deploy

🚀 Getting Started

Prerequisites

  • Node.js 18+ installed
  • MongoDB 6+ installed and running
  • npm or yarn package manager
  • Cloudinary account (for file storage)
  • Mailgun account (for email services)
  • Google OAuth credentials (optional, for social login)

Installation

  1. Clone the repository
git clone https://github.com/huzaifa-fullstack/scribo-notes-ai.git
cd scribo-notes-ai
  1. Install Backend Dependencies
cd backend
npm install
  1. Install Frontend Dependencies
cd ../frontend
npm install
  1. Backend Environment Setup

Create .env file in the backend directory:

# Server Configuration
PORT=5000
NODE_ENV=development

# Database
MONGODB_URI=mongodb://localhost:27017/scribo-notes-db

# JWT Authentication
JWT_SECRET=your_super_secret_jwt_key_here
JWT_EXPIRE=7d

# Google OAuth
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_CALLBACK_URL=http://localhost:5000/api/auth/google/callback

# Cloudinary
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

# Email Service (Mailgun)
MAILGUN_API_KEY=your_mailgun_api_key
MAILGUN_DOMAIN=your_mailgun_domain
MAILGUN_FROM_EMAIL=noreply@yourdomain.com
MAILGUN_FROM_NAME=Scribo Notes

# Frontend URL (for CORS)
FRONTEND_URL=http://localhost:5173
CLIENT_URL=http://localhost:5173

# AI Features (HuggingFace)
HUGGINGFACE_API_KEY=hf_your_api_key_here

# Error Tracking (Optional)
SENTRY_DSN=your_sentry_dsn_here

# Rate Limiting
RATE_LIMIT_WINDOW_MS=900000
RATE_LIMIT_MAX_REQUESTS=100
  1. Frontend Environment Setup

Create .env file in the frontend directory:

VITE_API_URL=http://localhost:5000/api
VITE_SENTRY_DSN=your_sentry_dsn_here
  1. Database Setup

Initialize MongoDB database:

cd backend
npm run init-db
  1. Start Development Servers

Backend:

cd backend
npm run dev

Frontend:

cd frontend
npm run dev
  1. Open your browser
Frontend: http://localhost:5173
Backend API: http://localhost:5000
  1. Build for Production

Backend:

cd backend
npm start

Frontend:

cd frontend
npm run build
npm run preview

🔒 Security & Privacy

Authentication Security

  • JWT Tokens with secure signing and expiration
  • Password Hashing with bcrypt (10 salt rounds)
  • OAuth 2.0 integration for Google sign-in
  • Email Verification for account activation
  • Session Management with automatic token refresh

API Security

  • Helmet.js — Security headers protection
  • CORS — Controlled cross-origin requests
  • Rate Limiting — Brute force protection
  • Input Validation — Comprehensive sanitization
  • SQL Injection Protection — MongoDB parameterized queries
  • XSS Protection — Content sanitization

Data Protection

  • Encrypted Communication — HTTPS in production
  • Secure File Upload — Authenticated Cloudinary uploads
  • GDPR Compliant — User data privacy rights
  • Automatic Cleanup — Recycle bin 30-day deletion
  • Secure Password Reset — Time-limited tokens

Error Handling

  • Graceful Error Recovery — User-friendly messages
  • Comprehensive Logging — Pino structured logging
  • No Sensitive Data Leakage — Sanitized error responses
  • Database Error Handling — Mongoose validation

📊 Testing Strategy

Frontend Testing (Vitest)

  • Unit Tests — Component and utility testing
  • Integration Tests — Feature workflow testing
  • Coverage: 105 tests with ~60% code coverage

Test Categories:

  • Authentication flows
  • Note CRUD operations
  • Rich-text editor functionality
  • Form validation
  • Store management
  • API integration

Backend Testing (Mocha/Chai)

  • API Endpoint Tests — Request/response validation
  • Authentication Tests — JWT and OAuth flows
  • Database Tests — CRUD operations with in-memory MongoDB
  • Integration Tests — End-to-end feature testing
  • Coverage: Comprehensive test suite with NYC

Test Categories:

  • User authentication and authorization
  • Note management endpoints
  • File upload and processing
  • Email service integration
  • Error handling and validation
  • Middleware functionality

Quality Assurance

  • SonarQube Analysis — Code quality metrics
  • ESLint — Code style consistency
  • TypeScript — Type safety verification
  • Code Reviews — Manual quality checks

🔄 API Endpoints

Authentication

POST   /api/auth/register         - User registration
POST   /api/auth/login            - User login
POST   /api/auth/verify-email     - Email verification
POST   /api/auth/forgot-password  - Request password reset
POST   /api/auth/reset-password   - Reset password
GET    /api/auth/google           - Google OAuth login
GET    /api/auth/google/callback  - Google OAuth callback
GET    /api/auth/me               - Get current user
POST   /api/auth/logout           - User logout

Notes

GET    /api/notes                 - Get all user notes
GET    /api/notes/:id             - Get single note
POST   /api/notes                 - Create new note
PUT    /api/notes/:id             - Update note
DELETE /api/notes/:id             - Delete note (to recycle bin)
POST   /api/notes/:id/pin         - Toggle pin status
POST   /api/notes/:id/archive     - Toggle archive status
POST   /api/notes/:id/restore     - Restore from recycle bin
DELETE /api/notes/:id/permanent   - Permanent delete
GET    /api/notes/recycle-bin     - Get deleted notes

Export

POST   /api/export/pdf            - Export note to PDF
POST   /api/export/markdown       - Export note to Markdown
POST   /api/export/bulk           - Bulk export notes

Profile

GET    /api/profile               - Get user profile
PUT    /api/profile               - Update user profile
POST   /api/profile/avatar        - Upload profile picture
DELETE /api/profile/avatar        - Remove profile picture

AI Features

POST   /api/ai/enhance            - Enhance content
POST   /api/ai/summarize          - Summarize content
POST   /api/ai/suggest-tags       - Get tag suggestions
POST   /api/ai/grammar-check      - Check grammar

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Development Workflow

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Code Standards

  • TypeScript for frontend type safety
  • ESLint for code quality
  • Prettier for code formatting (if configured)
  • Conventional Commits for clear history
  • Unit Tests for new features
  • Documentation for complex logic

Testing Requirements

  • Write tests for new features
  • Maintain test coverage above 60%
  • Ensure all tests pass before PR
  • Add integration tests for workflows

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

✍️ Author

Muhammad Huzaifa Karim
GitHub Profile

🙏 Acknowledgments

  • TipTap for the excellent rich-text editor framework
  • Radix UI for accessible component primitives
  • Cloudinary for scalable cloud storage
  • Mailgun for reliable email delivery
  • MongoDB for flexible database solution
  • Vercel for deployment platform
  • SonarQube for code quality analysis

📬 Contact

For questions, feedback, or support:

🌟 Show Your Support

If you found this project helpful, please consider:

  • ⭐ Starring the repository
  • 🐛 Reporting bugs
  • 💡 Suggesting new features
  • 📢 Sharing with others
  • 🤝 Contributing to the codebase

© 2025 Muhammad Huzaifa Karim

About

Scribo is an AI-powered note-taking app that helps you write smarter with rich-text editing, AI summarization, grammar and tone tools, secure cloud storage, and a sleek, responsive interface.

scribo-frontend.vercel.app

Topics

react nodejs docker oauth jwt express typescript mocha mongodb sonarqube mailgun mern cloudinary tailwind-css vite tiptap framer-motion zustand radix-ui vitest

Resources

Readme

License

MIT license
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages