Node Notes (React)

Dec 2021

PersonalDec 20216 technologies15 features

About this project

A modern SPA migration of Node Notes from server-rendered EJS to a React 17 frontend with a decoupled Express.js REST API secured by JWT authentication. Features React Router v6 for client-side routing, React Context for global session state, Bootstrap 5 for responsive layouts, AOS scroll animations, react-hot-toast notifications, and SweetAlert2 confirmation dialogs.

Supports full CRUD for notes with three importance levels, client-side filtering by importance and title search, and responsive card grid layouts with expandable note cards showing relative timestamps. Includes profile management, password change, account deletion with cascade, and email-based password recovery.

The landing page features animated sections, floating labels, SVG dividers, and responsive mobile floating action buttons.

Features

JWT-based authentication with Bearer token stored in localStorage

React Context for persistent session state across page loads

Protected routes with PrivateRoute and login redirect guards

Full CRUD for notes with three importance levels (Normal, Important, Very Important)

Client-side filtering by importance with desktop and mobile sort buttons

Client-side live search by title with overlay search on mobile

Responsive card grid layout with expandable notes and relative timestamps

Shared NotesCreator component for both add and edit pages

Profile editing, password change, and account deletion with SweetAlert2 confirmation

Email-based password recovery with JWT token verification flow

Toast notification system (react-hot-toast) for all success/error feedback

AOS scroll animations (fade, flip, zoom) and CSS-only floating label inputs

Custom SVG shape dividers between landing page sections

Floating action buttons on mobile: add note, sort, and search

Connection checking before API calls with user-friendly error messages

Tech Stack

Node.jsExpress.jsBootstrapMySQLReactAOS

Boxbook Proyecto Horarios