SkillBridge – AI Career Platform (project: feral-skillbridge) is a modern, responsive full-stack web application for students and fresh graduates. It helps them discover jobs and internships, analyze their resumes with AI, receive AI job-match percentage scores based on their skills against job requirements, save jobs, apply, and track applications through Applied, Interview, Selected, and Rejected statuses on a personalized dashboard. Administrators operate a separate analytics dashboard and manage job listings, registered users, and job applications.
The product must feel like a real, production-ready SaaS product — not a static UI prototype. It requires secure authentication, role-based access, proper database models, REST APIs, frontend–backend integration, form validation, error handling, loading states, AI integration for resume analysis and job matching, and sample data for demonstration.
The audience is two active human roles: the Student or fresh graduate (job seeker) and the Administrator.
SkillBridge is delivered as a full-stack web application with a React frontend, a shared FastAPI backend exposing REST APIs, and MariaDB for application-owned persistent data. AI resume analysis and job matching are performed by the backend through a LiteLLM gateway, which in turn uses a PostgreSQL database for its own operation. Sample data seeds jobs, users, and applications for demonstration.
Two active human personas use the product: the Student or fresh graduate (job seeker) and the Administrator. The job seeker owns discovery, resume analysis, matching, saving, applying, tracking, and personal statistics. The administrator owns platform analytics and management of jobs, users, and applications.
Access is role-based: user features are limited to logged-in users with the user role, and admin features are limited to admins. The Landing and Login pages are the anonymous entry surfaces; all other pages are role-restricted.
Removed from scope
SkillBridge is a first-party application with application-owned identity. Visitors arrive anonymously at the Landing page, register or log in through the Login page, and then work inside role-restricted destinations. The job seeker's working context is a sidebar-navigated dashboard area covering Dashboard, Jobs, Job Details, Saved Jobs, Applications, Resume Analysis, and Profile. The administrator's working context is a separate sidebar-navigated admin area covering Admin Dashboard, Manage Jobs, Manage Users, and Manage Applications.
AI capabilities (resume analysis and job matching) are delivered by the backend calling a LiteLLM gateway; the user interacts only with SkillBridge's own surfaces and sees analysis results and match percentages rendered by the application. There is no provider-owned user surface and no external destination in the current scope. All current behavior is delivered now; no future-horizon features are defined by the source.
Not applicable — no reference directive with content_source was supplied.
FR-1 — Registration. As a visitor, I should register an account with my details so that I can access SkillBridge. (explicit)
FR-2 — Login. As a registered user or administrator, I should log in with my credentials so that I can reach my role's workspace. (explicit)
FR-3 — Logout. As a logged-in user or administrator, I should log out so that my session ends securely. (explicit)
FR-4 — Profile management. As a logged-in user, I should view and edit my profile so that my information stays current. (explicit)
FR-5 — Browse listings with search, filters, categories. As a job seeker, I should search, filter, and browse job and internship listings by category so that I can find relevant opportunities. (explicit)
FR-6 — Resume upload and AI analysis. As a job seeker, I should upload my resume and receive AI-powered analysis so that I understand my resume's strengths. (explicit)
FR-7 — AI job matching percentage. As a job seeker, I should see an AI match percentage score for a job based on my skills versus the job requirements so that I can prioritize applications. (explicit)
FR-8 — Save jobs. As a job seeker, I should save jobs so that I can revisit them. (explicit)
FR-9 — Remove saved jobs. As a job seeker, I should remove a saved job so that my saved list stays relevant. (explicit)
FR-10 — Apply to jobs. As a job seeker, I should apply to a job so that I can be considered. (explicit)
FR-11 — Manage applications and track statuses. As a job seeker, I should manage my applications and track them through Applied, Interview, Selected, and Rejected statuses so that I know where each stands. (explicit)
FR-12 — Personalized dashboard statistics. As a job seeker, I should see a personalized dashboard with application statistics so that I can gauge my progress. (explicit)
FR-13 — Admin analytics dashboard. As an administrator, I should view an admin dashboard with analytics so that I can monitor platform activity. (explicit)
FR-14 — Add job listings. As an administrator, I should add job listings so that seekers have opportunities to browse. (explicit)
FR-15 — Update job listings. As an administrator, I should update job listings so that information stays accurate. (explicit)
FR-16 — Delete job listings. As an administrator, I should delete job listings so that outdated opportunities are removed. (explicit)
FR-17 — Manage registered users. As an administrator, I should manage registered users so that the platform's user base is administered. (explicit)
FR-18 — Manage job applications. As an administrator, I should manage job applications so that applications are administered across users. (explicit)
FR-19 — Role-based access. As the platform, I should enforce role-based access so that user features are limited to logged-in users and admin features to admins. (explicit)
FR-20 — Form validation, error handling, loading states. As any user, I should see validation, error handling, and loading states so that I understand what the system is doing. (explicit)
FR-21 — Sample data. As a demonstrator, I should see sample data so that the application is populated on first run. (explicit)
The creative direction — Typography as architecture for career momentum, muse Paula Scher — is authoritative.
#F4EFE6 (warm paper ground, dominant area); Surface #FFFFFF; Text #111111; Primary #E3241B (Scher red — primary actions and match scores); Accent #F2B705 (yellow — status bands and highlights); Muted #6B6459; Teal #0F7C74 (third flat block for interview states).0.92, stacked in two or three lines. Body Archivo at 400 and 600, normal tracking.prefers-reduced-motion.The public entry is a full-viewport paper ground (#F4EFE6) with the words SKILL and BRIDGE stacked in Anton at 136px on desktop and 56px on mobile. The word BRIDGE sits inside a solid red (#E3241B) block that bleeds off the right edge. A yellow (#F2B705) band runs diagonally at 8 degrees under it carrying the line "Match your skills to real jobs". The sign-up control is a black (#111111) rectangle pinned under the headline, left-aligned. Faint painted map lines texture the background. The headline is never centred; readable text and the sign-up control stay whole at 375px, 768px, and 1280px, with the bleed gesture carried by the red block and yellow band rather than by cropping text.
Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: flat
Landing Hero Motion Brief
prefers-reduced-motion; readable text and controls remain whole at 375px, 768px, and 1280px. (required_inference, from creative direction)
Built for students & fresh graduatesFind jobs and internships, get an AI read on your resume, see how each role matches your skills, and track every application — from applied to selected.
Signed in already? An existing session goes straight to your role dashboard.

Built for students & fresh graduatesFind jobs and internships, get an AI read on your resume, see how each role matches your skills, and track every application — from applied to selected.
Signed in already? An existing session goes straight to your role dashboard.
No comments yet. Be the first!