NOTAKE

A Modern, Full-Stack Note-Taking Application

Pursuing the goal of creating a powerful, secure, and beautiful note-taking experience

---

📖 Project Overview

NOTAKE is a full-stack web application for creating, managing, and organizing notes. Built with modern technologies and best practices, it features a beautiful dark-themed UI, secure authentication, and seamless real-time data synchronization between frontend and backend.

✨ Current Features

✅ User Authentication

• Secure JWT-based authentication
• User registration with email validation
• Password encryption using BCrypt
• Token-based session management
• Auto-logout on token expiration

✅ Note Management

• Create, read, update, and delete notes
• Rich text content support
• Real-time search by title
• Timestamp tracking (created/updated)
• Responsive grid layout

✅ Modern UI/UX

• Beautiful dark gradient theme (Cyan & Purple accents)
• 3D card effects with smooth animations
• Fully responsive design (mobile-friendly)
• Loading states and error handling
• Modal-based note editing

✅ Security & Performance

• Protected routes and API endpoints
• CORS configuration
• Request/response interceptors
• Automatic error handling
• Database connection pooling

---

🎯 Project Status

Phase 1: Foundation ✅ COMPLETED

• Backend API with Spring Boot
• PostgreSQL database setup
• RESTful endpoints for notes CRUD
• JPA/Hibernate ORM integration
• Health check endpoints

Phase 2: Authentication ✅ COMPLETED

• JWT token generation and validation
• User registration and login
• Spring Security configuration
• Password encryption
• Token-based authorization

Phase 3: Frontend Integration ✅ COMPLETED

• React + TypeScript setup with Vite
• Beautiful authentication page (Login/Register)
• Dashboard with notes management
• API service layer with Axios
• Protected routing
• State management
• Error handling and validation

Phase 4: DevOps 🚧 IN PROGRESS

• Docker containerization
• Docker Compose multi-container setup
• Nginx configuration
• GitHub Actions CI/CD
• Production deployment
• Monitoring and logging

Phase 5: Enhancement 📋 PLANNED

• Note categories and tags
• Rich text editor (Markdown support)
• File attachments
• Note sharing and collaboration
• Export functionality (PDF, Markdown)
• User profile management
• Dark/Light theme toggle
• Real-time updates with WebSockets

---

🚀 Tech Stack

Backend

• Framework: Spring Boot 4.0.2
• Language: Java 21
• Database: PostgreSQL
• Security: Spring Security + JWT
• ORM: Hibernate/JPA
• Build Tool: Maven

Frontend

• Framework: React 19
• Language: TypeScript 5.9
• Build Tool: Vite 7.2
• HTTP Client: Axios
• Routing: React Router DOM 7
• Styling: Custom CSS (Dark Theme)

DevOps

• Containerization: Docker + Docker Compose
• Web Server: Nginx
• CI/CD: GitHub Actions
• Version Control: Git

---

� Getting Started

Prerequisites

• Java 21 or higher
• Node.js 20+ and npm
• PostgreSQL 15+
• Docker & Docker Compose (for containerized setup)
• Git

---

🐳 Quick Start with Docker (Recommended)

Prerequisites

• Docker and Docker Compose installed
• Ports 80, 8080, and 5432 available

Run the entire application:

docker-compose up -d

This will start:

• Frontend on http://localhost
• Backend API on http://localhost:8080
• PostgreSQL on localhost:5432

Check status:

docker-compose ps

View logs:

docker-compose logs -f

Stop everything:

docker-compose down

Stop and remove volumes (database data):

docker-compose down -v

---

🛠️ Manual Development Setup

Step 1: Database Setup

Start PostgreSQL:

# On WSL/Linux
sudo service postgresql start

# Verify it's running
sudo service postgresql status

Create database and user:

sudo -u postgres psql

Run these SQL commands:

CREATE USER notake_user WITH PASSWORD 'strongpassword';
CREATE DATABASE notake_db;
GRANT ALL PRIVILEGES ON DATABASE notake_db TO notake_user;
\c notake_db
GRANT ALL ON SCHEMA public TO notake_user;
GRANT ALL PRIVILEGES ON ALL TABLES IN SCHEMA public TO notake_user;
GRANT ALL PRIVILEGES ON ALL SEQUENCES IN SCHEMA public TO notake_user;
ALTER DEFAULT PRIVILEGES IN SCHEMA public GRANT ALL ON TABLES TO notake_user;
ALTER DEFAULT PRIVILEGES IN SCHEMA public GRANT ALL ON SEQUENCES TO notake_user;
\q

