Taskify

Next-Generation Smart Task & Workflow Management Platform

Overview • Key Features • Visual Tour • Tech Stack • Project Architecture • Getting Started • API Reference • Contributing

---

Overview

Taskify is a modern, production-grade task and workflow management platform designed to help individuals and teams organize projects, boost productivity, and collaborate seamlessly.

Built with the MERN stack and end-to-end TypeScript type-safety across client and server, Taskify features voice-activated task creation via the Web Speech API, an interactive AI project assistant, comprehensive status analytics, team collaboration workspaces, secure dual authentication (JWT + Firebase Google OAuth), and an integrated 8-minute keep-alive service for reliable cloud hosting.

---

Key Features

• Voice & Speech-to-Text Task Creation: Dictate tasks directly into Taskify using the browser's Web Speech API for hands-free workflow capture.
• Interactive AI Project Assistant: Intelligent floating workspace companion that assists with organizing priorities, suggesting project breakdowns, and optimizing team productivity.
• Collaborative Team Workspaces: Create dedicated team spaces, invite members, conduct in-app discussions, and track shared team tasks in real time.
• Visual Analytics & Status Metrics: Real-time project completion tracking, todo distribution charts powered by Recharts, and multi-tier priority filtering (Low, Medium, High).
• Dual Authentication Architecture:
  • Email & password registration with cryptographic token verification powered by Nodemailer.
  • One-click Google Sign-In with Firebase Authentication and server-side Firebase Admin ID token verification.
• Interactive Demo Mode: Zero-setup evaluation environment allowing users to explore full capabilities without requiring database provisioning or account registration.
• Refined Light Aesthetic & Bento Grid UI: Clean, distraction-free light workspace featuring modular Bento cards, subtle border contrasts, fluid micro-interactions with Framer Motion, and Tailwind CSS typography.
• Automated Background Jobs & Keep-Alive Service: Node-Cron scheduled deadline notifications and an automated 8-minute keep-alive ping engine to prevent Render free-tier instances from spinning down.

---

Visual Tour

Landing & Workspace Command Center

Interactive Dashboard & Demo Mode

Dashboard & AI Assistant	Interactive Demo Mode

Collaborative Team Workspaces

Dedicated team workspaces featuring real-time discussion streams, member invitations, and shared team tasks.

Authentication & Security Flow

Account registration, verification dispatch, and Google OAuth login integration.

---

Tech Stack

Frontend

• Framework: React 18 with Vite
• Language: TypeScript
• Styling: Tailwind CSS
• Icons: Lucide React
• Motion & Animations: Framer Motion
• Data Visualization: Recharts
• Auth Client: Firebase Client SDK
• Date Utilities: date-fns

Backend

• Runtime: Node.js (>=20 / >=24.22.1)
• Framework: Express.js
• Language & Engine: TypeScript with tsx execution
• Database: MongoDB via Mongoose ODM
• Security & Tokens: JSON Web Tokens (JWT), bcryptjs
• Cloud Auth Verification: Firebase Admin SDK
• Email Service: Nodemailer
• Job Scheduling: Node-Cron

---

Project Architecture

Taskify/
├── assets/                  # High-resolution screenshots and product media
│   ├── home.png             # Landing page preview
│   ├── dashboard.png        # Dashboard & AI assistant preview
│   ├── demo.png             # Demo mode preview
│   ├── teams.png            # Collaborative team space preview
│   ├── auth.gif             # Animated authentication demo
│   └── auth.mp4             # Video demo
├── client/                  # Frontend Single Page Application
│   ├── public/              # Static assets, sitemap.xml, robots.txt, preview images
│   ├── src/
│   │   ├── components/      # UI components (Sidebar, ProjectAssistant, Modals)
│   │   ├── config/          # Firebase client initialization
│   │   ├── context/         # AuthContext & ThemeContext providers
│   │   ├── hooks/           # useSpeechToText hook
│   │   ├── layouts/         # DashboardLayout
│   │   ├── pages/           # LandingPage, AuthPage, Dashboard Views
│   │   ├── services/        # API client & Demo mode mock engine
│   │   └── types.ts         # TypeScript models and interfaces
│   ├── .env.example         # Client environment template
│   └── package.json
├── server/                  # Backend REST API Server
│   ├── config/              # MongoDB connection & Firebase Admin setup
│   ├── controllers/         # Auth, Task, Project, Team, User controllers
│   ├── middleware/          # JWT authentication middleware
│   ├── models/              # Mongoose schemas (User, Task, Project, Team)
│   ├── routes/              # Express API route endpoints
│   ├── services/            # Cron deadline service, email service, keep-alive service
│   ├── .env.example         # Server environment template
│   └── server.ts            # Application entrypoint & health routes
├── package.json             # Root orchestration scripts
└── README.md

