SkillSphere is a modern full-stack web platform that enables users to share skills, track learning progress, and connect with a global community. It combines social networking features with structured learning tools to make skill development engaging and collaborative.
Built with Spring Boot REST API (backend) and React (frontend), the platform supports real-time communication, cloud-based media storage, and responsive design for an optimal experience on all devices.
- 🚀 Key Features
- 🛠 Technology Stack
- 🏗 System Architecture
- ⚙ Installation Guide
- 👥 Contributors
- 🤝 Contributing
- 🙏 Acknowledgments
- Skill Sharing Posts with media uploads (up to 3 images/videos per post)
- Learning Progress Tracking with customizable templates and visual milestones
- Structured Learning Plans with resources and timelines
- User Engagement via likes, comments, and follows
- Social Features including personalized feeds and chat
- Secure Authentication with email/password & OAuth 2.0 (Google login)
1. User Management (Buwaneka99)
- Secure email/password authentication
- Google OAuth 2.0 integration for quick login
- User profiles with skills, location, and contact details
- Follow/unfollow system for user connections
- Role-based access control (User/Admin)
2. Progress Tracking (Buwaneka99)
- Customizable templates for various skill types
- Visual timeline of learning milestones
- Achievement badges for completed goals
- Likes and comments on progress updates
- Integration with skill posts for practical application
3. Learning Plans *(Buwaneka99)
- Create structured plans with topics, resources, and deadlines
- Visual progress indicators for completion tracking
- Option to share learning plans with the community
4. Social Features (Buwaneka99)
- Personalized feed showing posts from followed users
- Real-time chat system between users
- Notifications for likes, comments, and follows
- User search and discovery tools
- Follow list management
5. Admin Dashboard (Buwaneka99)
- User management tools for admins
- Content moderation panel
- Analytics and statistics visualization
- Progress management system
- Monetization request handling
6. Technical Highlights (Buwaneka99)
- Fully responsive design for mobile and desktop
- Secure authentication & authorization layers
- Real-time notifications and chat with WebSockets
- Cloud-based media storage using Cloudinary
- Modern UI with animations & smooth transitions
- Data validation and error handling
7. Skill Sharing Posts Management (KalpaVidusha)
- Cloudinary media storage integration
- Media validation (3 files max, 30s video limit)
- Post creation, editing, and deletion
8. Like & Comment Management (DilmiJ)
- Real-time engagement tracking
- Comment editing/deletion permissions
- Like counters with user tracking
9. Monetization & Reward System (SanilkaSrimal)
- Monetization request workflow
- Reward tracking and approval system
- Earnings dashboard for content creators
Backend:
- Spring Boot 3.1
- Spring Security (OAuth 2.0)
- MongoDB
- Cloudinary (Media Storage)
- Swagger/OpenAPI (API Docs)
- JUnit, Mockito, Testcontainers (Testing)
Frontend:
- React 18
- Material-UI
- React Router 6
- React Context API (State Management)
- Axios (HTTP Client)
- react-player, react-dropzone (Media Handling)
graph TB
subgraph "Frontend Layer"
A[React App]
B[Material-UI Components]
C[Real-time Chat]
end
subgraph "API Gateway"
D[Spring Boot API]
E[Security Layer]
F[WebSocket Handler]
end
subgraph "Data Layer"
G[(MongoDB)]
H[Cloudinary CDN]
I[OAuth Providers]
end
A --> D
B --> D
C --> F
D --> G
D --> H
E --> I
style A fill:#61DAFB,stroke:#333,stroke-width:2px
style D fill:#6DB33F,stroke:#333,stroke-width:2px
style G fill:#4EA94B,stroke:#333,stroke-width:2px
Before diving in, make sure you have these installed:
☑️ Java 17+ (OpenJDK recommended)
☑️ Node.js 18+ & npm
☑️ MongoDB 6.0+
☑️ Git
☑️ OAuth client secrets
☑️ Cloudinary account (for media storage)git clone https://github.com/yourusername/skillshare-platform.git
cd skillshare-platform# Navigate to backend directory
cd backend
# Copy and configure environment variables (application.properties)
cp application.properties.example application.properties
# - MongoDB connection string
spring.data.mongodb.uri=mongodb://localhost:27017/skillshare
# Cloudinary API keys
cloudinary.cloud-name=your_cloud_name
cloudinary.api-key=your_api_key
cloudinary.api-secret=your_api_secret
# OAuth client secrets
# Install dependencies and run
./mvnw clean install
./mvnw spring-boot:run# Navigate to frontend directory
cd frontend
# Install dependencies
npm install
# Start development server
npm start| 👨💻 Developer | 🎯 Focus Area | 🌟 Contribution |
|---|---|---|
| Buwaneka99 | Full-Stack Lead | User Management, Progress Tracking, Learning Plans, Social Features, Admin Dashboard |
| KalpaVidusha | Media Specialist | Skill Sharing Posts, Cloudinary Integration |
| DilmiJ | Engagement Expert | Like & Comment System, User Interactions |
| SanilkaSrimal | Business Logic | Monetization System, Reward Management |
We love contributions! Here's how you can help make SkillSphere even better:
- 🐛 Report Bugs: Found something broken? Let us know!
- 💡 Suggest Features: Have an idea? We'd love to hear it!
- 🔧 Submit PRs: Ready to code? Fork and submit a pull request!
- 📖 Improve Docs: Help make our documentation clearer
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- 💙 Spring Boot Team for the amazing framework
- ⚛️ React Community for continuous innovation
- 🍃 MongoDB for flexible data storage
- ☁️ Cloudinary for seamless media management
- 🎨 Material-UI for beautiful components
