DEV Community

Tejasvi Urkande
Tejasvi Urkande

Posted on

Build and Deployed a Secure Notes App with Spring Boot, React, JWT, OAuth2, MFA, and MySQL

#java #springboot #ai #mysql

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

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 🚀

Top comments (0)