---

Getting Started

Prerequisites

Make sure you have installed:

• Node.js (version 20+ or 24.x recommended)
• npm (version 10+)
• MongoDB (local instance or free MongoDB Atlas cluster)

Installation

Clone the repository:

git clone https://github.com/PurveshShinde/Taskify.git
cd Taskify

Install dependencies across the root, client, and server packages:

npm run install:all

Important Note on Server Dependencies:
If you run npm run dev inside server/ and encounter the error:
'tsx' is not recognized as an internal or external command
this indicates that dependencies have not yet been installed inside server/. Run:

cd server && npm install

---

Environment Setup

1. Client Environment (client/.env)

Copy the sample environment file:

cp client/.env.example client/.env

Ensure your client/.env contains:

VITE_API_BASE_URL=http://localhost:5000

# Optional: Firebase credentials for Google Sign-In
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.firebasestorage.app
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

2. Server Environment (server/.env)

Copy the sample environment file:

cp server/.env.example server/.env

Ensure your server/.env contains:

PORT=5000
CLIENT_ORIGIN=http://localhost:5173
FRONTEND_URL=http://localhost:5173
MONGO_URI=mongodb://127.0.0.1:27017/taskify
JWT_SECRET=your_secure_jwt_secret_key

# Optional: Backend Keep-Alive (automatically detected on Render via RENDER_EXTERNAL_URL)
SERVER_URL=https://taskify-api.example.com

# Optional: Firebase Admin credentials (for Google Sign-In verification)
FIREBASE_PROJECT_ID=your_project_id
FIREBASE_CLIENT_EMAIL=your_service_account@project.iam.gserviceaccount.com
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n"

# Optional: Email Service (defaults to console logging in development)
EMAIL_USER=your_email@gmail.com
EMAIL_PASS=your_app_password

---

Running the Application

Option 1: Unified Startup (Recommended)

From the project root:

npm run dev

This concurrently boots both the frontend client and backend server.

Option 2: Dual Terminal Startup

For focused debugging, run each layer in a separate terminal:

Terminal 1 — Backend API Server:

cd server
npm install
npm run dev

Backend runs at http://localhost:5000 (Health check: http://localhost:5000/health)

Terminal 2 — Frontend Client:

cd client
npm install
npm run dev

Frontend runs at http://localhost:5173

---

API Reference

Method	Endpoint	Description	Access
GET	/health	System health status & keep-alive monitor	Public
GET	/	API status heartbeat	Public
POST	/api/auth/register	Register new user & dispatch verification email	Public
POST	/api/auth/login	Login with email and password	Public
POST	/api/auth/firebase	Authenticate with Firebase ID token (Google Sign-In)	Public
POST	/api/auth/verify-email	Verify user email with security token	Public
GET	/api/tasks	Get all tasks for current authenticated user	Private
POST	/api/tasks	Create a new task	Private
PUT	/api/tasks/:id	Update task details, status, or priority	Private
DELETE	/api/tasks/:id	Delete task	Private
GET	/api/projects	Fetch all user projects	Private
POST	/api/projects	Create a new project	Private
GET	/api/teams	Retrieve user teams	Private
POST	/api/teams	Create new team workspace	Private
POST	/api/teams/:id/members	Invite or add member to team	Private
GET	/api/users/profile	Get authenticated user profile details	Private

---

Security & Reliability

• Password Hashing: Cryptographic password salting and hashing using bcryptjs.
• JWT Authorization: Secure HTTP Bearer tokens protecting private routes.
• Environment Isolation: Production credentials and database secrets are never hardcoded or committed to git.
• CORS Protection: Origin validation restricting unauthorized cross-origin requests.
• Cloud Keep-Alive Engine: Automated 8-minute ping cycle preventing cloud platforms (such as Render) from cycling instances into sleep mode.

---

Contributing

Contributions are welcome. If you would like to propose a change:

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/NewFeature)
3. Commit your Changes (git commit -m 'feat: Add NewFeature')
4. Push to the Branch (git push origin feature/NewFeature)
5. Open a Pull Request

---

License

Distributed under the MIT License. See LICENSE for more details.

---

Author

Purvesh Shinde

• GitHub: @PurveshShinde
• Project Repository: https://github.com/PurveshShinde/Taskify