📝 EasyNote - Modern Note-Taking Application

Beautiful, modern note-taking interface with color-coded notes

Responsive design with elegant hover effects and smooth animations

EasyNote is a full-stack note-taking application built with modern web technologies. It features a beautiful, responsive UI with color-coded notes, secure authentication, and real-time email notifications for password resets.

✨ Features

🔐 Authentication & Security

• User Registration & Login - Secure JWT-based authentication
• Password Reset - Email-based OTP verification system
• Session Management - Persistent login with localStorage
• Protected Routes - Secure access to dashboard and notes

📝 Note Management

• Create Notes - Rich note creation with title and description
• Color Coding - Customizable colors for note organization
• Edit & Update - In-place editing with real-time updates
• Delete Notes - Safe deletion with confirmation modal
• View Details - Full-screen note viewing modal

🎨 Modern UI/UX

• Responsive Design - Works perfectly on desktop, tablet, and mobile
• Beautiful Animations - Smooth hover effects and transitions
• Color Themes - Dynamic color schemes for each note
• Glass Morphism - Modern glassmorphic design elements
• Gradient Backgrounds - Eye-catching gradient backgrounds

📧 Email Integration

• EmailJS Integration - Send OTP codes via email
• Password Reset Flow - Complete forgot password workflow
• OTP Verification - Secure 6-digit OTP system
• Email Templates - Professional email templates

🛠️ Tech Stack

Backend (Ruby on Rails)

• Rails 7.0.8 - Modern Ruby web framework
• MongoDB + Mongoid - NoSQL database with ODM
• Devise - Authentication framework
• JWT - JSON Web Token authentication
• Rack-CORS - Cross-origin resource sharing
• Mail - Email functionality
• ROTP - OTP generation and verification

Frontend (React)

• React 19.1.1 - Latest React with hooks
• Vite - Fast build tool and dev server
• Tailwind CSS 4.1.14 - Utility-first CSS framework
• React Router 7.9.4 - Client-side routing
• Axios - HTTP client for API calls
• EmailJS - Email service integration

Database & Storage

• MongoDB - Document-based NoSQL database
• MongoDB Atlas - Cloud database hosting
• Mongoid - Ruby ODM for MongoDB

Deployment

• Frontend: Vercel
• Backend: Render
• Database: MongoDB Atlas

🚀 Quick Start

Prerequisites

• Ruby 3.3.4+
• Node.js 18+
• MongoDB (local or Atlas)
• Git

Installation

1. Clone the repository

   git clone <repository-url>
   cd EasyNote

2. Install backend dependencies

   cd backend
   bundle install

3. Install frontend dependencies

   cd ../frontend
   npm install
   cd ..

4. Configure MongoDB

   • Install MongoDB locally or use MongoDB Atlas
   • Update backend/config/mongoid.yml if needed

5. Start development servers

   ./start_servers.sh

   Or start manually:

   Backend (Terminal 1):

   cd backend
   bundle exec rails server -p 5000

   Frontend (Terminal 2):

   cd frontend
   npm run dev

Access Points

• Frontend: http://localhost:5172
• Backend API: http://localhost:5000
• Health Check: http://localhost:5000/health

📱 Application Flow

Authentication Flow

1. Home Page → Landing page with app introduction
2. Register → Create new account with email/password
3. Login → Sign in with existing credentials
4. Dashboard → Main notes interface (protected route)

Password Reset Flow

1. Forgot Password → Enter email address
2. OTP Verification → Enter 6-digit code from email
3. Reset Password → Set new password
4. Login → Sign in with new credentials

Note Management Flow

1. Create Note → Click "Add New Note" button
2. Fill Details → Enter title, description, and choose color
3. Save Note → Note appears in dashboard grid
4. Edit Note → Click edit button, modify content
5. View Note → Click card to view full details
6. Delete Note → Click delete button with confirmation

🔧 API Endpoints

Authentication

POST   /api/v1/users                    # Register new user
POST   /api/v1/users/sign_in            # Login user
DELETE /api/v1/users/sign_out           # Logout user

Password Reset

POST   /api/v1/users/password_reset     # Send OTP email
POST   /api/v1/users/verify_otp         # Verify OTP code
PATCH  /api/v1/users/reset_password     # Reset password

Notes

GET    /api/v1/notes                    # Get all user notes
GET    /api/v1/notes/:id                # Get specific note
POST   /api/v1/notes                    # Create new note
PATCH  /api/v1/notes/:id                # Update note
DELETE /api/v1/notes/:id                # Delete note

Health Check

GET    /health                          # API health status

📁 Project Structure

