8080.AI
DesignReqsTasksUser FlowArchitecture
Log inSign up for free

devforge

byGidiDev

# DevForge — Full Production Platform Build Prompt ## Project Vision DevForge is a gamified developer growth platform where developers forge real coding skill through ranked coding challenges, and get verified for hiring based on proven performance rather than a resume alone. Build the complete platform — ranked challenges AND verified hiring — as one cohesive production system, not split into phases. ## Tech Stack **Backend** - Django + Django REST Framework - PostgreSQL - JWT auth (`djangorestframework-simplejwt`) - `django-cors-headers`, `python-decouple`, `django-filter`, `Pillow`, `gunicorn` **Frontend** - React + Vite - Tailwind CSS - React Router - Axios with a JWT-aware interceptor (auto-attach access token, auto-refresh on expiry) **Deployment target** - Backend: Dockerized, host-agnostic (Railway/Render/VPS) - Frontend: static build, deployable to Vercel - Fully environment-based config — no hardcoded URLs, keys, or secrets anywhere ## Core Features **Developer side** 1. Registration & login (JWT) 2. Profile with score, rank, bio, avatar 3. Challenge catalog — browsable, filterable by category and difficulty 4. Challenge detail page 5. Submission flow — attempt a challenge, get scored, see pass/fail 6. Automatic rank recalculation on passed submissions (Django signal) 7. Leaderboard — ranked list of users by total score 8. Dashboard — rank, score, submission history 9. Verification status — once a developer crosses a defined threshold (e.g. passes N challenges at a minimum difficulty/rank), they become "Verified" **Employer / hiring side** 10. Employer registration & login (separate role from Developer) 11. Employer dashboard — post jobs, view applicants 12. Job postings — title, description, required verification level/category, salary range (optional) 13. Developers can browse jobs and apply (only if they meet the job's verification requirement, or apply anyway with a "below threshold" flag — your call, but be explicit about which) 14. Employers can browse/search verified developers directly (filter by rank, category strength, verification level) instead of waiting for applications 15. Application tracking — status per application (applied / viewed / shortlisted / rejected / hired) ## Data Model ``` Category - id (PK), name (unique) User (Django's built-in User model) - extended via Profile with a role distinguishing Developer vs Employer Profile - id (PK), user (OneToOne → User) - role (choices: developer / employer) - total_score (int, default 0), rank (int, default 0) - bio (text, optional), avatar (image, optional) - is_verified (bool, default False) - verification_level (choices: none / bronze / silver / gold — or similar tiering) Challenge - id (PK), title, description (text) - category (FK → Category, nullable, on_delete=SET_NULL) - difficulty (easy / medium / hard), points (int, default 10) - created_at (auto) Submission - id (PK) - user (FK → User, related_name="submissions") - challenge (FK → Challenge, related_name="submissions") - status (passed / failed / pending, default pending) - score_awarded (int, default 0) - submitted_at (auto, newest first) Company - id (PK), owner (FK → User, the employer account) - name, description, website (optional), logo (image, optional) Job - id (PK), company (FK → Company, related_name="jobs") - title, description - required_category (FK → Category, nullable) - required_verification_level (choices: none / bronze / silver / gold) - salary_range (optional, string or two int fields — your call) - created_at (auto), is_active (bool, default True) Application - id (PK) - job (FK → Job, related_name="applications") - developer (FK → User, related_name="applications") - status (choices: applied / viewed / shortlisted / rejected / hired, default applied) - applied_at (auto) ``` **Relationships:** Category 1:N Challenge · User 1:1 Profile · User 1:N Submission · Challenge 1:N Submission · Company 1:N Job · Job 1:N Application · User(developer) 1:N Application **Verification logic:** implement as a Django signal or service function triggered after rank recalculation — check the developer's passed-submission history against verification thresholds and update `Profile.is_verified` / `verification_level` accordingly. Keep thresholds as named constants/config, not magic numbers scattered in code. ## Backend API Requirements **Auth & profile** - `POST /api/auth/register/` (accepts role: developer or employer) - `POST /api/auth/login/`, `POST /api/auth/refresh/` - `GET/PATCH /api/profile/me/` **Challenges** - `GET /api/categories/` - `GET /api/challenges/` (filter by category, difficulty) - `GET /api/challenges/<id>/` - `POST /api/challenges/<id>/submit/` (authenticated, developer only) - `GET /api/leaderboard/` - `GET /api/profile/me/submissions/` **Hiring** - `POST /api/companies/` (employer only) - `GET/PATCH /api/companies/me/` - `POST /api/jobs/` (employer only) - `GET /api/jobs/` (public, filterable by category/verification level) - `GET /api/jobs/<id>/` - `POST /api/jobs/<id>/apply/` (developer only) - `GET /api/jobs/<id>/applications/` (employer only, own jobs) - `PATCH /api/applications/<id>/` (employer updates status) - `GET /api/developers/` (employer-facing search — filter by verification level, category strength, rank) ## Frontend Pages/Routes **Public** - `/` — landing page explaining both sides (developers + employers) - `/register` (role selection: developer or employer), `/login` - `/challenges`, `/challenges/:id` - `/leaderboard` - `/jobs`, `/jobs/:id` **Developer (protected)** - `/dashboard` — rank, score, submission history, verification status - `/applications` — jobs applied to, with status **Employer (protected)** - `/employer/dashboard` — company profile, posted jobs - `/employer/jobs/new`, `/employer/jobs/:id/applicants` - `/employer/developers` — search/browse verified developers - 404 page Role-based route protection is required: a developer should not be able to access `/employer/*` routes and vice versa. ## Non-negotiable engineering standards **Backend** - DRF conventions throughout: serializers, generic views/viewsets, explicit permission classes per role - Role-based permissions enforced server-side, not just hidden in the frontend UI - All secrets via `.env` / `python-decouple` - Rank recalculation and verification logic via Django signals, not inline in views - `requirements.txt` (pinned) and `.env.example` - Django admin registered for all models **Frontend** - Component-based structure, no monolithic files - Protected + role-based routes, redirecting appropriately - JWT stored securely (httpOnly cookie preferred; if localStorage, document the tradeoff) - Loading and error states on every API call - Responsive, mobile-first Tailwind - No hardcoded API URLs — `VITE_API_URL` env variable **Both** - `backend/` and `frontend/` as separate top-level folders, each independently runnable - Root `README.md` with full setup instructions for both - CORS configured for both local dev and the deployed frontend origin ## Deliverables 1. Full backend: models, migrations, all API endpoints, role-based permissions, admin registration 2. Full frontend: all routes/pages for both developer and employer sides, full API integration, role-based auth flow 3. `requirements.txt` and `package.json` with pinned/locked versions 4. `.env.example` for both backend and frontend 5. Dockerfile for backend (gunicorn, production-ready) 6. Root `README.md`: project overview, setup for both apps, migration steps, how to run both dev servers together Build this as one complete, cohesive platform — do not stub out or fake the hiring side. Prioritize working, idiomatic, secure code over cleverness. Ask before introducing any dependency not listed above.

