DevFlow

A full-stack developer productivity platform built to help developers log daily work, track progress, and stay consistent.

Log your work. Track your progress. Stay consistent.

Check it out!
View Code · Report Bug · Request Feature

Frontend deployed on Vercel and backend deployed on Render.

---

Table of Contents

1. About The Project
   • Built With
   • Features
   • Deployment
2. Project Structure
3. Getting Started
   • Prerequisites
   • Installation
   • Running the Project
4. Environment Variables
5. API Endpoints
6. Future Improvements
7. Author

About The Project

DevFlow is a developer productivity and progress tracking application built using the MERN stack. It helps developers maintain a record of their daily work, monitor progress over time, and build consistency in their development workflow.

Instead of keeping scattered notes across different apps or losing track of completed work, DevFlow gives users a focused place to:

• Log daily development activity
• Review previous entries
• Track work history over time
• Build better documentation habits

This project demonstrates a modern full-stack architecture with a React frontend, Express/Node.js backend, and MongoDB database integration.

Built With

Frontend

• React
• Vite
• JavaScript
• CSS

Backend

• Node.js
• Express.js
• Mongoose

Database

• MongoDB

Other Tools

• Axios
• JWT
• Nodemon
• dotenv

Features

• Daily Development Logging

Users can create daily development logs to document what they worked on and keep a record of their progress.

Key highlights:

• Add development entries
• Save logs to the database
• Keep daily work organized

---

• Saved Entries Dashboard

Users can view previously saved entries through a clean dashboard interface.

Key highlights:

• Review past work
• Track development history
• Manage saved logs

---

• Full-Stack MERN Architecture

DevFlow is structured as a complete full-stack application with separate client and server layers.

Key highlights:

• REST API integration
• MongoDB data persistence
• Frontend and backend separation
• Scalable project structure

## Deployment

DevFlow is deployed as a full-stack application using separate services for the frontend and backend:

• Frontend: deployed on Vercel
• Backend: deployed on Render

Live Application:
https://dev-flow-puce.vercel.app/

Project Structure

devflow
│
├── client/                # React frontend
│   ├── src/
│   ├── public/
│   └── vite.config.js
│
├── server/                # Node + Express backend
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   ├── middleware/
│   └── server.js
│
└── screenshots/           # README screenshots

Getting Started

To get a local copy up and running, follow these simple steps.

---

Prerequisites

Make sure you have the following installed:

• Node.js
• npm
• MongoDB (local or Atlas)

Download Node.js here:

https://nodejs.org/

---

---

Installation

Clone the repository

git clone https://github.com/jabhandari/devflow.git
cd devflow

Install backend dependencies

cd server
npm install

Install frontend dependencies

cd ../client
npm install

---

Running the Project

Start the backend

cd server
npm run dev

Start the frontend

cd client
npm run dev

Open:

http://localhost:5173

---

Environment Variables

Create a .env file inside server:

MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_secret_key
PORT=5000

---

API Endpoints

Authentication

Register user

POST /api/auth/register

Login user

POST /api/auth/login

---

Entries

Get all entries

GET /api/entries

Create entry

POST /api/entries

Delete entry

DELETE /api/entries/:id

---

Future Improvements

Potential improvements:

• Edit entries
• Markdown support
• Tagging system
• Developer productivity analytics
• CI/CD pipeline
• Docker deployment

---

Author

Juhi Bhandari
Software Developer
Toronto, Canada

GitHub: https://github.com/jabhandari