What I Built
I built DevBoard, a full-stack developer productivity dashboard designed to help users manage projects, track tasks, and measure time spent on work in one clean interface.
The idea behind DevBoard was simple: most developers juggle projects, task lists, timers, and analytics across multiple tools, which makes personal productivity fragmented. I wanted to create a single app that combines project management, task tracking, time logging, and progress analytics while also showcasing practical full-stack engineering skills.
DevBoard is built as both a useful productivity tool and a portfolio project that demonstrates real-world implementation of React SPA architecture, REST API design, PostgreSQL data modeling, OAuth-based authentication, and protected backend routes.
Demo
Live project: https://devboard-azure.vercel.app/login
Screenshots:
You can use the deployed app to explore the complete workflow: sign in with Google, create projects, add tasks, track time per task, and view analytics for time spent across tasks.
Code
GitHub repository: https://github.com/JAYAPRAKASHGUJJARI/devboard/
The repository contains both the frontend and backend codebase, organized as a full-stack application with separate folders for each layer.
How I Built It
DevBoard was built using a full-stack architecture with a React frontend and a Node.js/Express backend connected to PostgreSQL.
Frontend
The frontend was developed with React 19, Vite, React Router v7, Axios, and @react-oauth/google. I structured the app as a single-page application with protected routes, so authenticated users can move between the dashboard, project page, and analytics page without unnecessary page reloads.
The main screens are:
Login page, where users sign in with Google.
Dashboard, where users can create and manage projects.
Project page, where users can create tasks, update task status, and track time.
Analytics page, where users can review time spent on tasks.
I focused on keeping the UI clean and practical, because productivity tools work best when the interface stays lightweight and easy to scan.
Authentication
Authentication is handled using Google OAuth 2.0 on the frontend and JWT on the backend.
The flow works like this:
The user clicks Sign in with Google.
Google returns a signed ID token to the browser.
The frontend sends that token to the backend through /auth/google.
The backend verifies the token using google-auth-library.
The backend creates or finds the user record in PostgreSQL.
The backend issues its own JWT.
The frontend stores the JWT and sends it in the Bearer header for protected API calls.
I chose this design because it avoids storing passwords entirely and keeps authentication secure and modern.
Backend
The backend was built with Node.js, Express 5, jsonwebtoken, cors, dotenv, and google-auth-library.
I organized the backend into focused route modules:
auth.js for Google sign-in and JWT issuance.
projects.js for project CRUD.
tasks.js for task CRUD and task status updates.
timer.js for start/stop timer behavior and time logs.
middleware/auth.js for protecting private routes with JWT verification.
This structure keeps the code modular and easier to maintain as the app grows.
Database Design
I used PostgreSQL with a schema designed around the core product flow.
The main tables are:
users for authenticated user profiles.
projects for user-owned projects.
tasks for task details, status, and timer state.
time_logs for recording task timing sessions.
The schema is intentionally normalized so each table has a clear purpose. That made it easier to enforce relationships between users, projects, and tasks while also supporting analytics based on logged time.
Time Tracking
One of the most important features in DevBoard is the built-in time tracker.
Instead of only storing task status, the app also tracks how long a user spends on each task. That gives a more realistic view of work progress and helps users understand where their time actually goes. The time_logs table stores individual sessions with start and stop timestamps, which can later be used to calculate total duration per task.
This feature was especially important because it turns the app from a basic task manager into a more meaningful developer productivity tool.
Deployment
The app is deployed using a modern full-stack setup:
Frontend: Vercel
Backend: Render
Database: Neon PostgreSQL
I separated the deployment layers so the frontend can stay fast and globally accessible while the backend and database handle API and data logic independently. This also made environment configuration cleaner for local development and production.
Prize Categories
This project is not specifically built for Snowflake, Solana, ElevenLabs, or Google AI, so I am not submitting it under a prize category.
Top comments (2)
very wonderful app for developers very useful and handy should improve db for more users to handle good idea
thank you @deepak it means a lot