/ — Landing Page/challenges/:id
/ — Landing Page

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 11

System Requirements Document for devforge

1. Introduction

DevForge is a gamified developer growth platform designed to enhance coding skills through ranked challenges and provide verified hiring opportunities based on performance rather than resumes. The platform targets developers seeking to improve their skills and employers looking to hire verified talent. It integrates both the challenge and hiring aspects into a single cohesive system.

2. System Overview

DevForge is a comprehensive platform that combines gamified coding challenges with a hiring verification system. It is built using Django for the backend and React for the frontend, ensuring a robust and scalable architecture. The platform supports two primary user roles: Developers and Employers, each with distinct functionalities and access rights. Developers can engage in coding challenges, track their progress, and achieve verification status, while Employers can post job listings and search for verified developers.

2a. Product Interpretation and Delivery Boundary

The platform is delivered as a full-stack application with a Dockerized backend and a static frontend deployable to Vercel. It adheres to strict role-based access controls, ensuring that Developers and Employers have access only to their respective functionalities. The system does not include adjacent capabilities such as external integrations or third-party services beyond those specified.

Page 2 of 11

2b. Source Content Inventory

Not applicable as no content_source directive was provided.

2c. Page Content and Component Coverage

/ — Landing Page

  • Information/State: Overview of platform features for developers and employers.
  • Primary Actions: Navigate to registration, login, challenges, and jobs.
  • Components: Hero section with holographic coding interface, feature highlights, call-to-action buttons.

/register

  • Information/State: Role selection (Developer or Employer).
  • Primary Actions: Complete registration form.
  • Components: Form fields for user details, role selection dropdown.

/login

  • Information/State: User authentication.
  • Primary Actions: Submit login credentials.
  • Components: Username and password fields, login button.

/challenges

  • Information/State: List of coding challenges.
  • Primary Actions: Filter challenges by category and difficulty, view challenge details.
  • Components: Challenge cards, filter controls.
