🔨 DailyForge

Build routines. Forge habits. Own your week.

DailyForge is an open-source fullstack MERN productivity app that lets you design, manage, and visualize your weekly routines — with drag-and-drop scheduling, a smart task library, and overlap protection built right in.

🌐 Live Demo · ⚡ Quick Start · 🤝 Contribute · 📸 Screenshots

🚀 Project Overview

Most productivity tools are either too bloated or too simple. DailyForge is a no-nonsense weekly planner that gives you total control over your schedule — built by students, for students and professionals alike.

What it does:

Build a reusable task library with custom durations, colors, and categories
Design weekly routines by dragging tasks into a visual time grid
Save, update, and delete routines with one click
Automatically detects and prevents scheduling conflicts for the same day

Why it matters:
Most people don't fail to plan — they fail to stick to a plan. DailyForge makes routines feel visual and deliberate, making habits easier to build and track.

Key highlights:

⚡ Drag-and-drop weekly planner powered by @dnd-kit
🔒 Secure JWT authentication with bcrypt password hashing
🗂️ Reusable routine templates to clone and reuse schedules
🚫 Conflict detection — no overlapping tasks on the same day
📱 Clean, responsive UI built with React 19 + Tailwind CSS v4

🌐 Live Demo

Service	URL
🖥️ Frontend	https://dailyforge-frontend-lhjq.onrender.com
⚙️ Backend API	https://dailyforge-backend.onrender.com

⚠️ Deployed on Render's free tier — first load may take 30–60 seconds to spin up.

✨ Features

🔐 Authentication

Signup / Login with JWT-based session management
Protected routes — unauthenticated users are redirected to login
Passwords hashed with bcrypt

📋 Task Management

Create tasks with: title, duration, color, and category
Edit and delete tasks from your personal task library
Tasks persist across sessions

🗓️ Routine Builder

Drag tasks from your library onto a 7-day weekly grid
Time-slot-based placement with visual feedback
Overlap detection prevents conflicting task placement on the same day

📊 Dashboard

Interactive Contribution Heatmap: A premium, GitHub-style 371-day productivity calendar that tracks consistency with stunning teal and glowing mint aesthetics.
- 4-Level Visual Scale: Cell intensities map to completed counts (1 task $\rightarrow$ low, 2 tasks $\rightarrow$ medium, 3+ tasks $\rightarrow$ perfect glowing mint).
- Streak & Productivity Tracking: Real-time calculations of current streaks, longest streaks, total productive days, and average day-wise completion rate.
- Completing Date-Matching: Tracks contributions using the actual task completion timestamp (completedAt), fully timezone-robust to your local browser.
- Micro-Animations & Smart Tooltips: Staggered cell entry animations and edge-aware floating tooltips that slide horizontally to prevent bounding box clipping.
- Upcoming Days Protection: Future dates automatically render as hidden, transparent slots until they arrive.
View all saved routines at a glance
Quick access to edit or delete any routine
Summary stats for your weekly schedule and completion progress

♻️ Routine Templates

Save any routine as a reusable template
Re-apply templates to any week in seconds

🏗 Tech Stack

Frontend

Technology	Purpose
React 19	UI framework
Vite	Build tool & dev server
Tailwind CSS v4	Utility-first styling
`@dnd-kit/core`	Drag-and-drop interactions
Axios	HTTP client for API calls
React Router DOM v7	Client-side routing
Lucide React	Icon library
Context API	Global auth state management
Firebase Client	Google Sign-In authentication integration

Backend

Technology	Purpose
Node.js	Runtime environment
Express.js v5	REST API framework
MongoDB Atlas	Cloud database
Mongoose v9	ODM for MongoDB
JSON Web Token (JWT)	Stateless authentication
Bcrypt	Password hashing
Firebase token verification	RS256 Google ID token signature verification
dotenv	Environment variable management
Nodemon	Dev server with hot-reload

