Navaneenth Maruthi & Rowan Lowden
The freelancer will be able to track clients, organize projects, log billable hours, and monitor their income without juggling multiple spreadsheets or tools. We use HTML5, CSS3, and vanilla JavaScript (ES6 modules) for the frontend, Node.js + Express for the backend, MongoDB for data storage
- 🔐 Secure authentication with bcrypt password hashing
- 🔑 Persistent login sessions stored in MongoDB
- 👤 Protected routes and user-specific data
- ✏️ Create, read, update, and delete projects
- 📅 Set project deadlines and track status
- 🏷️ Categorize by status (To-Do, Active, Paused, Completed)
- ⏱️ Log billable hours with detailed descriptions
- 🔗 Link time entries to specific projects
- 💰 Track billing status (Unpaid, Invoiced, Paid)
- ✏️ Edit and delete time entries as needed
- 📊 View total hours worked at a glance
- 📈 See project count and active projects
- 🎯 Monitor top 3 active projects with deadlines
- 💼 Centralized overview of freelance work
Frontend:
- HTML5, CSS3, Bootstrap 5
- Vanilla JavaScript (ES6 Modules)
Backend:
- Node.js + Express.js
- RESTful API architecture
- Native MongoDB driver (no Mongoose)
Database:
- MongoDB
- Session storage in MongoDB
DevOps & Infrastructure
- Docker - Container platform for MongoDB
Development Tools
- Nodemon - Auto-restart development server
- ESLint - Code linting and quality checks
- Prettier - Code formatting
- dotenv - Environment variable management
- Git - Version control
Step 1: Clone the Repository
git clone https://github.com/NavaneethMaruthi/FreelanceFlow.git
cd FreelanceFlowStep 2: Install Dependencies
npm installThis installs all required packages including Express, MongoDB driver, bcryptjs, express-session, and more
Step 3: Configure Environment Variables Create a .env file in the root directory:
touch .envAdd the following configuration to your .env file:
# MongoDB Connection for local connection
MONGO_URL=mongodb://localhost:27017
# Session Configuration
SESSION_SECRET=your-super-secret-key-change-this-in-production
# Cookie Settings
COOKIE_MAX_AGE=86400000
# Server Configuration
PORT=3000
NODE_ENV=development
Change NODE_ENV=production mongo_url to your mongodb Atlas
Step 4: Set Up MongoDB Using Local MongoDB
macOS: brew install mongodb-community Ubuntu/Debian: sudo apt-get install mongodb Windows: Download installer from mongodb.com
Step 5: Start Docker
Step 6: MongoDB Create New MongoDB connection and connect it (Make sure you make the changes in the code if you are using different names)
Step 5: Start the Application Run the development server:
npm startYou should see output similar to:
Starting FreelanceFlow backend...
✅ Connected to MongoDB
✅ Server running on http://localhost:3000
📝 Environment: development
📁 Serving frontend from /frontend
📂 Auth routes available at /api/auth
📂 Projects routes available at /api/projects
The application is now running at: http://localhost:3000
Rowan-- I used ChatGPT to help to explain some processes and break down topics I didn't understand like MongoDB and Docker and their role together, debugging the projects drop down on the time page, clarify express routes, help with mock data, and some other questions about the different tech stacks and how they worked together.
MIT License