Page 3 of 11

/challenges/:id

  • Information/State: Detailed view of a specific challenge.
  • Primary Actions: Submit challenge attempt.
  • Components: Challenge description, submission form, scoring feedback.

/leaderboard

  • Information/State: Ranked list of developers by score.
  • Primary Actions: View leaderboard.
  • Components: Leaderboard table, rank and score display.

/jobs

  • Information/State: List of job postings.
  • Primary Actions: Filter jobs by category and verification level, view job details.
  • Components: Job cards, filter controls.

/jobs/:id

  • Information/State: Detailed view of a specific job posting.
  • Primary Actions: Apply for job.
  • Components: Job description, application button.

/dashboard (Developer)

  • Information/State: Developer's rank, score, submission history, verification status.
  • Primary Actions: View personal dashboard.
  • Components: Score and rank display, submission history list, verification badge.
Page 4 of 11

/applications (Developer)

  • Information/State: List of jobs applied to with status.
  • Primary Actions: View application status.
  • Components: Application status table.

/employer/dashboard

  • Information/State: Employer's company profile and posted jobs.
  • Primary Actions: Manage company profile, view job postings.
  • Components: Company details, job management tools.

/employer/jobs/new

  • Information/State: Create a new job posting.
  • Primary Actions: Submit new job details.
  • Components: Job creation form.

/employer/jobs/:id/applicants

  • Information/State: List of applicants for a specific job.
  • Primary Actions: Manage applicant statuses.
  • Components: Applicant list, status update controls.

/employer/developers

  • Information/State: Search and browse verified developers.
  • Primary Actions: Filter and view developer profiles.
  • Components: Developer search filters, profile cards.
Page 5 of 11

404 Page

  • Information/State: Error message for non-existent routes.
  • Primary Actions: Navigate back to a valid page.
  • Components: Error message, navigation links.
Page 6 of 11

3. Functional Requirements

  1. As a Developer, I should be able to register and log in using JWT authentication.

    • Provenance: Core Features
    • Lifecycle: Registration and login process with role selection.
    • Observable Acceptance: Successful authentication and access to protected routes.

  2. As a Developer, I should be able to view and filter a catalog of coding challenges.

    • Provenance: Core Features
    • Lifecycle: Browsing and filtering challenges by category and difficulty.
    • Observable Acceptance: Display of filtered challenge list.

  3. As a Developer, I should be able to submit attempts for challenges and receive scores.

    • Provenance: Core Features
    • Lifecycle: Challenge attempt submission and scoring feedback.
    • Observable Acceptance: Display of pass/fail status and score.

  4. As a Developer, I should have my rank recalculated automatically upon passing submissions.

    • Provenance: Core Features
    • Lifecycle: Automatic rank update via Django signal.
    • Observable Acceptance: Updated rank on the dashboard.

  5. As a Developer, I should be able to view a leaderboard of top-ranked developers.

    • Provenance: Core Features
    • Lifecycle: Accessing the leaderboard page.
    • Observable Acceptance: Display of ranked developer list.

  6. As a Developer, I should be able to track my verification status based on challenge performance.

    • Provenance: Core Features
    • Lifecycle: Verification status update upon meeting thresholds.
    • Observable Acceptance: Display of verification badge on the dashboard.

  7. As an Employer, I should be able to register and log in to manage job postings.

    • Provenance: Core Features
    • Lifecycle: Employer registration and login process.
    • Observable Acceptance: Access to employer dashboard.

  8. As an Employer, I should be able to post jobs and view applicants.

    • Provenance: Core Features
    • Lifecycle: Job posting creation and applicant management.
    • Observable Acceptance: Display of job postings and applicant list.

  9. As an Employer, I should be able to search and browse verified developers.

    • Provenance: Core Features
    • Lifecycle: Developer search and profile viewing.
    • Observable Acceptance: Display of filtered developer profiles.

  10. As a Developer, I should be able to apply for jobs if I meet the verification requirements.

    • Provenance: Core Features
    • Lifecycle: Job application submission.
    • Observable Acceptance: Application status update.
Page 7 of 11

4. User Personas

  1. Developer

    • Responsibilities: Engage in coding challenges, track progress, achieve verification status, apply for jobs.
    • Outcomes: Improved coding skills, verified status, potential job opportunities.

  2. Employer

    • Responsibilities: Register and manage job postings, search for verified developers, manage applicants.
    • Outcomes: Efficient hiring process, access to verified developer talent.

5. Core User Flows

