A full-stack task management web application built with the MERN stack (MongoDB, Express, React, Node.js), focused on clarity, progress tracking, and accessibility.

This app allows users to create tasks, track progress over time, filter tasks by date and status, and visualize progress using an intuitive UI.

🔗 https://task-creator-frontend.netlify.app/

• User authentication (JWT-based)
• Create, and delete tasks
• Task progress tracking (0–100%)
• Daily task filtering
• Aggregate progress visualization
• Drag-to-reveal delete interaction
• Accessible keyboard and screen-reader support
• Responsive design (mobile & desktop)

TASK-CREATOR/ ├── frontend/ # React client └── backend/ # Node.js + Express API

• Redux Toolkit → auth, UI state, filters
• TanStack Query → server state (tasks, projects, progress)

This separation keeps UI state predictable while ensuring efficient server data fetching and caching.

• React
• Redux Toolkit
• TanStack Query
• React Router
• Framer Motion
• Accessible HTML & ARIA patterns

• Node.js
• Express
• MongoDB + Mongoose
• JWT Authentication

git clone https://github.com/abodiamhe/task-creator.git
cd task-mern

cd backend && npm install
cd ../frontend && npm install

# Backend
cd backend
npm run dev

# Frontend (new terminal)
cd frontend
npm run dev

• Keyboard-accessible interactions

• Reduced-motion support

• Semantic HTML

• Screen-reader friendly UI

• Accessibility was considered from the start, not added later.

This project is actively developed and used as a portfolio project to demonstrate real-world MERN architecture and best practices.

Sadiq Akhigbe
Full Stack JavaScript Developer (MERN)