Design a complete UI and all necessary components for the MVP of SKILLFORGE, a platform connecting students and businesses through real-world projects. Ensure the UI is modern, user-friendly, and optimized for both students and businesses. Requirements: html tailwind with a certain UI library, with the demand to scale to better UX with good animations in the future
Project Overview: SKILLFORGE is a tech platform that bridges the gap between businesses and students by offering small-scale, real-world projects. Instead of traditional internships, students work on time-limited projects, gain experience, and build a portfolio, while businesses access emerging talent to solve real-world problems cost-effectively.
Core Features (MVP):
Matching System (Students & Businesses)
Businesses create projects with goals, required skills, timelines, and deliverables. Students search and apply for suitable projects. AI-powered recommendations for both students and businesses. Project Management
Role-specific dashboards for students, businesses, and mentors. Kanban Board to track progress (To-Do, In Progress, Review, Done). Milestones & Review system for project evaluation. Automated deadline notifications. Mentoring & Support
Chat & video calls between students and mentors. Project-related document sharing. Portfolio & Skill Certification
Automatic portfolio compilation based on completed projects. Skill certifications verified by businesses. Educational Analytics
Skill assessment based on detailed rubrics. 360-degree feedback (mentors, teammates, self-evaluation). Progress tracking & reports. Priority Features for 1-Month MVP:
Authentication System: OAuth (Google, LinkedIn) with profile setup. Project Marketplace: Project posting, search & advanced filtering, student applications. Project Dashboard: Kanban board, timeline, task management. Basic Chat System: Real-time text chat with notifications. Profile Pages: Student/business profiles with project history and basic ratings. AI-Powered Features:
AI Matching System
Analyze student skills & project requirements for smart recommendations. Display match percentage between candidates and projects. AI Writing Assistant
Help students craft project applications based on their CV. Assist businesses in writing clear, structured project descriptions. AI Project Breakdown
Automatically break down projects into structured tasks with suggested timelines. Basic Code Analysis (if time allows)
Provide basic code quality checks and optimization suggestions. Syntax, style, and performance analysis for languages like JavaScript, Python, and Java. UX/UI Design Priorities:
Smooth Onboarding
Step-by-step signup and profile setup with best practices. Intuitive Dashboards
Customizable widgets displaying key information at a glance. Progress Tracking & KPI Visualization
Real-time completion tracking, performance graphs, and project activity insights. Consistent Design System
Modern, professional UI with an education-tech-focused color scheme. Special Focus Areas:
GitHub/GitLab Integration: Track commits & code changes in project timelines. File Sharing & Version Control: Document sharing with version history. Business Analytics Dashboard: Track ROI, project performance, and student contributions. Automated Student Portfolio: Update profiles with completed projects and validated skills.
I'll create a complete UI for SKILLFORGE that connects students and businesses through real-world projects. The design will be modern, user-friendly, and optimized for both user types.
I've created a comprehensive UI for the SKILLFORGE platform that connects students and businesses through real-world projects. The design is modern, user-friendly, and optimized for both types of users.
Authentication System
Project Marketplace
Project Management
Communication System
Portfolio & Skill Certification
The UI is built with Next.js, Tailwind CSS, and shadcn/ui components, providing a solid foundation that can be easily extended with animations and enhanced UX in future iterations.
how to run this project locally?
Here's a step-by-step guide to set up and run the SKILLFORGE project on your local machine:
Make sure you have the following installed:
npx create-next-app@latest skillforgeWhen prompted, select the following options:
src/ directory? → Nocd skillforgenpm install @hello-pangea/dnd lucide-react next-themesnpx shadcn@latest initWhen prompted, select the following options:
npx shadcn@latest add button card avatar badge input progress tabs select separator dialog dropdown-menu sheetSince the sidebar component is custom, you'll need to create it manually. Copy the sidebar component code from the project files into your components/ui directory.
Copy all the files from the provided code project into your local project, maintaining the same directory structure:
app/layout.tsxapp/page.tsxapp/globals.cssapp/dashboard/page.tsxapp/projects/page.tsxapp/projects/[id]/page.tsxapp/messages/page.tsxapp/portfolio/page.tsxcomponents/main-nav.tsxcomponents/app-sidebar.tsxcomponents/hero-section.tsxcomponents/feature-section.tsxcomponents/how-it-works.tsxcomponents/testimonials.tsxcomponents/cta-section.tsxcomponents/project-kanban-board.tsxcomponents/recent-activity.tsxcomponents/upcoming-deadlines.tsxcomponents/skills-overview.tsxcomponents/chat-interface.tsxtailwind.config.tsnpm run devThe application will be available at http://localhost:3000.
/app: Contains all the page components using Next.js App Router/components: Contains reusable UI components/components/ui: Contains shadcn/ui components/public: Contains static assets like imagesThis is a frontend-only implementation. For a full application, you would need to:
The project uses: