Noted is a modern, premium card-based note-taking application designed for seamless digital organization. Built with a rich React frontend and a secure Node.js REST API backend, the platform supports custom checklists, sticker badges, dynamic color palettes, and calendar reminders.
| Layer | Technology | Key Service / Feature |
|---|---|---|
| Frontend | React 19, Vite, Tailwind CSS v4 | Hot Module Replacement (HMR), Lucide Icons |
| Backend | Node.js, Express | RESTful JSON API, MVC routing, Structured controllers |
| Database | Microsoft SQL Server (T-SQL) | Connection pooling, session state persistency |
| Authentication | Passport.js, Bcryptjs | Session-based authentication, Salted password hashes |
| Email/SMTP | Nodemailer, Brevo | Account confirmation emails, secure password resets |
| Security | Helmet, Express Rate Limit | XSS mitigation, secure cookies, brute-force throttling |
noteapp-main/
├── client/ # React Frontend Application (Vite dev server)
│ ├── public/ # Static assets (illustrations, avatars, favicon)
│ ├── src/
│ │ ├── components/ # Reusable UI widgets (NoteEditor, Sidebar, etc.)
│ │ ├── pages/ # Full-view layout routing (Login, ForgotPassword)
│ │ ├── App.jsx # App container and state management
│ │ └── main.jsx # App entry point
│ ├── package.json
│ └── vite.config.js # Dev server port & API proxy setup
└── server/ # Express Backend API Server
├── database/ # DB connection pools, migrations and cache stores
├── routes/ # Express API endpoints
├── services/ # Nodemailer integration
├── templates/ # Email transactional HTML templates
├── utils/ # Expiry token helpers
├── middleware.js # Authentication and authorization guards
├── app.js # Application entry, middleware stacks and server initialization
└── package.json
The application has been refined to follow industry-standard security checklist requirements:
- SQL Injection Protection: Fully parameterized queries for authorization checks and user note manipulation.
- Brute-Force & Abuse Mitigation: Throttling configured via
express-rate-limiton endpoints such as login, signup, password-reset, and email verification. - HTTP Header Security: Hardened headers set via
helmet(Disables content type sniffing, enforces XSS protection, restricts frame embedding). - Secure Sessions: Enforced
httpOnly,secure: true(requires HTTPS), andsameSite: 'none'(facilitates cross-origin cookies) configurations whenNODE_ENV=production. - No Data Leakage: Standard Express error handlers are overridden in production to return generic messages and keep raw stack traces or database details redacted from logs sent to client.
- Strict Validation: Registration validation checking syntax formatting on emails and password strength complexity.
Create a .env file in the server directory using the following keys:
# Database Credentials (MS SQL/Azure SQL Server)
HOST=your-azure-db.database.windows.net
USER=your_db_user
PASSWORD=your_db_password
DATABASE=Noted
DB_PORT=1433
# Application Port
PORT=3000
# Express Session Encryption Key
SESSION_SECRET=your_complex_session_secret_key
# Brevo SMTP Configuration
SMTP_SERVER=smtp-relay.brevo.com
BREVO_PORT=587
BREVO_LOGIN=your_brevo_smtp_login
BREVO_API_KEY=your_brevo_api_key
BREVO_FROM_EMAIL=noreply@yourdomain.com
# Client and Token Expirations
CLIENT_URL=http://localhost:5173
TOKEN_EXPIRY_HOURS=16Follow these steps to run both the frontend and backend in your local environment.
Make sure you have Microsoft SQL Server running. Run the following migrations inside the server/ directory to create the tables and alter email/token columns:
cd server
npm install
node database/migrate.js
node database/migrateEmailColumns.jsWith dependencies installed and migrations complete, start the Nodemon dev server:
npm run devThe server will boot up on http://localhost:3000.
Open a new terminal window, navigate to the client/ folder, install packages and start the Vite development server:
cd client
npm install
npm run devThe client will open up on http://localhost:5173. Vite is preconfigured to proxy all /api/* fetch requests directly to the backend port.
To build the client bundle for production deployment, run:
cd client
npm run buildThis generates a flat static directory inside client/dist/ ready to be served from any CDN or static hosting platform.