📂 Project Structure

DailyForge/
│
├── backend/
│   ├── config/                 # DB connection config
│   ├── controllers/
│   │   ├── authController.js   # Signup, login logic
│   │   ├── routineController.js
│   │   └── taskController.js
│   ├── middlewares/
│   │   └── authMiddleware.js   # JWT verification
│   ├── routes/
│   │   ├── authRoutes.js
│   │   ├── routineRoutes.js
│   │   └── taskRoutes.js
│   ├── src/
│   │   ├── models/             # Mongoose schemas
│   │   │   ├── User.model.js
│   │   │   ├── Task.model.js
│   │   │   └── Routine.model.js
│   │   └── server.js           # Express app entry point
│   ├── .env                    # ← You create this (see below)
│   └── package.json
│
└── frontend/
    ├── public/
    ├── src/
    │   ├── api/
    │   │   └── axiosConfig.js  # Axios base URL config
    │   ├── components/
    │   │   ├── Dashboard/
    │   │   ├── Routine/
    │   │   ├── Task/
    │   │   ├── Navbar.jsx
    │   │   └── ProtectedRoutes.jsx
    │   ├── context/
    │   │   └── AuthContext.jsx
    │   ├── hooks/
    │   │   └── useTasks.js
    │   ├── pages/
    │   │   ├── Dashboard.jsx
    │   │   ├── RoutineBuilder.jsx
    │   │   ├── Tasks.jsx
    │   │   ├── Login.jsx
    │   │   └── Signup.jsx
    │   ├── utils/
    │   ├── App.jsx
    │   └── main.jsx
    ├── index.html
    ├── vite.config.js
    └── package.json

🔄 Project Setup Flow

Understanding the application flow makes it much easier for new contributors to navigate the codebase, debug issues, and add new features. The diagram below illustrates how a request travels through the application.

📊 High-Level Architecture

flowchart LR A["👤 User"] --> B["⚛️ React Frontend"] B --> C["🌐 Axios API Requests"] C --> D["🚀 Express.js Backend"] D --> E["🧩 Controllers"] E --> F["📦 Mongoose Models"] F --> G["🍃 MongoDB Atlas"] G --> H["📤 JSON Response"] H --> I["🔄 React State Update"] I --> J["🖥️ Updated UI"]

⚙️ Request Lifecycle

Step| Description 👤 1. User Interaction| The user creates, edits, deletes, or schedules a task from the React frontend. 🌐 2. API Communication| Axios sends an HTTP request to the Express backend API. 🚀 3. Route Handling| Express routes forward the request to the appropriate controller. 🧩 4. Business Logic| Controllers validate input, apply business rules, and prepare database operations. 📦 5. Database Layer| Mongoose communicates with MongoDB Atlas to store or retrieve application data. 📤 6. Server Response| The backend returns a JSON response containing the requested or updated data. 🔄 7. UI Update| React updates the application state and refreshes the interface instantly.

📂 Developer Workflow

Fork Repository │ ▼ Clone Repository │ ▼ Install Dependencies │ ▼ Configure Environment Variables │ ▼ Start Backend Server │ ▼ Start Frontend Server │ ▼ Build • Test • Contribute 🚀

💡 Why This Diagram?

🚀 Helps first-time contributors understand the project architecture.
📖 Provides a clear overview of the frontend → backend → database workflow.
🛠️ Makes debugging and feature development easier.
🤝 Improves onboarding for GSSoC and open-source contributors.
📚 Serves as a quick reference for the application's request lifecycle.

⚡ Quick Start

Prerequisites: Node.js v18+, npm v9+, a free MongoDB Atlas account

1. Clone the repository

git clone https://github.com/aryandas2911/DailyForge.git
cd DailyForge

2. Set up the Backend

cd backend
npm install

Create your .env file from the given template (see the Environment Variables section below):

# macOS / Linux
cp .env.example .env

