NoteIt

Fun full-stack notes app with secure auth and clean CRUD workflows.

#SessionAuth
#ProtectedRoutes
#NoteCRUD
#FormValidation
#PasswordHashing

Project overview

NoteIt is a full-stack note management application built with TypeScript and the MERN stack. It provides users with a secure and intuitive platform for creating, organizing, and managing personal notes. The application features robust user authentication, real-time updates, and a clean, responsive interface.

Engineering challenges

Scoping every note endpoint to the active session—GET/POST/PATCH/DELETE /api/notes only reads and writes documents for the logged-in user, with React protected routes blocking the UI when unauthenticated.
Keeping create/update payloads consistent across React Hook Form on the client and Mongoose models on Express, with shared TypeScript types so validation errors and API responses stay aligned.
Wiring auth end-to-end with bcrypt password hashing, express-session cookies, and envalid for required env vars—failing fast at server startup if MongoDB or session secrets are missing.

Features

Secure user authentication with session management using express-session and password hashing via bcrypt.
Complete CRUD functionality for managing notes, enabling users to create, view, update, and delete their personal notes.
Responsive design powered by Bootstrap, delivering a clean, intuitive interface that adapts seamlessly across devices.

Architecture

flowchart TB
  subgraph fe [1. Frontend — React + TypeScript]
    router[React Router — protected routes]
    forms[React Hook Form — note CRUD UI]
    router --> forms
  end
  subgraph be [2. Backend — Node.js + Express]
    session[express-session + bcrypt]
    api[REST API — users and notes]
    mongoose[Mongoose]
    session --> api --> mongoose
  end
  mongo[(MongoDB Atlas)]
  router -->|Signup, login, logout| session
  forms -->|Create, read, update, delete notes| api
  mongoose --> mongo

Separate frontend and backend TypeScript apps. The browser sends session cookies with each note request; Express validates the session before reading or writing to MongoDB.

Technologies used

Frontend

React, TypeScript, React Bootstrap, CSS Modules, React Hook Form

Backend

Node.js, Express.js, TypeScript, express-session, bcrypt, envalid

Data

MongoDB, Mongoose