Project Overview

A feature-rich, responsive To do app built using React. Tasks are automatically categorised and updated in real-time based on user input and the system clock.

Source Code

Live On

Development Journey

Phase 1: Foundation Setup

• Initialized React project with create-react-app

• Created component scaffolding

Phase 2: Core Functionality & State Management

• Added task creation, completion toggle, and real-time deadline tracking

• Implemented useState and useEffect

• Set up periodic re-renders and alert logic

Phase 3: Styling & UI

• Created clean and responsive UI with custom CSS and Flexbox

• Added card-based layout for task blocks

• Applied glassmorphism effects for visual clarity

Phase 4: Vercel Deployment Process

• Configured GitHub repo

• Connected to Vercel and deployed with continuous integration

Challenges & Solutions

1. Component Styling & Alignment

• ❌ The initial layout was inconsistent

• ✅ Refactored using Flexbox and consistent class structure

2. Editing Tasks Dynamically

• ❌ Task form didn’t retain editable values on edit

• ✅ Implemented form population and toggle with useState and conditional rendering

3. Calculating Time Metrics

• ❌ Difficulty handling early vs late task completion

• ✅ Used Date.parse() with updatedAt and deadline for precise difference evaluation

4. Visualising Remaining Time

• ❌ Needed a visual cue for how much time is left

• ✅ Dynamically colored card backgrounds based on time remaining, proportionally to deadline duration

Component Hierarchy

State Management

useState Hook Implementation

Used for:

• Tasks array

• Form values

• Triggering re-renders

useEffect Hook Integration

• Used for:

  • Title updates

  • Timer for deadline auto-transitions

  • Alert logic

• This project included first-time learning and application of useEffect

State Lifting Pattern

• Shared task state across App, Form, ListView, and List

Data Flow Architecture

• Child-to-parent via callbacks

• Parent-to-child via props

Future Enhancements

Planned Features

• Task search and filter

• User authentication

• Backend integration (e.g., PostgreSQL, Firebase)

Technical Improvements

• Move alerts to toasts using React-Toastify

• Improve time handling with date libraries (e.g., date-fns)

Learning Outcomes

Technical Skills Developed

• React hooks (useState, useEffect)

• Real-time rendering logic

Problem-Solving Experience

• Managing async UI updates

• Handling user input validation

• Structuring scalable component logic

Acknowledgments

Educational Resources

• React Docs

• Chris Coyier - Flexbox guide that provided clear visual examples and practical applications

• StackOverflow & MDN for runtime issues

Development Tools

• React, Vite

• Vercel (for deployment)

• VS Code

• ChatGPT - AI assistance for resolving specific styling and structural challenges