EasyNote/
├── backend/                           # Rails API backend
│   ├── app/
│   │   ├── controllers/api/v1/        # API controllers
│   │   │   ├── notes_controller.rb    # Notes CRUD operations
│   │   │   └── users/                 # User authentication
│   │   ├── models/                    # Data models
│   │   │   ├── user.rb                # User model with Devise
│   │   │   └── note.rb                # Note model
│   │   ├── serializers/               # JSON serializers
│   │   └── mailers/                   # Email functionality
│   ├── config/
│   │   ├── mongoid.yml                # MongoDB configuration
│   │   ├── routes.rb                  # API routes
│   │   └── initializers/             # CORS, Devise config
│   ├── Gemfile                        # Ruby dependencies
│   └── render.yaml                    # Render deployment config
├── frontend/                          # React frontend
│   ├── src/
│   │   ├── components/                # React components
│   │   │   ├── Dashboard.jsx          # Main notes interface
│   │   │   ├── NoteCard.jsx           # Individual note display
│   │   │   ├── NoteForm.jsx           # Create/edit note form
│   │   │   ├── Login.jsx              # Login component
│   │   │   ├── Register.jsx           # Registration component
│   │   │   ├── ForgotPassword.jsx     # Password reset flow
│   │   │   ├── VerifyOTP.jsx          # OTP verification
│   │   │   └── ResetPassword.jsx      # New password form
│   │   ├── services/                  # API service layer
│   │   │   └── api.js                 # Axios configuration
│   │   ├── config/                    # Configuration files
│   │   │   └── emailjs.js             # EmailJS setup
│   │   └── utils/                     # Utility functions
│   ├── package.json                   # Node dependencies
│   └── vite.config.js                 # Vite configuration
├── Screenshots/                       # Application screenshots
│   ├── Screenshot_01.png              # Dashboard view
│   └── Screenshot_02.png              # Features showcase
├── start_servers.sh                   # Development startup script
├── DEPLOYMENT.md                      # Deployment guide
└── README.md                          # This file

🌐 Deployment

Production Deployment

The application is configured for easy deployment:

• Frontend: Deploy to Vercel
• Backend: Deploy to Render
• Database: MongoDB Atlas

Quick Deployment Steps

1. Prepare MongoDB Atlas

   • Create cluster and database
   • Get connection string

2. Deploy Backend to Render

   # Use render.yaml configuration
   # Set environment variables:
   # - MONGODB_URI
   # - ALLOWED_ORIGINS

3. Deploy Frontend to Vercel

   # Set environment variable:
   # - VITE_API_BASE_URL

4. Configure EmailJS

   • Set up Gmail service
   • Create OTP template
   • Update configuration

For detailed deployment instructions, see DEPLOYMENT.md.

🔧 Configuration

Environment Variables

Backend (Render):

RAILS_ENV=production
MONGODB_URI=mongodb+srv://...
ALLOWED_ORIGINS=https://your-app.vercel.app
SECRET_KEY_BASE=...
JWT_SECRET=...

Frontend (Vercel):

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

EmailJS Setup

1. Create EmailJS account at emailjs.com
2. Set up Gmail service
3. Create OTP email template
4. Update frontend/src/config/emailjs.js with your credentials

For complete EmailJS setup, see COMPLETE_EMAILJS_SETUP.md.

🎨 UI/UX Features

Design System

• Color Palette: Dynamic colors for note organization
• Typography: Clean, readable fonts with proper hierarchy
• Spacing: Consistent padding and margins
• Shadows: Subtle depth with layered shadows
• Animations: Smooth transitions and hover effects

Responsive Design

• Mobile First: Optimized for mobile devices
• Tablet Friendly: Perfect layout for tablets
• Desktop Enhanced: Rich experience on large screens
• Touch Friendly: Large touch targets for mobile

Accessibility

• Keyboard Navigation: Full keyboard support
• Screen Reader: Semantic HTML structure
• Color Contrast: High contrast ratios
• Focus States: Clear focus indicators

🔒 Security Features

Authentication Security

• JWT Tokens: Secure token-based authentication
• Password Hashing: Devise handles secure password storage
• Session Management: Secure session handling
• CORS Protection: Configured cross-origin policies

Data Security

• Input Validation: Server-side validation for all inputs
• SQL Injection Protection: Mongoid ODM prevents injection
• XSS Protection: React's built-in XSS protection
• HTTPS: Secure communication in production

🚀 Performance Features

Frontend Optimization

• Vite Build: Fast build times and hot reloading
• Code Splitting: Automatic code splitting with React Router
• Image Optimization: Optimized images and assets
• Caching: Browser caching for static assets

Backend Optimization

• MongoDB Indexing: Optimized database queries
• Connection Pooling: Efficient database connections
• Caching: Rails caching for better performance
• Compression: Gzip compression for API responses

🧪 Development

Development Tools

• Hot Reloading: Instant updates during development
• ESLint: Code linting and formatting
• Debug Tools: Rails console and React DevTools
• API Testing: Built-in health check endpoint

Testing

• Manual Testing: Comprehensive manual testing flow
• API Testing: Test all endpoints with curl/Postman
• Browser Testing: Cross-browser compatibility
• Mobile Testing: Responsive design testing

📊 Monitoring & Analytics

Built-in Monitoring

• Health Checks: API health monitoring
• Error Tracking: Automatic error logging
• Performance Metrics: Built-in performance monitoring
• User Analytics: Basic usage analytics

External Services

• Vercel Analytics: Frontend performance metrics
• Render Monitoring: Backend performance and uptime
• MongoDB Atlas: Database performance monitoring

🤝 Contributing

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Make your changes
4. Test thoroughly
5. Commit your changes

   git commit -m 'Add amazing feature'

6. Push to the branch

   git push origin feature/amazing-feature

7. Open a Pull Request

📄 License

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

👨‍💻 Author

Shiba Prasad

• GitHub: @theshibaprasad
• Email: Contact via GitHub

🙏 Acknowledgments

• Rails Community - For the amazing Ruby on Rails framework
• React Team - For the powerful React library
• Tailwind CSS - For the beautiful utility-first CSS framework
• MongoDB - For the flexible NoSQL database
• EmailJS - For easy email integration
• Vercel & Render - For excellent deployment platforms

---

Made with ❤️ by Shiba Prasad

⭐ Star this repository if you found it helpful!