https://github.com/huzaifa-fullstack/scribo-notes-ai
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.
https://github.com/huzaifa-fullstack/scribo-notes-ai
cloudinary docker express framer-motion jwt mailgun mern mocha mongodb nodejs oauth radix-ui react sonarqube tailwind-css tiptap typescript vite vitest zustand
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/huzaifa-fullstack/scribo-notes-ai
- Owner: huzaifa-fullstack
- License: mit
- Created: 2025-09-19T11:49:12.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2026-01-01T15:29:17.000Z (6 months ago)
- Last Synced: 2026-01-03T12:01:46.796Z (6 months ago)
- Topics: cloudinary, docker, express, framer-motion, jwt, mailgun, mern, mocha, mongodb, nodejs, oauth, radix-ui, react, sonarqube, tailwind-css, tiptap, typescript, vite, vitest, zustand
- Language: TypeScript
- Homepage: https://scribo-frontend.vercel.app
- Size: 910 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ✍️ Scribo – AI-Powered Smart Notes Application
🌐 **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**
- [**React 19.1.1**](https://reactjs.org/) — Modern UI library with concurrent features
- [**TypeScript 5.8.3**](https://www.typescriptlang.org/) — Type-safe JavaScript development
- [**Vite 7.1.7**](https://vitejs.dev/) — Lightning-fast build tool and dev server
- [**React Router 7.9.3**](https://reactrouter.com/) — Declarative routing for React
### **State Management & Forms**
- [**Zustand 5.0.8**](https://zustand-demo.pmnd.rs/) — Lightweight state management
- [**React Hook Form 7.63.0**](https://react-hook-form.com/) — Performant form validation
- [**Zod 4.1.11**](https://zod.dev/) — TypeScript-first schema validation
### **UI Components & Styling**
- [**Tailwind CSS 4.1.13**](https://tailwindcss.com/) — Utility-first CSS framework
- [**Radix UI**](https://www.radix-ui.com/) — Accessible component primitives
- Alert Dialog, Dialog, Dropdown Menu, Label, Radio Group, Slot, Switch, Tabs
- [**Framer Motion 12.23.22**](https://www.framer.com/motion/) — Production-ready animations
- [**Lucide React 0.544.0**](https://lucide.dev/) — Beautiful icon library
- [**Class Variance Authority**](https://cva.style/) — Component variant management
- [**clsx & tailwind-merge**](https://github.com/dcastil/tailwind-merge) — Intelligent class merging
- [**next-themes 0.4.6**](https://github.com/pacocoursey/next-themes) — Theme management
- [**Sonner 2.0.7**](https://sonner.emilkowal.ski/) — Toast notification system
### **Rich-Text Editor**
- [**TipTap 3.6.2**](https://tiptap.dev/) — Headless editor framework
- **Starter Kit** - Essential editing features
- **Extensions** - Color, Highlight, Image, Link, Placeholder, Text Style
- [**@tiptap/react**](https://tiptap.dev/installation/react) — React integration
### **Backend Framework**
- [**Node.js 22.x**](https://nodejs.org/) — JavaScript runtime
- [**Express 5.1.0**](https://expressjs.com/) — Fast, minimalist web framework
- [**MongoDB 6.20.0**](https://www.mongodb.com/) — NoSQL database
- [**Mongoose 8.18.1**](https://mongoosejs.com/) — MongoDB object modeling
### **Authentication & Security**
- [**JWT (jsonwebtoken 9.0.2)**](https://jwt.io/) — Token-based authentication
- [**Passport 0.7.0**](http://www.passportjs.org/) — Authentication middleware
- [**Passport Google OAuth 2.0**](http://www.passportjs.org/packages/passport-google-oauth20/) — Google sign-in
- [**bcryptjs 3.0.2**](https://github.com/dcodeIO/bcrypt.js) — Password hashing
- [**Helmet 8.1.0**](https://helmetjs.github.io/) — Security headers
- [**CORS 2.8.5**](https://github.com/expressjs/cors) — Cross-origin resource sharing
- [**Express Rate Limit 8.1.0**](https://github.com/express-rate-limit/express-rate-limit) — Rate limiting middleware
### **File Handling & Storage**
- [**Cloudinary 1.41.3**](https://cloudinary.com/) — Cloud image/video management
- [**Multer 2.0.2**](https://github.com/expressjs/multer) — File upload middleware
- [**Multer Cloudinary Storage**](https://github.com/affanshahid/multer-storage-cloudinary) — Cloudinary storage engine
### **Email & Communication**
- [**Mailgun.js 12.1.1**](https://github.com/mailgun/mailgun.js) — Email delivery service
- [**Nodemailer 7.0.10**](https://nodemailer.com/) — Email sending module
### **Utilities & Processing**
- [**Axios 1.12.2 / 1.13.2**](https://axios-http.com/) — HTTP client
- [**date-fns 4.1.0**](https://date-fns.org/) — Modern date utility
- [**marked 16.4.0**](https://marked.js.org/) — Markdown parser
- [**pdf-lib 1.17.1**](https://pdf-lib.js.org/) — PDF generation and manipulation
- [**html-pdf 3.0.1**](https://github.com/marcbachmann/node-html-pdf) — HTML to PDF converter
- [**form-data 4.0.4**](https://github.com/form-data/form-data) — Form data encoding
### **Logging & Monitoring**
- [**Pino 9.11.0**](https://getpino.io/) — High-performance logging
- [**Pino HTTP 10.5.0**](https://github.com/pinojs/pino-http) — HTTP request logging
- [**Pino Pretty 13.1.1**](https://github.com/pinojs/pino-pretty) — Log formatter
### **Testing & Quality**
- [**Vitest 3.2.4**](https://vitest.dev/) — Fast unit test framework (Frontend)
- [**@vitest/ui**](https://vitest.dev/guide/ui.html) — Test UI interface
- [**@vitest/coverage-v8**](https://vitest.dev/guide/coverage.html) — Code coverage
- [**Testing Library**](https://testing-library.com/) — React testing utilities
- **@testing-library/react 16.3.0**
- **@testing-library/jest-dom 6.9.1**
- **@testing-library/user-event 14.6.1**
- [**Mocha 11.7.4**](https://mochajs.org/) — Test framework (Backend)
- [**Chai 4.5.0**](https://www.chaijs.com/) — Assertion library
- [**Sinon 21.0.0**](https://sinonjs.org/) — Test spies, stubs, and mocks
- [**Supertest 7.1.4**](https://github.com/ladjs/supertest) — HTTP assertion library
- [**NYC 17.1.0**](https://istanbul.js.org/) — Code coverage tool
- [**MSW 2.11.3**](https://mswjs.io/) — API mocking library
- [**MongoDB Memory Server 10.2.1**](https://github.com/nodkz/mongodb-memory-server) — In-memory MongoDB
### **Code Quality & Analysis**
- [**SonarQube**](https://www.sonarqube.org/) — Code quality and security analysis
- [**ESLint 9.36.0**](https://eslint.org/) — JavaScript linter
- [**TypeScript ESLint 8.44.0**](https://typescript-eslint.io/) — TypeScript linting
- [**sonarqube-scanner 4.2.5**](https://github.com/bellingard/sonar-scanner-npm) — SonarQube integration
### **Development Tools**
- [**Nodemon 3.1.10**](https://nodemon.io/) — Auto-restart development server
- [**cross-env 10.1.0**](https://github.com/kentcdodds/cross-env) — Cross-platform env variables
- [**dotenv 17.2.2**](https://github.com/motdotla/dotenv) — Environment variable management
### **Web Technologies**
- [**HTML5**](https://developer.mozilla.org/en-US/docs/Web/HTML) — Semantic markup
- [**CSS3**](https://developer.mozilla.org/en-US/docs/Web/CSS) — Modern styling
- [**JavaScript ES2020+**](https://developer.mozilla.org/en-US/docs/Web/JavaScript) — Modern JavaScript features
### **DevOps & Deployment**
- [**GitHub Actions**](https://github.com/features/actions) — Automated CI/CD pipeline
- [**Render**](https://render.com/) — Backend hosting platform
- [**Vercel**](https://vercel.com/) — Frontend hosting platform
- [**Sentry**](https://sentry.io/) — Error tracking and monitoring
- [**SonarCloud**](https://sonarcloud.io/) — Cloud-based code analysis
- [**Docker Ready**](https://www.docker.com/) — Containerization support
---
## 🔄 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** 🔄
```yaml
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**
```bash
git clone https://github.com/huzaifa-fullstack/scribo-notes-ai.git
cd scribo-notes-ai
```
2. **Install Backend Dependencies**
```bash
cd backend
npm install
```
3. **Install Frontend Dependencies**
```bash
cd ../frontend
npm install
```
4. **Backend Environment Setup**
Create `.env` file in the `backend` directory:
```env
# 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
```
5. **Frontend Environment Setup**
Create `.env` file in the `frontend` directory:
```env
VITE_API_URL=http://localhost:5000/api
VITE_SENTRY_DSN=your_sentry_dsn_here
```
6. **Database Setup**
Initialize MongoDB database:
```bash
cd backend
npm run init-db
```
7. **Start Development Servers**
**Backend:**
```bash
cd backend
npm run dev
```
**Frontend:**
```bash
cd frontend
npm run dev
```
8. **Open your browser**
```
Frontend: http://localhost:5173
Backend API: http://localhost:5000
```
9. **Build for Production**
**Backend:**
```bash
cd backend
npm start
```
**Frontend:**
```bash
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](LICENSE) - see the [LICENSE](LICENSE) file for details.
---
## ✍️ Author
**Muhammad Huzaifa Karim**
[GitHub Profile](https://github.com/huzaifakarim1)
---
## 🙏 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:
- **GitHub Issues** - Report bugs or request features
- **Email** - karimhuzaifa590@gmail.com
---
## 🌟 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