📝 Note-Taking Application

A modern, full-stack note-taking application with authentication, real-time features, and beautiful UI

🚀 Live Demo • 📖 Documentation • 🐛 Report Bug • ✨ Request Feature

---

📑 Table of Contents

• ✨ Features
• 🚀 Technology Stack
• 📋 Prerequisites
• ⚙️ Installation
• 🏃‍♂️ Running the Application
• 📚 API Documentation
• 🏗️ Project Structure
• 🔄 Development Workflow
• 🧪 Testing
• 🚀 Deployment
• 🛡️ Security Considerations
• ⚡ Performance Optimization
• 🔧 Troubleshooting
• 👨‍💻 Developer
• 📝 License

---

A full-stack note-taking application built with React TypeScript frontend and Node.js TypeScript backend, featuring user authentication, Google OAuth, email verification, and CRUD operations for notes.

✨ Features

🔐 Authentication Email/Password Registration with OTP verification Google OAuth 2.0 authentication JWT-based authentication and authorization Email verification with OTP (One-Time Password) Secure password requirements and validation Rate limiting for security	📝 Notes Management Create, Read, Update, Delete notes Pin/Unpin notes for quick access Color coding for note organization Search functionality across notes Pagination for better performance Real-time updates
🎨 User Experience Responsive design - mobile-friendly Modern UI/UX design Error handling with user-friendly messages Loading states and feedback Form validation with real-time feedback	🛡️ Security & Performance Input validation on frontend and backend SQL injection protection XSS protection with Helmet CORS configuration Rate limiting and security headers Optimized database queries

🚀 Technology Stack

Frontend

Backend

Database & Tools

Frontend

• React 18 with TypeScript
• React Router for routing
• Styled Components for styling
• React Hook Form for form management
• Yup for validation
• Axios for API calls
• React Hot Toast for notifications

Backend

• Node.js with TypeScript
• Express.js framework
• MySQL database
• JWT for authentication
• Passport.js for Google OAuth
• Bcrypt for password hashing
• Nodemailer for email sending
• Joi for validation
• Helmet for security
• CORS for cross-origin requests

Prerequisites

Before running this application, make sure you have the following installed:

• Node.js (v16 or higher)
• npm or yarn
• MySQL (v8.0 or higher)
• Git

Installation

1. Clone the Repository

git clone https://github.com/SunnyKumar-Jonwal/Note-Taking-App.git
cd Note-Taking-App

2. Backend Setup

cd backend
npm install

Configure Environment Variables

Create a .env file in the backend directory:

# Environment Configuration
NODE_ENV=development
PORT=5000

# Database Configuration
DB_HOST=localhost
DB_PORT=3306
DB_USER=your_mysql_username
DB_PASSWORD=your_mysql_password
DB_NAME=note_taking_app

# JWT Configuration
JWT_SECRET=your_super_secret_jwt_key_here_change_in_production
JWT_EXPIRES_IN=7d

# Email Configuration (Gmail recommended)
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your_email@gmail.com
EMAIL_PASS=your_app_password

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

# Session Secret
SESSION_SECRET=your_session_secret_here

# Frontend URL
FRONTEND_URL=http://localhost:3000

Setup Database

1. Create a MySQL database:

CREATE DATABASE note_taking_app;

2. The application will automatically create the required tables on first run.

Setup Email (Gmail)

1. Enable 2-factor authentication on your Gmail account
2. Generate an App Password:
   • Go to Google Account settings
   • Security → 2-Step Verification → App passwords
   • Generate a password for "Mail"
   • Use this password in EMAIL_PASS

Setup Google OAuth

1. Go to Google Cloud Console
2. Create a new project or select existing one
3. Enable Google+ API
4. Create OAuth 2.0 credentials:
   • Application type: Web application
   • Authorized redirect URIs: http://localhost:5000/api/auth/google/callback
5. Copy Client ID and Client Secret to your .env file

3. Frontend Setup

```bash cd ../frontend npm install ```

Configure Environment Variables

Create a `.env` file in the frontend directory:

```env REACT_APP_API_URL=http://localhost:5000/api ```

Running the Application

1. Start the Backend

```bash cd backend npm run dev ```

The backend server will start on http://localhost:5000

2. Start the Frontend

```bash cd frontend npm start ```

The frontend application will start on http://localhost:3000

API Documentation

Authentication Endpoints

• `POST /api/auth/signup` - User registration
• `POST /api/auth/verify-otp` - Email verification
• `POST /api/auth/login` - User login
• `POST /api/auth/resend-otp` - Resend OTP
• `GET /api/auth/google` - Google OAuth login
• `POST /api/auth/logout` - User logout

