The Need for Persistent Task Management
Most standard to-do applications are limited to local storage, meaning tasks are lost across different devices or browser sessions. To showcase full-stack capabilities, the situation required building a secure, cloud-synced task manager where user records, credentials, and personalized todo lists are securely persistent, accessible from anywhere, and fast to interact with.
Building a Secure, High-Performance MERN Stack App
The goal was to design and implement a full-stack MERN (MongoDB, Express, React, Node.js) application featuring strict user authentication, state-driven reactivity, profile configuration, and instant CRUD capabilities. Key deliverables included: password hashing, protected API endpoints using JSON Web Tokens (JWT), seamless task management logic, responsive styling, and a satisfying celebration system for task completions.
Full-Stack Development and Security Practices
Frontend Implementation
Crafted a single-page application using React, Vite, and custom Tailwind CSS. Managed persistent login state securely by handling JWT tokens in localStorage to sustain user sessions. Implemented reactive state modifications for real-time task CRUD updates, and integrated a visually engaging reward mechanism using canvas-confetti upon task list completion.
Backend Engineering
Built a RESTful API using Node.js and Express. Modeled cloud collections using Mongoose schemas for users and tasks. Integrated salt-based Bcrypt hashing for password protection and developed verification/login token validation middleware. Created a cascade account deletion API that purges all associated todo items upon user deletion.
Secure, Responsive and Active Platform
The project was successfully compiled and hosted on Render, serving compiled SPA dist assets directly under Cloudflare protection. Users can register accounts, sign in securely, update profiles, perform password resets, and organize todos on a responsive UI. The addition of immediate feedback states and completing celebrations has vastly enhanced user engagement, making the app highly useful and professional.
Lighthouse Score Analysis
Core Performance Metrics
| Metric | Value |
|---|---|
| First Contentful Paint (FCP) | 0.8 s |
| Largest Contentful Paint (LCP) | 1.2 s |
| Total Blocking Time (TBT) | 50 ms |
| Speed Index | 0.9 s |
| Cumulative Layout Shift (CLS) | 0.02 |