I recently built and deployed a Secure Notes Application from scratch to understand how a real-world full-stack app is designed, secured, and deployed end-to-end.
This project was not just about CRUD functionality — I wanted to go deeper into authentication, authorization, security best practices, and deployment of all layers of a production-style application.
What I Built
The application is a full-stack secure notes platform where users can:
- Register and log in securely
- Create, update, delete, and manage personal notes
- Log in using JWT-based authentication
- Use OAuth2 login with GitHub/Google
- Enable Multi-Factor Authentication (2FA/MFA)
- Reset passwords via email flow
- Access role-based features using Spring Security
- Track note changes using audit logs
Tech Stack
Backend
- Java + Spring Boot
- Spring Security 6
- JWT Authentication
- OAuth2 Login
- Role-Based Authorization
- MFA / 2FA
- Password Reset via Email
- REST APIs
Frontend
- React.js
- Axios
- React Router
- Context API
- Tailwind CSS
Database + Deployment
- MySQL
- Frontend deployed on Vercel
- Backend deployed on Render
- MySQL database deployed on Railway
Key Features Implemented
1) Secure Authentication with JWT
I implemented JWT-based authentication so the application can remain stateless and secure.
After successful login, the backend generates a JWT token, which the frontend stores and sends with protected API requests.
This helped me understand:
- token-based authentication flow
- custom JWT filters in Spring Security
- protected routes and secured API access
2) Role-Based Authorization with Spring Security
I added role-based access control
For example:
- normal users can manage their own notes
- admin users can access admin-specific functionality
This gave me hands-on experience with:
- custom user model
- roles and authorities
3) OAuth2 Login with GitHub / Google
I integrated OAuth2 login to support third-party authentication.
After successful OAuth login, I connected it with my existing JWT flow so the user can still use the application with the same token-based auth system.
This was one of the most interesting parts because it combined:
- OAuth2 client configuration
- custom success handlers
- user creation / lookup in DB
- JWT generation after OAuth login
4) Multi-Factor Authentication (MFA / 2FA)
To make the app more security-focused, I implemented 2FA using a TOTP-based flow.
The flow includes:
- generating a secret
- showing a QR code
- verifying the OTP
- enabling 2FA for the user
- asking for verification during login when 2FA is enabled
This helped me understand how real applications add an additional security layer beyond passwords.
5) Password Reset Flow
I added a forgot password / reset password flow using email-based reset tokens.
The backend:
- generates a secure reset token
- stores it with expiry information
- sends the reset link to the user
- validates the token before updating the password
6) Secure Notes CRUD + Audit Logging
At the core, this is a notes application, so users can create, read, update, and delete notes.
To make it more realistic, I also implemented audit logging so important note actions can be tracked.
This was useful for understanding:
- logging user activity
- building admin-style monitoring functionality
7) Deployment of Full Stack + Database
One of the biggest goals of this project was learning how to deploy a complete full-stack app, not just run it locally.
I deployed:
- React frontend → Vercel
- Spring Boot backend → Render
- MySQL database → Railway
This taught me a lot about:
- environment variables
- frontend/backend API integration after deployment
- CORS configuration
- deployment debugging
- connecting a hosted backend to a hosted database
What I Learned from This Project
I learned how to:
- build a full-stack application from scratch
- design secure authentication and authorization flows
- integrate JWT + OAuth2 + MFA together
- handle password security and reset flows
- deploy frontend, backend, and database separately
- debug real deployment issues like 401 errors, CORS, CSRF, token handling, and environment config
It gave me practical exposure to how modern full-stack applications are built and secured in the real world.
Project Links
- Live Frontend: [https://secure-notes-full-stack-application.vercel.app/]
- Backend API: [https://secure-notes-full-stack-application.onrender.com]
- GitHub Repository: [https://github.com/tejasviurka/Secure-Notes-Full-Stack-Application]
Final Thoughts
This project was a big learning experience for me because it combined backend development, frontend integration, security concepts, and deployment into one complete application.
If you’re learning Spring Boot, Spring Security, React, JWT, OAuth2, or full-stack deployment, building a project like this teaches a lot.
Thanks for reading 🚀