Verify connection:

psql -U notake_user -d notake_db -h localhost
# Password: strongpassword

---Authentication Endpoints

• POST /api/auth/register - Register new user
• POST /api/auth/login - Login user
• GET /api/auth/validate - Validate JWT token

Notes Endpoints (Require Authentication)

• GET /api/notes - Get all notes
• GET /api/notes/{id} - Get specific note
• POST /api/notes - Create new note
• PUT /api/notes/{id} - Update note
• DELETE /api/notes/{id} - Delete note
• GET /api/notes/search?keyword=x - Search notes by title
• GET /api/notes/count - Get total notes count

Health Check

• GET /api/health - Check API status

📚 For detailed API documentation, see: notake-frontend/API_ENDPOINTS.md ./mvnw spring-boot:run

On Windows

mvnw.cmd spring-boot:run

**Backend will start on:** http://localhost:8080

**Verify backend is running:**
```bash
curl http://localhost:8080/api/health
# Should return: {"status":"OK"}

---

Step 3: Frontend (React + Vite)

Navigate to frontend directory:

cd notake-frontend

Configure API URL: Edit .env file:

VITE_API_URL=http://localhost          # Spring Boot Backend
│   ├── src/main/java/com/example/notake_backend/
│   │   ├── config/                    # Security & CORS config
│   │   ├── controller/                # REST API controllers
│   │   │   ├── AuthController.java    # Authentication endpoints
│   │   │   ├── NoteController.java    # Notes CRUD endpoints
│   │   │   └── HealthCheckController.java
│   │   ├── dto/                       # Data Transfer Objects
│   │   ├── model/                     # JPA Entities (User, Note)
│   │   ├── repository/                # Spring Data JPA repositories
│   │   ├── security/                  # JWT utilities & filters
│   │   └── service/                   # Business logic services
│   ├── src/main/resources/
│   │   └── application.properties     # Database & JWT config
│   ├── Dockerfile
│   └── pom.x & Verification

### Test Backend Health
```bash
curl http://localhost:8080/api/health

Test User Registration

curl -X POST http://localhost:8080/api/auth/register \
  -H "Content-Type: application/json" \
  -d '{
    "username": "testuser",
    "email": "test@example.com",
    "password": "password123",
    "fullName": "Test User"
  }'

Test Login

curl -X POST http://localhost:8080/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{
    "username": "testuser",
    "password": "password123"
  }'

Create a Note (requires token)

curl -X POST http://localhost:8080/api/notes \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_JWT_TOKEN" \
  -d '{
    "title": "Test Note",
    "content": "This is a test note"
  }'

Verify Data in Database

psql -U notake_user -d notake_db -h localhost

\dt                          -- List tables
SELECT * FROM users;         -- View users
SELECT * FROM notes;         -- View notes

---

📚 Documentation

• API_ENDPOINTS.md - Complete API reference with examples
• INTEGRATION.md - Frontend-backend integration guide
• FRONTEND_INTEGRATION.md - Integration summary and status
• QUICKSTART.md - Quick reference for common tasks

---

🎨 Design Philosophy

NOTAKE features a modern, dark-themed interface inspired by contemporary design trends:

• Color Palette:

  • Background: Dark gradients (#0f172a → #1e293b)
  • Accents: Cyan (#06b6d4) and Purple (#667eea)
  • Text: Light gray shades for optimal readability

• UX Principles:

  • Minimal friction: Quick login/register with smooth transitions
  • Visual feedback: Loading states, hover effects, animations
  • Responsive: Works seamlessly on desktop, tablet, and mobile
  • Accessible: Clear contrast, readable fonts, intuitive navigation

---

🔒 Security Features

• Password Security: BCrypt hashing with salt
• JWT Authentication: Secure token-based sessions
• Protected Routes: Frontend route guards
• API Authorization: Bearer token validation on all protected endpoints
• CORS Configuration: Controlled cross-origin requests
• SQL Injection Prevention: JPA/Hibernate parameterized queries
• XSS Protection: React's built-in escaping

---

🚀 Deployment

Production Considerations

Backend:

• Update application.properties with production database credentials
• Set strong JWT secret key
• Configure CORS for production domain only
• Enable HTTPS
• Set up connection pooling
• Configure logging and monitoring

Frontend:

• Update .env with production API URL
• Build optimized production bundle: npm run build
• Deploy dist folder to static hosting (Netlify, Vercel, etc.)
• Configure environment-specific variables
• Enable HTTPS
• Set up CDN for assets

Database:

• Use managed PostgreSQL service (AWS RDS, DigitalOcean, etc.)
• Enable backups and point-in-time recovery
• Configure connection limits
• Set up monitoring and alerts
• Use strong passwords and connection encryption

---

🤝 Contributing

Contributions are welcome! Please follow these steps:

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

---

📋 Roadmap

Next Steps

• User profile management and settings
• Note categories and tags system
• Rich text editor with Markdown support
• File attachments (images, PDFs)
• Note sharing and collaboration
• Export functionality (PDF, Markdown, JSON)
• Note templates
• Bulk operations (delete multiple, move to category)
• Advanced search (full-text, filters)
• Real-time collaboration with WebSockets
• Mobile app (React Native)
• Desktop app (Electron)

---

📜 License

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

---

👏 Acknowledgments

• Spring Boot team for the excellent framework
• React team for the powerful UI library
• PostgreSQL community for the robust database
• All open-source contributors who made this possible

---

Built with ❤️ by the NOTAKE Team

Pursuing excellence in note-taking

⭐ Star this repo if you find it useful!

Step 4: Test the Application

1. Open browser: http://localhost:5173
2. Register a new user:
   • Switch to "Sign Up" tab
   • Enter: Full Name, Username, Email, Password
   • Click Submit
3. You'll be auto-logged in and redirected to Dashboard
4. Create notes, edit, delete, and search!

Verify data in database:

psql -U notake_user -d notake_db -h localhost

-- View registered users
SELECT id, username, email, full_name FROM users;

-- View created notes
SELECT id, title, LEFT(content, 50) as preview, created_at FROM notes;

---

📝 API Endpoints

Health Check

• GET /api/health/ping - Check if app is running
• GET /api/health/db - Test database connection

Notes CRUD

• GET /api/notes - Get all notes
• GET /api/notes/{id} - Get specific note
• POST /api/notes - Create new note
• PUT /api/notes/{id} - Update note
• DELETE /api/notes/{id} - Delete note
• GET /api/notes/search?keyword=x - Search notes
• GET /api/notes/count - Count total notes

---

🔧 Configuration

Backend Configuration

Edit notake-backend/src/main/resources/application.properties:

spring.datasource.url=jdbc:postgresql://localhost:5432/notake_db
spring.datasource.username=notake_user
spring.datasource.password=strongpassword

Frontend API URL

The Nginx configuration proxies /api/* requests to the backend automatically.

---

🔄 CI/CD

GitHub Actions automatically runs on push/PR to main or develop:

• ✅ Backend: Maven build, tests, Docker image
• ✅ Frontend: npm build, linting, Docker image

See .github/workflows/ci.yml for details.

---

📂 Project Structure

NOTAKE/
├── notake-backend/          # Spring Boot backend
│   ├── src/
│   ├── Dockerfile
│   └── pom.xml
├── notake-frontend/         # React + TypeScript frontend
│   ├── src/
│   ├── Dockerfile
│   ├── nginx.conf
│   └── package.json
├── docker-compose.yml       # Multi-container setup
└── .github/workflows/       # CI/CD pipelines

---

🧪 Testing

Test backend health:

curl http://localhost:8080/api/health/db

Create a note:

curl -X POST http://localhost:8080/api/notes \
  -H "Content-Type: application/json" \
  -d '{"title":"Test Note","content":"Hello World"}'

Get all notes:

curl http://localhost:8080/api/notes

---

📋 TODO

• Add authentication (JWT)
• Implement note categories/tags
• Add rich text editor
• Dark mode support
• Export notes (PDF, Markdown)

---

📄 License

MIT