Notes Endpoints

• `POST /api/notes` - Create a new note
• `GET /api/notes` - Get all notes (with pagination and search)
• `GET /api/notes/:id` - Get a specific note
• `PUT /api/notes/:id` - Update a note
• `DELETE /api/notes/:id` - Delete a note
• `PATCH /api/notes/:id/toggle-pin` - Toggle pin status

User Endpoints

• `GET /api/user/profile` - Get user profile
• `PUT /api/user/profile` - Update user profile

Project Structure

``` note-taking-app/ ├── backend/ │ ├── src/ │ │ ├── config/ │ │ │ ├── database.ts │ │ │ └── passport.ts │ │ ├── controllers/ │ │ │ ├── authController.ts │ │ │ ├── noteController.ts │ │ │ └── userController.ts │ │ ├── middleware/ │ │ │ ├── auth.ts │ │ │ ├── errorHandler.ts │ │ │ ├── rateLimiter.ts │ │ │ └── validation.ts │ │ ├── routes/ │ │ │ ├── auth.ts │ │ │ ├── notes.ts │ │ │ └── user.ts │ │ ├── types/ │ │ │ ├── auth.ts │ │ │ ├── note.ts │ │ │ └── user.ts │ │ ├── utils/ │ │ │ ├── email.ts │ │ │ ├── jwt.ts │ │ │ └── password.ts │ │ └── index.ts │ ├── package.json │ ├── tsconfig.json │ └── .env ├── frontend/ │ ├── src/ │ │ ├── components/ │ │ ├── pages/ │ │ ├── context/ │ │ ├── hooks/ │ │ ├── services/ │ │ ├── types/ │ │ ├── utils/ │ │ ├── App.tsx │ │ └── index.tsx │ ├── package.json │ ├── tsconfig.json │ └── .env └── README.md ```

Development Workflow

Git Workflow

1. Create feature branches from main
2. Commit changes with descriptive messages
3. Create pull requests for review
4. Merge to main after approval

Recommended Commit Messages

• `feat: add user authentication`
• `fix: resolve email validation issue`
• `docs: update API documentation`
• `style: improve note card design`
• `refactor: optimize database queries`

Testing

Backend Testing

```bash cd backend npm test ```

Frontend Testing

```bash cd frontend npm test ```

Deployment

Backend Deployment

1. Environment Setup:

   • Set NODE_ENV=production
   • Configure production database
   • Set secure JWT secrets
   • Configure production email settings

2. Build: ```bash npm run build ```

3. Deploy to your preferred platform:

   • Heroku
   • AWS EC2
   • Google Cloud Platform
   • DigitalOcean

Frontend Deployment

1. Build: ```bash npm run build ```

2. Deploy to your preferred platform:

   • Netlify
   • Vercel
   • AWS S3 + CloudFront
   • Firebase Hosting

Database Deployment

• Production MySQL: AWS RDS, Google Cloud SQL, or PlanetScale
• Ensure proper security: SSL connections, firewall rules
• Backup strategy: Regular automated backups

Security Considerations

• Password Security: Bcrypt with salt rounds
• JWT Security: Secure secret keys, proper expiration
• Rate Limiting: Prevent brute force attacks
• Input Validation: Server-side validation for all inputs
• CORS Configuration: Proper origin restrictions
• Helmet: Security headers
• Environment Variables: Never commit secrets to repository

Performance Optimization

• Database Indexing: Proper indexes on frequently queried columns
• Pagination: Limit data transfer
• Caching: Redis for session storage (recommended for production)
• Image Optimization: Compress and resize images
• Code Splitting: React lazy loading for routes

Troubleshooting

Common Issues

1. Database Connection Failed:

   • Check MySQL service is running
   • Verify database credentials
   • Ensure database exists

2. Email Not Sending:

   • Verify Gmail app password
   • Check email configuration
   • Ensure 2FA is enabled on Gmail

3. Google OAuth Not Working:

   • Verify OAuth credentials
   • Check redirect URI configuration
   • Ensure Google+ API is enabled

4. CORS Errors:

   • Check frontend URL in backend CORS configuration
   • Verify environment variables

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Commit your changes
6. Push to the branch
7. Create a Pull Request

Developer

SunnyKumar Jonwal - Full Stack Developer

Connect with me:

📈 GitHub Stats

License

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

Support

For support, email sunnyjonwal76@gmail.com or create an issue in the repository.