Notes Management Application

Deployment

Links

• Frontend (Website): https://notes-app-react-frontend.onrender.com
• Backend REST API: https://notes-app-backend-fxov.onrender.com
• REST API documentation (Swagger UI): https://swagger-ui-rest-api-documentation.onrender.com

Deployment details

• Frontend (Website) and REST API documentation (Swagger UI) deployed on Render (static site service)
• Backend deployed on Render (web service)
• Database deployed on Neon (PostgreSQL)
• First request may take up to 4 minutes due to free-tier backend and database cold start.

Screenshots

Login page

Signup page

Forgot password page

Home page

Top

Scrolled

Edit note page

Technologies used

Frontend

• HTML
• CSS
• JavaScript
• React
• React Router (client-side routing)
• React Hook Form

Backend

• Java
• Spring Boot (REST API)
• Spring Security (JWT authentication with access and refresh tokens)
• PostgreSQL

Features

• User account creation
• Forgot password flow
• Simulated OTP verification flow for account creation and forgot password flow
• Account login and logout
• Notes management per user
• Create, read, update and delete notes
• Search notes by title, description and content
• Filter notes by status, priority and due date
• Sort notes by due date, priority, creation timestamp and last updation timestamp
• Pagination in notes search results (10 notes per page)
• Rich text note editing using Quill editor

Database schema diagram