SaaSPersonal

Emaar Task Manager

Modern Task Management App with Optimistic Updates

Frontend Repo Backend Repo

Optimistic

Updates

Full-Stack

Stack

Zod + Joi

Validation

Vercel

Deploy

ViteReactTypeScriptTailwind CSSshadcn/uiReact QueryReact Hook FormZodExpressMongoDBJoiVercel

01Overview

A full-stack task management application with a modern React/TypeScript frontend and an Express/TypeScript backend. Users can create, edit, delete, and toggle task completion status with real-time optimistic updates for a snappy user experience.

The app features pagination, sorting by any field, filtering by completion status, and toast notifications for all CRUD operations. The frontend uses shadcn/ui for a polished, accessible component system.

02My Role & Impact

Built the frontend with Vite, React, TypeScript, and Tailwind CSS, using shadcn/ui for the component library and React Query for data fetching with optimistic updates.
Implemented form handling with React Hook Form and Zod schema validation for type-safe form submissions.
Designed the Express/TypeScript REST API with MongoDB, Joi validation middleware for request bodies, query parameters, and path parameters, plus pagination and sorting support.
Deployed both frontend and backend to Vercel for seamless CI/CD.

03Technical Deep Dive

Optimistic updates are implemented via React Query's onMutate/onError/onSettled pattern — the UI updates immediately on user action, rolls back on failure, and reconciles with the server response on settlement. This eliminates perceived latency for toggle and delete operations.

The backend validation layer uses Joi schemas for all three input surfaces: request bodies (create/update), query parameters (pagination, sorting, filtering), and path parameters (MongoDB ObjectId format). This ensures data integrity at the API boundary before any database operation.

04Tech Stack Breakdown

Frontend

Vite + React + TypeScript
Tailwind CSS + shadcn/ui
React Query (data fetching + optimistic updates)
React Hook Form + Zod (forms + validation)
Axios (HTTP client)

Backend

Express + TypeScript
MongoDB + Mongoose
Joi (validation middleware)
Vercel (deployment)

PreviousE-Commerce Platform NextE-Commerce Store

01Overview

02My Role & Impact

Built the frontend with Vite, React, TypeScript, and Tailwind CSS, using shadcn/ui for the component library and React Query for data fetching with optimistic updates.

Implemented form handling with React Hook Form and Zod schema validation for type-safe form submissions.

Designed the Express/TypeScript REST API with MongoDB, Joi validation middleware for request bodies, query parameters, and path parameters, plus pagination and sorting support.

Deployed both frontend and backend to Vercel for seamless CI/CD.

03Technical Deep Dive