# Windows (Command Prompt)
copy .env.example .env

# Windows (PowerShell)
Copy-Item .env.example .env

Then fill in your values (see the next section for what each variable means).

⚠️ Local dev note: The backend CORS origin is already configured for both the deployed frontend (https://dailyforge-frontend-lhjq.onrender.com) and local development (http://localhost:5173) in backend/src/server.js. No changes are needed for local development.

Start the backend dev server:

npm run dev

✅ Server should start at http://localhost:5000

3. Set up the Frontend

Open a new terminal, then:

cd frontend
npm install

💡 Local dev note: To point the frontend to your local backend, copy frontend/.env.example to frontend/.env and ensure VITE_API_URL is set to http://localhost:5000/api.

Start the frontend dev server:

npm run dev

✅ App should open at http://localhost:5173

✅ You're ready!

Open http://localhost:5173, sign up for an account, and start building your routines.

🔐 Environment Variables

Backend — `backend/.env`

Copy the provided template to get started. Never commit the .env to git.

PORT=5000
MONGO_URI=your_mongodb_atlas_connection_string
JWT_SECRET=your_super_secret_key_here
#CLIENT_ORIGIN=your_deployed_frontend_url

Variable	Required	Description
`PORT`	✅	Port on which the Express server runs (default: `5000`)
`MONGO_URI`	✅	Full MongoDB Atlas connection string — get it from your Atlas cluster's "Connect" menu
`JWT_SECRET`	✅	Secret key for signing JWTs — use any long, random string (e.g., `openssl rand -hex 32`)
`CLIENT_ORIGIN`	⬜	(Optional) Allowed CORS origin for API requests. Set this to your production frontend URL (e.g., `https://dailyforge-frontend-lhjq.onrender.com`). If not set, it defaults to `http://localhost:5173` for local development.

How to get MONGO_URI:

Log into MongoDB Atlas
Create a free M0 cluster (if you haven't)
Click Connect → Connect your application → Copy the connection string
Replace <password> with your DB user's password

Frontend — `frontend/.env`

Copy the provided .env.example to a new file named .env.

Variable	Required	Description
`VITE_API_URL`	✅	Base URL for frontend API requests, usually `http://localhost:5000/api` in local development.
`VITE_FIREBASE_API_KEY`	✅	Firebase client API key used by Firebase SDK for authentication.
`VITE_FIREBASE_AUTH_DOMAIN`	✅	Firebase Auth domain for your project (e.g. `your-project.firebaseapp.com`).
`VITE_FIREBASE_PROJECT_ID`	✅	Firebase project identifier used by the frontend and backend.
`VITE_FIREBASE_STORAGE_BUCKET`	✅	Firebase storage bucket name for your project (even if storage is not used directly).
`VITE_FIREBASE_MESSAGING_SENDER_ID`	✅	Firebase messaging sender ID required for client configuration.
`VITE_FIREBASE_APP_ID`	✅	Firebase app ID for the registered web app.

Running locally? Update VITE_API_URL in your local .env file to http://localhost:5000/api/.

Note: For Firebase credential values, see the existing Google Authentication Setup section below.

🌐 Google Authentication Setup

DailyForge supports Google Authentication via Firebase. Follow these steps to configure and enable Google Sign-In:

1. Firebase Console Setup

Go to the Firebase Console and click Add project to create a new project.
Once the project is created, click the Web icon (</>) on the Project Overview page to register a new Web App.
Copy the firebaseConfig object containing the API key, app ID, etc.
Go to Build → Authentication in the left sidebar and click Get Started.
Under the Sign-in method tab, click Add new provider and select Google.
Enable the provider, configure your support email, and click Save.

2. Environment Variables Configuration

To enable the frontend and backend integration, copy the configuration values into your respective .env files:

Frontend — `frontend/.env`

Append your Firebase client configuration to your local .env file:

# Firebase Client configuration
VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
VITE_FIREBASE_APP_ID=your_app_id

Backend — `backend/.env`

Add your Firebase Project ID to secure RS256 token verification:

# Firebase verification configuration
FIREBASE_PROJECT_ID=your_project_id

🧩 REST API Reference

Base URL: /api

JWT Authorization header:

Authorization: Bearer <token>

Authentication

Method	Endpoint	Auth Required	Description
POST	`/api/auth/signup`	No	Register a new user
POST	`/api/auth/login`	No	Login with email and password
POST	`/api/auth/google-login`	No	Login using Google authentication
GET	`/api/auth/user`	Yes	Get the current authenticated user
PUT	`/api/auth/update-profile`	Yes	Update the current user's profile
POST	`/api/auth/logout`	Yes	Log out the current user

Tasks

Method	Endpoint	Auth Required	Description
POST	`/api/tasks`	Yes	Create a new task
GET	`/api/tasks`	Yes	Get all tasks for the authenticated user
PUT	`/api/tasks/:id`	Yes	Update a task by ID
DELETE	`/api/tasks/:id`	Yes	Delete a task by ID

Routines

Method	Endpoint	Auth Required	Description
POST	`/api/routines`	Yes	Create a new routine
GET	`/api/routines`	Yes	Get all routines for the authenticated user
PUT	`/api/routines/:id`	Yes	Update a routine by ID
DELETE	`/api/routines/:id`	Yes	Delete a routine by ID

Analytics

Method	Endpoint	Auth Required	Description
GET	`/api/analytics`	Yes	Get analytics/statistics for the authenticated user

🔄 System Flow Overview

This section shows how the frontend, API requests, backend, and database interact during common actions like creating a task or scheduling a routine.

1. User Action (Frontend)

The user creates a task or drags it into the routine grid.
The React UI handles this using components in frontend/src/components/ (e.g. TaskCard, RoutineGrid).
State is managed via Context API / hooks.

2. API Request

The frontend sends an HTTP request (Axios/fetch) to the backend:
- POST /api/tasks for new tasks
- POST /api/routines for routine changes
Requests include the necessary payload (task details, routine metadata, user ID).

3. Backend Processing

An Express route receives the request in backend/routes/.
The corresponding controller (e.g. taskController.js, routineController.js) validates and processes the data.
Business logic (conflicts, schedule rules, etc.) is handled here before hitting the database.

4. Database Layer

Mongoose models (e.g. Task.js, Routine.js, User.js) define the schema.
MongoDB stores tasks, routines, and user data.
On success, the database returns the updated/created documents to the backend.

5. Response to Frontend

The backend returns a JSON response with the latest task/routine state.
The React app updates UI state (Context/hooks), so the grid and lists stay in sync with the backend.

💡 Why this section exists

Helps new contributors see the full end-to-end flow quickly.
Makes it easier to debug issues (know where to look: component → API → controller → model).
Improves onboarding for new contributors (e.g. GSSoC participants).

❓ FAQ

Why is the app slow on first load?

The project is deployed on Render’s free tier. Services may go to sleep after inactivity, so the first request can take around 30–60 seconds to respond.

Which Node.js version should I use?

Recommended versions:

Node.js v18+
npm v9+

Check your installed versions:

node -v
npm -v

Do I need MongoDB installed locally?

No. DailyForge uses MongoDB Atlas, so you only need a free Atlas account and a valid connection string.

Why am I getting CORS errors during local development?

Make sure:

Your backend is running on http://localhost:5000. The server already allows http://localhost:5173 by default — no code changes needed.
Your frontend .env contains:

VITE_API_URL=http://localhost:5000/api

If you are still seeing CORS errors, set CORS_ORIGIN=http://localhost:5173 in your backend/.env and restart the server.

Where should I add environment variables?

Backend variables go inside:

/backend/.env

Frontend variables go inside:

/frontend/.env

🛠 Troubleshooting

Issue	Common Cause	Quick Fix
CORS Errors	`CLIENT_ORIGIN` or `FRONTEND_URL` mismatch in backend `.env`.	Ensure backend `.env` has correct origin (e.g., `http://localhost:5173`). Restart the server after changes.
MongoDB Connection Error	Incorrect `MONGO_URI`, wrong credentials, or IP not whitelisted.	Verify `MONGO_URI`, replace `<password>` with correct DB password, and whitelist `0.0.0.0/0` in MongoDB Atlas Network Access.
Frontend Cannot Connect to Backend	Backend not running, wrong API URL, or port mismatch.	Set `VITE_API_URL=http://localhost:5000/api` and ensure backend is running on `http://localhost:5000`.
JWT Authentication Errors	Missing or incorrect `JWT_SECRET`.	Add `JWT_SECRET` in `backend/.env` and restart the backend server.
Dependency Conflicts	React 19 / Tailwind v4 strict peer dependency issues.	Run `npm install --legacy-peer-deps` in both frontend and backend directories.
Glitchy Drag-and-Drop	Browser extensions interfering with DOM events.	Test the app in Incognito mode or disable extensions.
Port Already in Use	Another process is using the same port.	Stop the running process or change `PORT` in `.env` (e.g., `PORT=5001`).
Dependency Installation Issues	Corrupted `node_modules` or lock file conflicts.	Run `rm -rf node_modules package-lock.json && npm install`.

🤝 Contribution Guidelines

We love contributions! DailyForge is actively participating in GSSoC 2026 and welcomes contributors of all experience levels.

📄 Read the full guidelines: CONTRIBUTING.md

Quick Contribution Flow

1. Pick an issue

Browse open issues
Look for good first issue if you're new
Comment on the issue to get it assigned before starting work

2. Fork & branch

git clone https://github.com/<your-username>/DailyForge.git
cd DailyForge
git checkout -b <type>/<short-description>

Branch naming convention:

Type	Example
New feature	`feature/add-dark-mode`
Bug fix	`fix/login-redirect-loop`
Documentation	`docs/update-readme`
Refactor	`refactor/task-hook-cleanup`

3. Make your changes

Keep changes focused — one issue per PR
Follow the existing code style
Test your changes locally before pushing

4. Open a Pull Request

Fill out the PR template completely
Link the issue it resolves using Closes #<issue-number>
Request a review from a maintainer

⚠️ PRs without a linked issue or description will not be reviewed.

🏷 Issue Guidelines

We use labels to organize work. Here's what they mean:

Label	Meaning
`good first issue`	Small, well-scoped tasks — perfect for first-time contributors
`bug`	Something is broken or behaving incorrectly
`feature`	New functionality to be added
`documentation`	Improvements to README, guides, or inline comments
`help wanted`	Maintainers need external input or assistance
`testing`	Adding or improving test coverage

Tips for new contributors:

Start with good first issue — they're designed to be approachable
Don't hesitate to ask questions in the issue comments
One issue at a time — don't take on multiple issues until your first PR is merged

📸 Screenshots

🔐 Signup Page

📊 Dashboard Overview

📋 Tasks Page

🗓️ Drag-and-Drop Routine Builder

🔄 Project Setup Flow Diagram

graph TD
    A[User Opens App] --> B[React Frontend]
    B --> C[API Request]
    C --> D[Express Server]
    D --> E[Controllers]
    E --> F[MongoDB Database]
    F --> G[JSON Response]
    G --> H[React State Update]
    H --> I[UI Re-render]

🏗️ System Architecture

Layer	Technology	Responsibility
Frontend	React + Vite	User Interface
Backend	Express.js	API Services
Database	MongoDB	Data Storage
Authentication	Firebase	User Login
State Management	Context API	UI State

📂 Project Structure

frontend/
├── src/
│   ├── components/
│   ├── pages/
│   ├── hooks/
│   └── context/

backend/
├── controllers/
├── routes/
├── models/
└── middleware/

⚡ Request Lifecycle

User performs an action.
React captures the event.
API request is sent.
Express routes receive the request.
Controller processes logic.
Database is queried.
Response is returned.
React updates the interface.

🚀 Contribution Workflow

graph LR
    A[Fork Repository]
    B[Create Branch]
    C[Make Changes]
    D[Commit Changes]
    E[Push Branch]
    F[Open Pull Request]

    A --> B --> C --> D --> E --> F

🛠 Development Workflow

git clone repository
npm install
npm run dev

💡 Why This Section Matters

Helps new contributors understand the codebase.
Makes onboarding easier.
Improves debugging.
Explains frontend and backend interaction.
Reduces confusion for first-time contributors.
Improves GSSoC contributor experience.

📬 Getting Help

Need help with setup or contributing?

You can:

Open a GitHub Issue
Comment on an existing issue for clarification
Contact the maintainer through the email provided below

Before asking for help:

Read the setup instructions carefully
Check the FAQ and Troubleshooting sections
Search existing GitHub issues first

We welcome contributors of all experience levels 🚀

📬 Contact & Community

💖 Contributors

Thanks to all the amazing people who contribute to DailyForge 🚀

⭐ Project Support

Have questions, ideas, or want to connect with other contributors?

Channel	Link
📧 Email	aryandas2911@gmail.com
🐛 Issues	GitHub Issues

Built with ❤️ for GSSoC 2026

If DailyForge helped you, consider giving it a ⭐ — it helps more contributors find the project!

Name		Name	Last commit message	Last commit date
Latest commit History 301 Commits
.github		.github
Screenshots		Screenshots
backend		backend
frontend		frontend
src/components		src/components
.editorconfig		.editorconfig
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
docker-compose.yml		docker-compose.yml
issues.json		issues.json

Folders and files

Latest commit

History

Repository files navigation

🔨 DailyForge

Build routines. Forge habits. Own your week.

📑 Table of Contents

🚀 Project Overview

🌐 Live Demo

✨ Features

🔐 Authentication

📋 Task Management

🗓️ Routine Builder

📊 Dashboard

♻️ Routine Templates

🏗 Tech Stack

Frontend

Backend

📂 Project Structure

⚡ Quick Start

1. Clone the repository

2. Set up the Backend

3. Set up the Frontend

✅ You're ready!

🔐 Environment Variables

Backend — backend/.env

Frontend — frontend/.env

🌐 Google Authentication Setup

1. Firebase Console Setup

2. Environment Variables Configuration

Frontend — frontend/.env

Backend — backend/.env

🧩 REST API Reference

Authentication

Tasks

Routines

Analytics

🔄 System Flow Overview

1. User Action (Frontend)

2. API Request

3. Backend Processing

4. Database Layer

5. Response to Frontend

💡 Why this section exists

❓ FAQ

Why is the app slow on first load?

Which Node.js version should I use?

Do I need MongoDB installed locally?

Why am I getting CORS errors during local development?

Where should I add environment variables?

🛠 Troubleshooting

🤝 Contribution Guidelines

Quick Contribution Flow

🏷 Issue Guidelines

📸 Screenshots

🔐 Signup Page

📊 Dashboard Overview

📋 Tasks Page

🗓️ Drag-and-Drop Routine Builder

🔄 Project Setup Flow Diagram

🏗️ System Architecture

📂 Project Structure

⚡ Request Lifecycle

🚀 Contribution Workflow

🛠 Development Workflow

💡 Why This Section Matters

📬 Getting Help

You can:

Before asking for help:

📬 Contact & Community

💖 Contributors

⭐ Project Support

About

Resources

License

Code of conduct

Contributing

Security policy

Uh oh!

Stars

Backend — `backend/.env`

Frontend — `frontend/.env`

Frontend — `frontend/.env`

Backend — `backend/.env`

Packages