Skip to content

README.md

Latest commit

 

History

History
262 lines (199 loc) · 7.69 KB

README.md

File metadata and controls

262 lines (199 loc) · 7.69 KB
Raw

⚡ TaskFlow — Modern Full-Stack Productivity & Task Board

React Node.js Express MongoDB TailwindCSS Live Demo License: MIT


TaskFlow Dashboard Preview

A modern, responsive, and feature-rich task management application built with React, Tailwind CSS, Node.js, Express, and MongoDB. Designed to help users organize, prioritize, and track their daily tasks efficiently.

TaskFlow features a sleek Glassmorphism UI aesthetic, Dark/Light Theme toggling, and Framer Motion layout animations for a premium desktop and mobile user experience.

✨ Features

🔐 Authentication

  • User Registration & Login
  • JWT Authentication
  • Password Encryption with bcryptjs
  • Protected Routes
  • Google OAuth 2.0 Authentication
  • Secure Session Management
  • Persistent Login Support

📝 Task Management

  • Create, Edit, and Delete Tasks
  • Mark Tasks as Complete/Incomplete with spring animations
  • Task Priorities (High, Medium, Low)
  • Due Dates
  • Categories & Tags
  • Search & Filtering

📊 Dashboard

  • Task Statistics
  • Completed vs Pending Overview
  • Priority-Based Analytics
  • Productivity Tracking

🎨 User Experience

  • Modern UI/UX Design (Glassmorphic cards & glow elements)
  • Dark & Light Mode
  • Responsive Design (Desktop & Mobile optimized layouts)
  • Smooth Animations with Framer Motion
  • Toast Notifications (Offline/Online updates)
  • Drag-and-Drop Task Reordering (HTML5 + Framer Motion layout sync)

🔑 Google Authentication

Users can securely sign in using their Google account without creating a separate password.

Features

  • One-click Google Sign-In for instant access
  • Secure OAuth 2.0 Flow via Passport.js
  • Automatic Account Creation on first login
  • JWT Token Generation upon verification
  • Profile Information Sync (Google Name & Avatar images)
  • Persistent User Sessions saved securely

Google OAuth Tech Stack

  • Google OAuth 2.0
  • Passport.js / Google Strategy
  • JWT Authentication
  • MongoDB User Storage

User Data Stored

  • Google ID
  • Name
  • Email Address
  • Profile Picture
  • Account Creation Date

Security Features

  • Secure OAuth Flow redirects
  • JWT Token Validation in middleware
  • Protected API Routes
  • Environment Variable Protection
  • HTTPS Proxy Support for Cloud Deployments

🛠️ Updated Tech Stack

Frontend

  • React.js (Vite)
  • Tailwind CSS (v4)
  • Framer Motion
  • Lucide Icons
  • Axios
  • React Router DOM
  • React Hook Form

Backend

  • Node.js
  • Express.js
  • MongoDB Atlas
  • Mongoose
  • JWT Authentication
  • bcryptjs
  • Passport.js
  • Google OAuth 2.0
  • dotenv
  • CORS

🚀 Advanced Features

  • Google Authentication integration
  • Drag-and-Drop Task Management using native HTML5 and Framer Motion Layouts
  • Dark & Light Mode (system-aware switcher)
  • Analytics Dashboard (radial SVG progress meters)
  • Search & Filtering (by title, description, priority, and completion states)
  • Categories & Tags for quick categorization
  • Due Date Tracking with flashing overdue warnings
  • Priority Management with custom glowing color codes
  • Responsive Design adapting beautifully to mobile, tablet, and desktop viewports
  • Real-Time Notifications and offline LocalStorage fallback modes

📂 Project Structure

todo-app/
├── client/              # React frontend application (Vite)
│   ├── public/          # Manifest.json, sw.js service worker, icons
│   └── src/
│       ├── components/  # Navbar, Dashboard, TaskCard, TaskStats, TaskForm, AuthForm
│       ├── context/     # AuthContext, ThemeContext
│       ├── utils/       # api.js client wrapper with LocalStorage fallback
│       ├── App.jsx      # Main layout router and background floating blobs
│       ├── index.css    # Typography, glassmorphism classes, and keyframe animations
│       └── main.jsx     # App mounting and Service Worker registration
│
├── server/              # Express backend server
│   ├── config/          # Passport.js strategy configuration
│   ├── middleware/      # JWT Authentication guards
│   ├── models/          # Mongoose database models (User, Task)
│   ├── routes/          # Express API controllers (auth, tasks)
│   ├── server.js        # Express app entry and DB connections
│   └── package.json     # Node script configuration
│
├── .vscode/             # IDE settings config
└── package.json         # Workspace root concurrent script runner

⚙️ Installation

Clone Repository

git clone https://github.com/codexanjan/taskflow.git
cd taskflow

Auto-Install Dependencies

You can install dependencies for both the client and server folders in one command from the root folder:

npm run install:all

Environment Variables

Create a .env file inside the server folder:

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_secret_key

# Google OAuth 2.0 Credentials
GOOGLE_CLIENT_ID=your_google_client_id_here
GOOGLE_CLIENT_SECRET=your_google_client_secret_here
CLIENT_URL=http://localhost:5173

🌐 Running the Application

Running Concurrently (Recommended)

You can start both the client and server concurrently from the root folder:

npm run dev

Running Individually

  • To run the frontend client only: 
    npm run client
  • To run the backend server only: 
    npm run server
    (Note: If launched alone, the client will automatically notify you and launch in Guest Mode using LocalStorage for all operations).

🌐 Deployment

  • Frontend: Vercel
  • Backend: Render
  • Database: MongoDB Atlas

📸 Screenshots

Add screenshots here after completing the project.

🎯 Future Enhancements

  • Email Notifications
  • Team Collaboration
  • Calendar Integration
  • Real-Time Updates
  • Mobile App Version
  • AI Task Recommendations

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Anjan Shetty

⭐ If you like this project, don't forget to star the repository!

Made with ❤️ by Anjan Shetty

GitHub