Skip to content

README.md

Latest commit

 

History

History
279 lines (211 loc) · 9.88 KB

README.md

File metadata and controls

279 lines (211 loc) · 9.88 KB

TaskFlow - Modern Task Manager 📝

TaskFlow Banner

🚀 TaskFlow - Your Ultimate Task Management Solution

A modern, intuitive task management system built with React & TypeScript
Live Website: taskflow-cwt.netlify.app
Organize your workflow, boost productivity, and achieve your goals effortlessly ⚡
Tech Stack: React, TypeScript, Tailwind CSS, Supabase, Vite

React TypeScript Tailwind Vite Netlify

🎯 Introduction

TaskFlow is a modern and intuitive task management web application designed to help individuals and teams stay organized, track progress, and achieve their goals efficiently. Built using React, TypeScript, and Tailwind CSS for a sleek and responsive design.

✨ Key Highlights

  • 📱 Responsive Design - Perfect experience on desktop, tablet, and mobile
  • 🌓 Dark Mode - Switch between light and dark themes for better user experience
  • 🔐 Secure Authentication - Protected routes and user sessions
  • ⚡ Fast Performance - Built with modern tools for optimal speed

🚀 Features

✅ Core Functionality

  • Task Management - Add, update, and delete tasks with categories like Important, Normal, Bazar, and Not Important
  • Daily Tracking - Keep a record of daily tasks and mark completed tasks easily
  • User Reviews - Users can share their feedback and view other user reviews
  • Progress Monitoring - Track your productivity and completion rates

🎨 User Experience

  • Dark/Light Theme - Toggle between themes for comfortable viewing
  • Responsive Design - Works smoothly on desktops, tablets, and mobile devices
  • Intuitive Interface - Clean and user-friendly design for easy navigation
  • Developer Info - About page with developer details and social links

🔐 Security & Access

  • User Authentication - Secure login and registration system
  • Protected Routes - Secure access to user-specific content
  • Session Management - Persistent login state across browser sessions

🛠️ Tech Stack

Frontend

React TypeScript Tailwind CSS

Development & Deployment

Vite React Router Lucide React Netlify

State Management & Backend

React Context Supabase

🚀 Getting Started

Prerequisites

  • Node.js (version 14 or higher)
  • npm or yarn package manager

Installation & Setup

  1. Clone the repository:

    git clone https://github.com/CodeWithTanim/TaskFlow.git
cd TaskFlow

  2. Install dependencies:

    npm install

  3. Run the application:

    npm start

  4. Open your browser: Navigate to http://localhost:3000 to view the application.

Available Scripts

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

🏗️ Project Structure

TaskFlow/
├── dist/
│   └── assets/            # Static assets
├── src/
│   ├── components/        # Reusable UI components
│   │   └── Layout/        # Layout components
│   │       ├── LoadingSpinner.tsx
│   │       ├── Navbar.tsx
│   │       └── ProtectedRoute.tsx
│   │
│   ├── contexts/          # React Context for state management
│   │   ├── AuthContext.tsx
│   │   └── ThemeContext.tsx
│   │
│   ├── pages/             # Application pages
│   │   ├── Auth.tsx       # Authentication page
│   │   ├── Dashboard.tsx  # Main dashboard
│   │   ├── Tasks.tsx      # Task management
│   │   ├── Settings.tsx   # User settings
│   │   ├── ReviewForm.tsx # Task reviews
│   │   ├── About.tsx      # About page
│   │   └── Home.tsx       # Landing page
│   │
│   ├── lib/               # Utility libraries
│   │   └── supabase.ts    # Supabase configuration
│   │
│   ├── types/
│   │   └── index.ts       # TypeScript type definitions
│   ├── App.tsx            # Main App component
│   ├── index.css          # Global styles
│   └── main.tsx           # Application entry point
│
├──  supabase/
│   └──migrations
│        └── myDataBase.sql
├── package.json           # Dependencies and scripts
├── eslint.config.js
├── index.html
├── package-lock.json
├── postcss.config.js
├── tailwind.config.js
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── README.md             # Project documentation

🎯 Key Features Deep Dive

🔐 Authentication System

  • Secure user registration and login
  • Protected routes for authenticated users
  • Session persistence across browser refreshes
  • Context-based state management

📊 Task Management

  • Categorized Tasks: Organize tasks by importance (Important, Normal, Bazar, Not Important)
  • Daily Progress Tracking: Monitor completion rates and productivity
  • Intuitive CRUD Operations: Create, read, update, and delete tasks seamlessly
  • Real-time Updates: Instant feedback on task operations

🎨 Theme System

  • Dark/Light Mode Toggle: Easy switching between themes
  • Persistent Preferences: Remembers user theme choices
  • Smooth Transitions: Elegant theme switching animations
  • Consistent Design: Cohesive visual experience across all components

📱 Responsive Design

  • Mobile-First Approach: Optimized for mobile devices
  • Tablet Compatibility: Perfect experience on tablets
  • Desktop Optimization: Full-featured desktop interface
  • Cross-Browser Support: Works on all modern browsers

🌐 Live Demo

Experience TaskFlow live: https://taskflow-cwt.netlify.app/

👨‍💻 Developer

MD SAMIUR RAHMAN TANIM

Full Stack Developer & Open Source Enthusiast

GitHub LinkedIn Email

🤝 Contributing

We welcome contributions from the community! Here's how you can help:

🐛 Reporting Issues

  • Check existing issues before creating new ones
  • Provide detailed descriptions and steps to reproduce
  • Include browser and device information

💡 Feature Requests

  • Suggest new features or improvements
  • Explain the use case and benefits
  • Consider implementation complexity

🔧 Development Contributions

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

  • React Team - For the amazing framework
  • Tailwind CSS - For the utility-first CSS framework
  • Vite - For the fast build tooling
  • Netlify - For seamless deployment
  • Lucide React - For beautiful icons
  • Supabase - For backend services

📞 Support

Need help or have questions?

⭐ If you find this project helpful, please give it a star on GitHub!

Built with ❤️ using React, TypeScript, and Tailwind CSS

Happy Coding! 🚀