Developer Registration and Login

  1. Developer accesses the /register page.
  2. Developer selects the role and completes the registration form.
  3. Developer receives a confirmation and logs in via the /login page.
  4. Upon successful login, the developer is redirected to the /dashboard.

Challenge Participation

  1. Developer navigates to /challenges to view available challenges.
  2. Developer filters challenges by category and difficulty.
  3. Developer selects a challenge to view details on /challenges/:id.
  4. Developer submits an attempt and receives immediate feedback.
  5. Upon passing, the developer's rank is recalculated automatically.
Page 8 of 11

Job Application

  1. Developer browses job listings on /jobs.
  2. Developer filters jobs by category and verification level.
  3. Developer views job details on /jobs/:id.
  4. Developer applies for a job if verification requirements are met.
  5. Application status is tracked on /applications.

Employer Registration and Job Posting

  1. Employer accesses the /register page and selects the employer role.
  2. Employer completes registration and logs in via the /login page.
  3. Employer is redirected to /employer/dashboard.
  4. Employer creates a new job posting on /employer/jobs/new.
  5. Employer views applicants for a job on /employer/jobs/:id/applicants.

Developer Search by Employer

  1. Employer navigates to /employer/developers.
  2. Employer filters developers by verification level, category strength, and rank.
  3. Employer views detailed developer profiles.
Page 9 of 11

6. Visuals Colors and Theme

  • Muse: Gleb Kuznetsov
  • Palette:
    • Background: #000022
    • Surface: #111133
    • Text: #E0E0FF
    • Primary: #00FFFF
    • Accent: #FF00FF
    • Muted: #444466
  • Typography:
    • Headings: Space Grotesk, Bold, uppercase, wide tracking
    • Body: Orbitron
    • Scale: 64/32/20/16
  • Shape Language: Floating glass panels with thin luminous strokes
  • Layout: Full-bleed 3D-like backgrounds with floating UI elements
  • Imagery: Abstract 3D objects and particle fields

7. Signature Design Concept

The landing page features a full-bleed 3D scene with a holographic coding interface as the hero, surrounded by floating data elements on a deep navy ground. Accents of electric cyan and magenta glow create focal points. Interactive elements include a leaderboard with dynamic light sweeps and challenge cards that flip to reveal detailed information with parallax effects.

Page 10 of 11

8. Interaction Model & Motion Direction

  • Interaction Model: Animated
  • Motion Tempo: Cinematic
  • Hero Dimensionality: WebGL
  • Landing Hero Motion Brief: The focal subject is a holographic coding interface. The transformation involves interactive elements that respond to user input with light sweeps and parallax effects, creating an immersive experience. The first frame features a glowing coding interface with floating data elements. A reduced-motion state simplifies animations to subtle fades and transitions.

9. Non-Functional Requirements

  • Security: JWT stored securely, preferably in httpOnly cookies.
  • Performance: Responsive design with mobile-first approach using Tailwind CSS.
  • Scalability: Dockerized backend for host-agnostic deployment.
  • Maintainability: Component-based frontend structure, DRF conventions for backend.

10. Tech Stack

  • Backend: Django, Django REST Framework, PostgreSQL, JWT auth, django-cors-headers, python-decouple, django-filter, Pillow, gunicorn
  • Frontend: React, Vite, Tailwind CSS, React Router, Axios
  • Deployment: Docker, Vercel

11. Assumptions and Constraints

  • Developers and Employers are distinct roles with no overlap in access.
  • All configurations are environment-based with no hardcoded secrets.
  • The platform does not integrate with third-party services beyond specified tech stack.
Page 11 of 11

12. Glossary

  • JWT: JSON Web Token, used for secure authentication.
  • DRF: Django REST Framework, a toolkit for building Web APIs.
  • Vercel: A platform for frontend deployment.
  • Docker: A tool designed to create, deploy, and run applications by using containers.
/ — Landing Page design preview
/ — Landing Page: View platform overview
/register: Select developer role
/login: Log in
/dashboard: View rank and score
/challenges: Filter challenges
/challenges/:id: Submit challenge attempt
/leaderboard: View leaderboard
/jobs: Filter job listings
/jobs/:id: Apply for job
/applications: Track application status
/ — Landing Page design preview
/ — Landing Page: View platform overview
/register: Select developer role
/login: Log in
/dashboard: View rank and score
/challenges: Filter challenges
/challenges/:id: Submit challenge attempt
/leaderboard: View leaderboard
/jobs: Filter job listings
/jobs/:id: Apply for job
/applications: Track application status