Fullstack Todo List App

Summary

Web Dev Full-Stack React Express.js PostgreSQL Node Next.js JavaScript TypeScript Relational Database

Built with Next.js (frontend) and Express.js + PostgreSQL (backend), this app lets users create, organize, and manage tasks in real-time. Features include task grouping, due dates, and user authentication with sessions. Styled using Tailwind CSS and component libraries for a clean, responsive UI.

Projects

Categories & Tags

All (9) Game Dev (5) Web Dev (3) Reverse Engineering (1) C++ (3) C-Sharp (3) Unity (3) 3D (2) Engine Dev (2) Graphics (2) AI (1) Back-End (1) Django (1) Express.js (1) Full-Stack (1) Go (1) Hugo (1) JavaScript (1) Multiplayer (1) Next.js (1) Node (1) OpenGL (1) PostgreSQL (1) React (1) Relational Database (1) TypeScript (1)

Video

Features

  • Task Management
  • JWT Authentication System
  • Responsive Design
  • Due Dates
  • Task Sorting
  • Task Grouping

Front-end

The front-end is built using Next.js (TypeScript) and styled using Tailwind CSS. I used many components from shadcn/ui and used TanStack Table for the todo list. React Hook Form along with Zod for schema validation was also used.

Back-end

The Back-end is built using Express.js (JavaScript) and connects to a PostgreSQL relational database. Authentication was previously implemented using Passport.js (with hashed passwords) and Express Session, however was overkill for the use case and wouldn’t allow mobile users to authenticate easily, so the authentication system was refactored to use JWT (JSON Web Tokens) authentication instead.

Deploying

To deploy my front-end, I used Netlify and to deploy my back-end I used Render. The Postgresql database is hosted on Neon. Fortunately all of these services are free!

CI/CD

Whenever changes are pushed to the master branch of either the client or server repositories, Netlify or Render will build and redeploy the projects automatically.