StudioTrack is a full-stack production management platform designed for small game studios. It helps teams track game projects, features, bugs, milestones, builds, team roles, comments, and production activity from one centralized workspace.
This project was built as a portfolio-grade SaaS application to demonstrate practical frontend, backend, database, authentication, role management, production workflow design, and game-development domain knowledge.
- Register and login with JWT authentication.
- Password hashing with bcrypt.
- Protected app routes.
- Studio workspace created during registration.
- Current user context loaded from
/api/auth/me.
- Create, edit, delete, and view game projects.
- Track genre, engine, platform, phase, status, start date, and target release date.
- Project details page with links to related production modules.
- Kanban-style feature workflow.
- Categories for combat, movement, UI/UX, economy, AI, level design, audio, narrative, systems, and technical work.
- Priority, status, design notes, and technical notes.
- Comments on feature records.
- Bug table and details drawer.
- Severity, status, reproduction steps, expected result, actual result, and assignment.
- Comments on bug records.
- Milestone timeline for prototype, vertical slice, alpha, beta, release candidate, and launch planning.
- Build tracker with platform, version, changelog, known issues, and QA status.
- Team management page.
- Role-based access model:
- Owner
- Producer
- Designer
- Developer
- QA
- Viewer
- Demo invite flow for portfolio testing.
- Activity feed for production changes.
- Tracks creation, updates, deletion, comments, team invitations, role changes, and removals.
- Dashboard uses recent activity from real backend data when available.
- Production health summary.
- Project, milestone, feature, bug, and build statistics.
- Feature workflow chart.
- Bug severity chart.
- Upcoming deadlines.
- Recent activity.
- React
- Vite
- Tailwind CSS
- React Router DOM
- Zustand
- Axios
- Recharts
- Lucide React
- Node.js
- Express.js
- Prisma ORM
- PostgreSQL
- JWT
- bcryptjs
- Zod
- Morgan
studiotrack/
├── client/
│ ├── src/
│ │ ├── app/
│ │ ├── components/
│ │ ├── features/
│ │ ├── layouts/
│ │ ├── lib/
│ │ ├── pages/
│ │ ├── routes/
│ │ └── styles/
│ └── package.json
│
├── server/
│ ├── prisma/
│ │ ├── schema.prisma
│ │ └── seed.js
│ ├── src/
│ │ ├── config/
│ │ ├── controllers/
│ │ ├── middleware/
│ │ ├── routes/
│ │ ├── services/
│ │ ├── utils/
│ │ └── validators/
│ └── package.json
│
├── docs/
│ ├── deployment.md
│ ├── portfolio-case-study.md
│ └── screenshots.md
└── README.mdcd C:\DEV\WEB\studiotrackCreate a local PostgreSQL database named:
studiotrackCreate server/.env:
DATABASE_URL="postgresql://postgres:YOUR_PASSWORD@localhost:5432/studiotrack?schema=public"
JWT_SECRET="studiotrack_super_secret_123456789"
JWT_EXPIRES_IN="7d"
PORT=5000
CLIENT_URL="http://localhost:5173"Create client/.env:
VITE_API_URL="http://localhost:5000/api"cd server
npm install
cd ../client
npm installcd ../server
npx prisma migrate dev
npx prisma generate
npm run db:seednpm run devThe API runs on:
http://localhost:5000Health check:
http://localhost:5000/api/healthOpen another terminal:
cd C:\DEV\WEB\studiotrack\client
npm run devThe frontend runs on:
http://localhost:5173All seeded accounts use the same password:
Demo123456| Role | Purpose | |
|---|---|---|
| Owner | demo@studiotrack.dev |
Full workspace management |
| Producer | producer@studiotrack.dev |
Production oversight |
| Designer | designer@studiotrack.dev |
Feature planning workflow |
| Developer | developer@studiotrack.dev |
Features, bugs, and builds |
| QA | qa@studiotrack.dev |
Bug verification workflow |
| Viewer | viewer@studiotrack.dev |
Read-only project visibility |
| Module | Base Route |
|---|---|
| Health | /api/health |
| Auth | /api/auth |
| Dashboard | /api/dashboard |
| Projects | /api/projects |
| Features | /api/features |
| Bugs | /api/bugs |
| Milestones | /api/milestones |
| Builds | /api/builds |
| Team | /api/team |
| Activity | /api/activity |
| Comments | /api/comments |
cd client
npm run buildcd server
npm startStudioTrack is best presented as a full-stack game production management SaaS.
It is suitable for showcasing:
- Full-stack product architecture.
- Game production workflow design.
- Authentication and protected routes.
- Relational data modeling.
- CRUD workflow implementation.
- Role-based access design.
- Dashboard analytics.
- Comments and activity tracking.
- Domain-specific tools for game teams.
This project is a portfolio-grade full-stack application.
It does not include:
- Production deployment configuration by default.
- Real payment or billing.
- Real-time collaboration sockets.
- File upload storage.
- External issue-tracker integrations.
- Production-grade email invitation delivery.
The current scope focuses on core game-production workflows, authenticated CRUD operations, relational data, and dashboard visibility.
- Login/register flow.
- Dashboard overview.
- Projects list and project details.
- Feature Kanban board.
- Bug tracker table and details drawer.
- Milestone timeline.
- Build tracker.
- Team roles page.
- Activity feed.
- Comments panel.
StudioTrack demonstrates the ability to design and build a domain-specific full-stack application for game production teams. It covers authentication, relational data modeling, CRUD workflows, role-based access, dashboard analytics, comments, activity tracking, and responsive UI implementation.
Recommended portfolio description:
StudioTrack is a full-stack game production management SaaS built with React, Node.js, Express, Prisma, and PostgreSQL. It helps small game studios manage projects, features, bugs, milestones, builds, team roles, comments, and production activity from one dashboard.