📝 ToDo-App

Live Application: TaskFlow on Vercel

📖 Project Overview

TaskFlow is a robust, full-stack (MERN) task management application built as part of the UnsaidTalks Build4Hire program. It allows users to securely register, manage daily tasks, and automatically track overdue items. The project focuses on a seamless user experience with real-time UI feedback, secure JWT authentication, and automated backend processes.

---

✨ Features Implemented

• Secure User Authentication: * Registration and Login functionality with encrypted credentials.
  • JWT-based route protection and session persistence (Remember Me).
• Task Management (CRUD): * Add new tasks with specific due dates.
  • Delete tasks with smooth CSS fade-out animations.
  • Mark tasks as "Done" with real-time loading spinners preventing double-clicks.
• Smart Status System: * Tasks are visually categorized into Pending (Yellow), Done (Green), and Backlog (Red).
  • Completed tasks feature a strikethrough and muted UI to reduce cognitive load.
• Automated Backlog Tracking: * A backend automation script safely monitors the database and automatically moves overdue, uncompleted tasks into the "Backlog" status.
• Responsive UI Design: * Custom CSS ensuring pixel-perfect layout alignment across both Desktop and Mobile devices.
  • "Empty State" illustrations and dynamic overdue warnings.

---

🛠️ Technology Stack

• Frontend: React, Vite, React Router DOM, Axios, Custom CSS
• Backend: Node.js, Express.js
• Database: MongoDB (Mongoose ODM)
• Deployment: Vercel (Frontend), Railway (Backend)

---

Setup instructions

To run this project locally on your machine, follow these steps:

1. Clone the Repository

git clone [https://github.com/jnakaigen/TaskFlow.git](https://github.com/jnakaigen/TaskFlow.git)
cd TaskFlow
2. Backend Setup
Open a terminal and navigate to the backend directory:

Bash
cd backend
npm install
Create a .env file in the backend folder and add your environment variables:

Code snippet
PORT=3000
MONGO_URI=your_mongodb_connection_string
JWT_KEY=your_secret_jwt_key
Start the backend server:

Bash
node server.js
3. Frontend Setup
Open a new, separate terminal window and navigate to the frontend directory:

Bash
cd frontend
npm install
Start the Vite development server:

Bash
npm run dev

(Note: Ensure your local React components are pointing to http://localhost:3000 for API calls during local development, rather than the live production URLs).