A modern Next.js frontend powering the SkillHub platform. It provides an intuitive user interface for students to discover learning resources, tutorials, articles, colleges, and career opportunities while seamlessly interacting with the SkillHub Backend APIs.
- 🎓 Modern Student Dashboard
- 🔐 Authentication & Authorization
- 👤 User Profile Management
- 🏫 College Profiles
- 📚 Study Resources
- 📝 Articles & Blogs
- 🎥 Tutorials & Courses
- 🔍 Advanced Search & Filtering
- 📱 Responsive Design
- ⚡ Server-Side Rendering (SSR)
- 📈 SEO Optimized
- 🔗 REST API Integration
- 🐳 Docker Support
| Category | Technology |
|---|---|
| Framework | Next.js |
| Language | TypeScript |
| UI Library | React |
| Styling | Tailwind CSS |
| Components | shadcn/ui |
| Icons | Lucide React |
| Forms | React Hook Form |
| Deployment | Vercel |
| Containerization | Docker |
skillhub-frontend/
│
├── public/
│
├── app/
├── components/
├── package.json
├── next.config.ts
├── tsconfig.json
├── Dockerfile
├── .dockerignore
├── .gitignore
├── .env.local
└── README.md
Clone the repository
git clone https://github.com/rajgupta2/skillhub.gitNavigate to the project
cd skillhubInstall dependencies
npm installCreate a .env.local file in the project root.
NEXT_PUBLIC_API_URL=http://localhost:5000
NEXT_PUBLIC_EMAIL=skillhub.student@gmail.com
NEXT_PUBLIC_SITE_URL=https://skillhub-student.vercel.app
NODE_ENV=production
#The jwt secret should be same in backend api and here.
JWT_SECRET=your-jwt-secretChoose one of the following methods.
npm run devThe application will be available at
http://localhost:3000
npm run buildnpm startdocker build -t skillhub-frontend .docker run -d --name skillhub-frontend -p 3000:3000 skillhub-frontendThe application will be available at
http://localhost:3000
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build production application |
npm start |
Start production server |
The frontend communicates with the SkillHub Backend through REST APIs.
Configure the backend URL using:
NEXT_PUBLIC_API_URL=http://localhost:5000The application is fully responsive and optimized for:
- 💻 Desktop
- 💼 Laptop
- 📱 Mobile
- 📟 Tablet
- ⚡ Next.js App Router
- 🖥️ Server Components
- 📦 Code Splitting
- 🖼️ Image Optimization
- 📈 SEO Optimized
- ⚙️ Lazy Loading
- 🔄 Dynamic Imports
The frontend uses:
- Tailwind CSS
- shadcn/ui
- Lucide Icons
- Responsive Layouts
Authentication is handled using JWT tokens issued by the SkillHub Backend.
Protected pages require a valid access token.
This frontend can be deployed on:
- Vercel ⭐ (Recommended)
- Docker
- AWS EC2
- Netlify
- Azure Static Web Apps
- DigitalOcean App Platform
npm installnpm run builddocker logs skillhub-frontenddocker run -p 8080:3000 skillhub-frontendOpen
http://localhost:8080
- 🤖 AI Study Assistant
- 📊 Student Analytics Dashboard
- 💬 Real-time Community Chat
- 🔔 Push Notifications
- 🌍 Multi-language Support
- 📱 Progressive Web App (PWA)
Contributions are welcome!
-
Fork the repository.
-
Create a feature branch.
git checkout -b feature/my-feature- Commit your changes.
git commit -m "Add my feature"- Push your branch.
git push origin feature/my-feature- Open a Pull Request.
- Frontend: https://github.com/rajgupta2/skillhub
- Backend: https://github.com/rajgupta2/skillhub-backend
This project is proprietary software.
- Copyright (c) 2026 Raj Gupta
- All rights reserved.
The source code is provided for viewing and educational purposes only.
Raj Gupta
- 🌐 GitHub: https://github.com/rajgupta2
- 💻 AWS | MERN | Next.js | TypeScript | Docker | PostgreSQL | MongoDB
If you found this project helpful, consider giving it a ⭐ Star on GitHub.
It helps others discover the project and motivates further development.