Skip to content

Latest commit

 

History

History
221 lines (165 loc) · 7.68 KB

README.md

File metadata and controls

221 lines (165 loc) · 7.68 KB

📝 Advanced Task Manager App 📝


A modern, feature-rich Task Manager application built with React that helps you organise and manage your daily tasks efficiently. This app includes advanced features like dark/light mode theming, drag-and-drop functionality, local storage persistence, and performance optimisations. The application demonstrates best practices in React development, including the use of custom hooks, the Context API, and responsive design principles.


Project Deployment

👉 Live Demo 👉 Tech Assignment.pdf


Technologies Used

Frontend

reactjs javascript css3 html5

Libraries & Tools

react-beautiful-dnd localstorage context-api hooks

Development Tools

vercel github npm vscode

Deployed On:

vercel

✨ Features

🎯 Core Functionality

  • Task Management: Add, edit, delete, and mark tasks as completed
  • Smart Filtering: Filter tasks by All, Completed, or Pending status
  • Data Persistence: Tasks are automatically saved to Local Storage
  • Form Validation: Prevents adding empty or invalid tasks

🚀 Advanced Features

  • Dark/Light Mode: Toggle between themes with smooth transitions
  • Drag & Drop: Reorder tasks using intuitive drag-and-drop interface
  • Responsive Design: Mobile-first approach ensuring perfect experience on all devices
  • Smooth Animations: CSS transitions for adding, removing, and updating tasks
  • Performance Optimized: Uses React.memo, useCallback, and useMemo for optimal performance

🔧 Technical Implementation

  • Custom Hooks: useLocalStorage hook for efficient local storage operations
  • Context API: Centralised state management without prop drilling
  • Modern React Patterns: Functional components with hooks
  • Clean Architecture: Modular and maintainable code structure

📱 Screenshots

Light Mode

Light Mode Screenshot

Dark Mode

Dark Mode Screenshot

Mobile Responsive

Mobile Screenshot Mobile Screenshot

Drag & Drop in Action

Drag Drop Screenshots Drag Drop Screenshots


🛠️ Setup Instructions

Prerequisites

  • Node.js (v14 or higher)
  • npm or yarn package manager
  • Modern web browser

Installation

  1. Clone the repository to your local machine:

    git clone https://github.com/your-username/task-manager-app.git

  2. Navigate to the project directory:

    cd task-manager-app

  3. Install the required dependencies:

    npm install

  4. Start the development server:

    npm start

  5. Open your browser and navigate to http://localhost:3000 to use the Task Manager.

Available Scripts

  • npm start - Runs the app in development mode
  • npm test - Launches the test runner
  • npm run build - Builds the app for production
  • npm run eject - Ejects from Create React App (one-way operation)

📂 Project Structure

task-manager-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── Header.jsx
│   │   ├── TaskFilter.jsx
│   │   ├── TaskForm.jsx
│   │   ├── TaskItem.jsx
│   │   ├── TaskList.jsx
│   │   └── ThemeToggle.jsx
│   ├── context/
│   │   └── TaskContext.jsx
│   ├── hooks/
│   │   ├── useLocalStorage.js
│   │   └── useTheme.js
│   ├── styles/
│   │   ├── App.css
│   │   ├── components.css
│   │   └── animations.css
│   ├── utils/
│   │   └── taskUtils.js
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   └── index.js
├── package.json
└── README.md

🎨 Key Features Breakdown

Custom Hooks

  • useLocalStorage: Handles all local storage operations with automatic JSON parsing/stringifying
  • useTheme: Manages theme state and preferences

Performance Optimisations

  • React.memo: Prevents unnecessary re-renders of task components
  • useCallback: Memoises event handlers to prevent child re-renders
  • useMemo: Optimizes expensive filtering operations

Responsive Design

  • Mobile-first CSS approach
  • Flexible grid layouts
  • Touch-friendly interface elements
  • Adaptive typography and spacing

Animations & Transitions

  • Smooth task addition/removal animations
  • Theme transition effects
  • Hover and focus states
  • Loading states with skeleton screens

🚀 Deployment

This project can be easily deployed on various platforms:

Vercel (Recommended)

  1. Push your code to GitHub
  2. Connect your GitHub repository to Vercel
  3. Deploy with automatic builds on push

🙏 Acknowledgments

  • React team for the amazing framework
  • react-beautiful-dnd for drag and drop functionality
  • All the open-source contributors who made this project possible

Show your support

Give a ⭐️ if you like this project!

✨ Happy Task Managing! ✨