A full-stack notes application built with React, Node.js, Express, MongoDB, and Docker. Features JWT authentication, OAuth integration (Google & VK), folder organization, and real-time note management.
- Authentication: JWT-based authentication with optional OAuth (Google & VK)
- Note Management: Create, edit, delete, and organize notes
- Folder Organization: Hierarchical folder structure for note organization
- Search & Tags: Tag-based categorization and search functionality
- Favorites: Mark notes as favorites for quick access
- Responsive Design: Modern, mobile-friendly interface
- Docker Support: Full containerization with Docker Compose
- Development Mode: Hot reload for both frontend and backend
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Frontend │ │ Nginx │ │ Backend │
│ (React) │◄───┤ (Reverse │◄───┤ (Node.js) │
│ Port: 3000 │ │ Proxy) │ │ Port: 5000 │
│ │ │ Port: 80 │ │ │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│
┌─────────────────┐
│ MongoDB │
│ Port: 27017 │
└─────────────────┘
- React 18 with Vite
- React Router for navigation
- Axios for API calls
- CSS3 with modern styling
- Node.js with Express
- MongoDB with Mongoose
- JWT for authentication
- Passport.js for OAuth strategies
- bcryptjs for password hashing
- Docker & Docker Compose
- Nginx reverse proxy
- MongoDB database
- Docker and Docker Compose
- Git
git clone <repository-url>
cd js-jwt-notesCreate a .env file in the root directory (optional for OAuth):
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
VK_CLIENT_ID=your_vk_client_id
VK_CLIENT_SECRET=your_vk_client_secret# Using Makefile (recommended)
make up
# Or using Docker Compose directly
docker compose up -d- Frontend: http://localhost:3000
- API: http://localhost/api
- Direct Backend: http://localhost:5000/api
# Start development environment with hot reload
make dev
# Or
docker compose -f docker-compose.dev.yml upmake up # Start production containers
make down # Stop all containers
make build # Build all images
make dev # Start development environment
make logs # View all logs
make clean # Clean up containers and volumes
make mongo-shell # Access MongoDB shell
make backend-logs # View backend logs only
make frontend-logs # View frontend logs onlyjs-jwt-notes/
├── backend/
│ ├── src/
│ │ ├── config/
│ │ │ └── passport.js # Authentication strategies
│ │ ├── models/
│ │ │ ├── User.js # User model
│ │ │ ├── Note.js # Note model
│ │ │ └── Folder.js # Folder model
│ │ ├── routes/
│ │ │ ├── auth.js # Authentication routes
│ │ │ ├── notes.js # Notes CRUD routes
│ │ │ └── folders.js # Folders CRUD routes
│ │ └── server.js # Express server setup
│ ├── Dockerfile # Production backend image
│ ├── Dockerfile.dev # Development backend image
│ └── package.json
├── frontend/
│ ├── src/
│ │ ├── components/ # React components
│ │ ├── pages/ # Page components
│ │ ├── contexts/ # React contexts
│ │ └── main.jsx # App entry point
│ ├── Dockerfile # Production frontend image
│ ├── Dockerfile.dev # Development frontend image
│ └── package.json
├── nginx/
│ └── nginx.conf # Nginx configuration
├── docker-compose.yml # Production setup
├── docker-compose.dev.yml # Development setup
├── Makefile # Convenient commands
└── README.md
POST /api/auth/register- User registrationPOST /api/auth/login- User loginGET /api/auth/verify- Verify JWT tokenGET /api/auth/google- Google OAuthGET /api/auth/vkontakte- VK OAuth
GET /api/notes- Get all user notesPOST /api/notes- Create new notePUT /api/notes/:id- Update noteDELETE /api/notes/:id- Delete noteGET /api/notes/folder/:folderId- Get notes by folder
GET /api/folders- Get all user foldersPOST /api/folders- Create new folderPUT /api/folders/:id- Update folderDELETE /api/folders/:id- Delete folderGET /api/folders/tree- Get folder tree structure
The application supports multiple authentication methods:
- JWT Authentication: Standard email/password login
- Google OAuth: Social login with Google (optional)
- VK OAuth: Social login with VKontakte (optional)
// Include token in API requests
fetch('/api/notes', {
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
}
})- Frontend: Nginx serving React build
- Backend: Node.js with PM2 (if needed)
- Database: MongoDB with persistent volumes
- Proxy: Nginx reverse proxy
- Frontend: Vite dev server with hot reload
- Backend: Node.js with nodemon for auto-restart
- Database: MongoDB with development volumes
NODE_ENV=production
PORT=5000
MONGODB_URI=mongodb://admin:password123@mongodb:27017/notes-app?authSource=admin
JWT_SECRET=your-super-secret-jwt-key-change-in-production
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
VK_CLIENT_ID=your_vk_client_id
VK_CLIENT_SECRET=your_vk_client_secret
CLIENT_URL=http://localhost:3000VITE_API_URL=http://localhost:5000- Set up environment variables
- Configure OAuth credentials (optional)
- Run
docker compose up -d - Access via http://localhost
- Run
make devordocker compose -f docker-compose.dev.yml up - Access frontend at http://localhost:3000
- API available at http://localhost:5000
- Port conflicts: Ensure ports 80, 3000, 5000, and 27017 are available
- OAuth errors: Set up OAuth credentials or the app will work without them
- Database connection: Check MongoDB container status
- Build failures: Ensure all dependencies are installed
# Check container status
docker compose ps
# View logs
make logs
# Restart specific service
docker compose restart backend
# Clean up everything
make cleanThis project is licensed under the MIT License.
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
For support and questions, please open an issue in the repository.
Happy Note-Taking! 📝✨