OpsFlow

OpsFlow is a full-stack work management platform built to help teams organize tasks, track execution, and monitor productivity from a single workspace. It combines role-based task operations, a Kanban-style board, manager visibility into team activity, and a clean dashboard experience for day-to-day operations.

This repository contains:

• frontend/: React application for the product UI
• backend/: Express + MongoDB API for auth, tasks, and activity logs

Why OpsFlow

Teams usually split work across chats, spreadsheets, task trackers, and status updates. OpsFlow brings that workflow together in one place so teams can:

• create and assign tasks with ownership
• move work across stages visually
• control access using roles
• observe work activity through manager timelines
• keep task execution and oversight inside one product

Core Features

• JWT-based authentication with sign up and sign in flows
• Role-based access for admin, manager, and user
• Protected frontend routes for authenticated users
• Task board with drag-and-drop status updates
• Task creation and deletion controls for privileged roles
• Task visibility filtered by logged-in user role
• Activity log ingestion for timeline generation
• Manager/admin dashboard with employee work timeline view
• Dedicated product pages for analytics, workflows, team, settings, and about

Product Walkthrough

Landing Experience

The home page introduces OpsFlow as a modern work management platform and routes users into sign in or product discovery.

Authentication

Users can:

• create an account with first name, last name, username, email, and password
• log in using either username or email
• receive a JWT token that is stored in local storage

Dashboard

After login, users land on a protected dashboard.

• Regular users see a personal productivity notice
• Admins and managers can select employees and monitor a generated work timeline
• Timeline data refreshes automatically on an interval

Tasks

The tasks module is the main execution space:

• tasks are displayed in todo, progress, and done columns
• cards can be dragged between columns to update status
• admins and managers can create new tasks
• task deletion is exposed from the task modal
• backend logs task status changes into the activity system

Activity Monitoring

OpsFlow stores user activity logs and converts them into readable timeline events such as:

• user logged in
• started working on a task
• idle periods
• task status updates
• task completion summaries

This gives managers a lightweight monitoring view without needing a separate reporting tool.

Tech Stack

Frontend

• React
• React Router
• Axios
• @hello-pangea/dnd
• Custom CSS

Backend

• Node.js
• Express
• MongoDB
• Mongoose
• JWT
• bcrypt

Architecture Overview

Frontend (React)
  -> Auth screens
  -> Protected dashboard
  -> Task board / analytics / team / workflows
  -> Axios client with JWT interceptor

Backend (Express API)
  -> /user
  -> /tasks
  -> /activity-logs
  -> auth middleware
  -> controllers
  -> MongoDB models

Database (MongoDB)
  -> users
  -> tasks
  -> activity logs

Folder Structure

opsflow/
|-- backend/
|   |-- api/
|   |-- Controllers/
|   |-- Models/
|   |-- middlewares/
|   |-- service/
|   |-- connect.js
|   `-- index.js
|-- frontend/
|   |-- public/
|   `-- src/
|       |-- api/
|       |-- components/
|       |-- context/
|       |-- css/
|       |-- compocss/
|       `-- pages/
`-- README.md

API Modules

Auth

• POST /user/signup
• POST /user/signin
• GET /user/me
• GET /user/all

Tasks

• POST /tasks
• GET /tasks
• PUT /tasks/:id
• DELETE /tasks/:id

Activity Logs

• POST /activity-logs
• GET /activity-logs/user/:userId
• GET /activity-logs/timeline/:userId

Role Permissions

Role	Key Capabilities
admin	View all tasks, create tasks, delete tasks, access manager-style monitoring
manager	Create tasks, monitor employee timeline activity
user	Sign in, view assigned/created tasks, update tasks they own or are assigned

Local Setup

1. Clone the repository

git clone <your-repo-url>
cd opsflow

2. Configure backend environment

Create backend/.env with at least:

JWT_SECRET=your_super_secret_key
PORT=5000

Note:

• the current backend connection string is hardcoded in backend/index.js
• MongoDB is expected at mongodb://127.0.0.1:27017/OpsFlow

3. Install dependencies

cd backend
npm install

cd frontend
npm install

4. Start the backend

cd backend
node index.js

Optional during development:

npx nodemon index.js

5. Start the frontend

cd frontend
npm start

6. Open the app

Frontend:

http://localhost:3000

Backend:

http://localhost:5000

Demo Flow

To test the main experience locally:

1. Create a user account from the sign-up page.
2. Log in from the sign-in page.
3. If you want manager-level capabilities, create a user with role manager or admin through the backend/API.
4. Open the tasks board and create tasks from a privileged account.
5. Drag tasks across columns to generate status updates.
6. Visit the dashboard and inspect timeline updates for tracked users.

Current Strengths

• clean separation between frontend and backend
• meaningful auth + authorization base
• task workflow already usable end to end
• activity timeline concept makes the product stand out from basic CRUD boards
• easy starting point for a SaaS-style team operations platform

Known Gaps / Improvement Opportunities

• MongoDB URL should move to environment variables instead of staying hardcoded
• backend scripts can be improved for easier development startup
• analytics, team, workflows, and settings pages are currently mostly UI-driven
• there are no automated tests yet
• some frontend pages use direct DOM event handling and can be refactored into idiomatic React form state
• role management and admin tooling can be expanded

Roadmap Ideas

• real analytics powered by stored task data
• comments and task discussion threads
• due date reminders and notifications
• workspace-level settings persistence
• activity heatmaps and employee productivity summaries
• workflow builder with custom status stages
• deployment-ready environment config and CI

Screenshots

Add screenshots here before pushing to GitHub:

![Home](./docs/home.png)
![Dashboard](./docs/dashboard.png)
![Tasks](./docs/tasks.png)

Contributing

If you want to improve OpsFlow:

1. Fork the repo
2. Create a feature branch
3. Make your changes
4. Test locally
5. Open a pull request

License

This project currently does not declare a custom project license. Add one before public distribution if needed.

---

Built for teams that want visibility, accountability, and smoother execution without juggling five different tools.