SkillZone

A modern, full-stack skill-sharing and learning community platform built with Spring Boot and React. SkillZone empowers users to share their learning journey, showcase skills, engage with peers through posts and comments, and build a professional network.

---

🚀 Features

User Management

• Registration & Authentication

  • Email-based user registration with secure password handling
  • Email/password login
  • Google OAuth2 integration for seamless sign-up
  • User profile management with bio and personal information

• Social Networking

  • Follow/unfollow users
  • User discovery and profile viewing
  • User activity tracking

Post Management

• Full CRUD Operations

  • Create, read, update, and delete posts
  • Rich content support with titles and descriptions
  • Media attachments (images, files up to 50MB)

• Engagement Features

  • Like system with user tracking
  • Comment functionality with nested support
  • Post filtering (all posts, personal posts)

Learning Progress Tracking

• Skill Documentation

  • Track learning progress by skill with detailed descriptions
  • Document start and end dates for learning goals
  • Categorize skills by field/domain
  • Attach supporting materials (images, PDFs)

• Progress Management

  • View all community learning progress
  • Track personal learning journey
  • Update and monitor skill development

Notification System

• Real-time Alerts
  • Activity-based notifications (likes, comments, follows)
  • Read/unread status tracking
  • Notification badge in navigation bar
  • Instant notification updates

---

🛠️ Tech Stack

Backend

Technology	Version	Purpose
Spring Boot	3.4.4	Web framework & API
Java	24	Programming language
MongoDB	Latest	Primary document database
MySQL	Latest	Relational data support
Spring Security	3.x	Authentication & authorization
Spring OAuth2	3.x	OAuth2 client integration
Maven	3.x	Build & dependency management

Frontend

Technology	Version	Purpose
React	19.1.0	UI framework
React Router DOM	7.4.1	Client-side routing
Axios	1.8.4	HTTP client
React Icons	5.5.0	Icon library
React Modal	3.16.3	Modal components
Jest & React Testing Library	Latest	Testing framework

---

📁 Project Structure

SkillZone/
├── backend/                          # Spring Boot application
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/backend/
│   │   │   │   ├── SkillZoneApplication.java
│   │   │   │   ├── config/
│   │   │   │   │   ├── CorsConfig.java
│   │   │   │   │   ├── SecurityConfig.java
│   │   │   │   │   └── WebConfig.java
│   │   │   │   ├── controller/
│   │   │   │   │   ├── UserController.java
│   │   │   │   │   ├── PostManagementController.java
│   │   │   │   │   ├── LearningProgressController.java
│   │   │   │   │   ├── NotificationController.java
│   │   │   │   │   └── OAuthController.java
│   │   │   │   ├── model/
│   │   │   │   │   ├── UserModel.java
│   │   │   │   │   ├── PostManagementModel.java
│   │   │   │   │   ├── LearningProgressModel.java
│   │   │   │   │   ├── NotificationModel.java
│   │   │   │   │   └── Comment.java
│   │   │   │   ├── repository/
│   │   │   │   │   ├── UserRepository.java
│   │   │   │   │   ├── PostManagementRepository.java
│   │   │   │   │   ├── LearningProgressRepository.java
│   │   │   │   │   └── NotificationRepository.java
│   │   │   │   └── exception/
│   │   │   │       ├── UserNotFoundException.java
│   │   │   │       ├── PostManagementNotFoundException.java
│   │   │   │       └── LearningProgressNotFoundException.java
│   │   │   └── resources/
│   │   │       └── application.properties
│   │   └── test/
│   │       └── java/backend/
│   ├── pom.xml
│   └── mvnw / mvnw.cmd
│
├── frontend/                         # React application
│   ├── src/
│   │   ├── Pages/
│   │   │   ├── UserManagement/
│   │   │   │   ├── UserLogin.js
│   │   │   │   ├── UserRegister.js
│   │   │   │   ├── UserProfile.js
│   │   │   │   └── UpdateUserProfile.js
│   │   │   ├── PostManagement/
│   │   │   │   ├── AllPost.js
│   │   │   │   ├── AddNewPost.js
│   │   │   │   ├── MyPost.js
│   │   │   │   └── UpdatePost.js
│   │   │   ├── LearningProgress/
│   │   │   │   ├── AllLearningProgress.js
│   │   │   │   ├── AddLearningProgress.js
│   │   │   │   ├── MyLearningProgress.js
│   │   │   │   └── UpdateLearningProgress.js
│   │   │   └── NotificationManagement/
│   │   │       └── NotificationsPage.js
│   │   ├── Components/
│   │   │   └── NavBar/
│   │   │       ├── NavBar.js
│   │   │       └── NavBar.css
│   │   ├── App.js
│   │   ├── index.js
│   │   └── App.css
│   ├── public/
│   │   └── index.html
│   └── package.json
│
└── README.md

---

🔧 Installation & Setup

Prerequisites

• Java 24+ (JDK)
• Node.js 18+ & npm
• MongoDB Atlas account (or local MongoDB)
• MySQL (optional, for secondary database)
• Git (for version control)

Backend Setup

1. Navigate to backend directory:

   cd backend

2. Create Environment Configuration:

   • Copy the example environment file:

   cp .env.example .env

   • Edit .env with your actual credentials:

   MONGODB_URI=mongodb+srv://<username>:<password>@<cluster>.mongodb.net/
   MONGODB_DATABASE=<your_database_name>
   GOOGLE_CLIENT_ID=<your_google_client_id>
   GOOGLE_CLIENT_SECRET=<your_google_client_secret>

3. Configure Application Properties:

   • Environment variables are now automatically loaded via Spring Boot
   • The application.properties file uses ${VARIABLE_NAME} syntax
   • No need to edit application.properties - just set environment variables

4. Set Environment Variables (Windows PowerShell):

   $env:MONGODB_URI="mongodb+srv://<username>:<password>@<cluster>.mongodb.net/"
   $env:MONGODB_DATABASE="your_database_name"
   $env:GOOGLE_CLIENT_ID="your_client_id"
   $env:GOOGLE_CLIENT_SECRET="your_client_secret"

5. Set Environment Variables (Linux/macOS):

   export MONGODB_URI="mongodb+srv://<username>:<password>@<cluster>.mongodb.net/"
   export MONGODB_DATABASE="your_database_name"
   export GOOGLE_CLIENT_ID="your_client_id"
   export GOOGLE_CLIENT_SECRET="your_client_secret"

6. Build the project:

   mvn clean install

7. Run the application:

   mvn spring-boot:run

   Backend runs on http://localhost:8080

Frontend Setup

1. Navigate to frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

   Frontend runs on http://localhost:3000

4. Build for production:

   npm run build

---

📡 API Endpoints

Base URL: http://localhost:8080

User Management

Method	Endpoint	Description
POST	/user	Register new user
POST	/login	User login (email & password)
GET	/user/{id}	Get user profile
PUT	/user/{id}	Update user profile
GET	/user/follow/{userId}	Follow a user
GET	/user/unfollow/{userId}	Unfollow a user

Post Management

Method	Endpoint	Description
GET	/posts	Get all posts
POST	/posts	Create new post
GET	/posts/{id}	Get post details
PUT	/posts/{id}	Update post
DELETE	/posts/{id}	Delete post
GET	/posts/user/{userId}	Get user's posts
POST	/posts/{id}/like	Like a post
POST	/posts/{id}/comment	Add comment to post

Learning Progress

Method	Endpoint	Description
GET	/learningProgress	Get all learning progress
POST	/learningProgress	Create learning progress
GET	/learningProgress/{id}	Get progress details
PUT	/learningProgress/{id}	Update progress
DELETE	/learningProgress/{id}	Delete progress
GET	/learningProgress/user/{userId}	Get user's progress

Notifications

Method	Endpoint	Description
GET	/notifications/{userId}	Get user notifications
PUT	/notifications/{id}/read	Mark notification as read
DELETE	/notifications/{id}	Delete notification

OAuth

Method	Endpoint	Description
GET	/oauth2/success	OAuth2 callback handler

---

⚙️ Configuration

Application Properties (backend/src/main/resources/application.properties)

# Application Name
spring.application.name=backend

# MongoDB Configuration
spring.data.mongodb.uri=mongodb+srv://<user>:<pass>@cluster.mongodb.net/
spring.data.mongodb.database=test

# File Upload Configuration
media.upload.dir=uploads/media
spring.servlet.multipart.max-file-size=50MB
spring.servlet.multipart.max-request-size=50MB

# Google OAuth2 Configuration
spring.security.oauth2.client.registration.google.client-id=<your_id>
spring.security.oauth2.client.registration.google.client-secret=<your_secret>
spring.security.oauth2.client.registration.google.scope=email,profile

# Security
spring.main.allow-bean-definition-overriding=true

CORS Configuration

CORS is configured to allow requests from http://localhost:3000 in SkillZoneApplication.java:

registry.addMapping("/**")
    .allowedOrigins("http://localhost:3000")
    .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
    .allowedHeaders("*")
    .allowCredentials(true);

For production, update the allowedOrigins value accordingly.

---

🔐 Security Considerations

⚠️ Important Security Notes:

Environment Variables (CRITICAL)

• NEVER commit .env files to Git - They are automatically gitignored
• Always use environment variables for sensitive data:
  • Database credentials
  • API keys
  • OAuth secrets
  • API tokens
  • JWT secrets

Password Security

• Implement password hashing using bcrypt:

  import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
  
  new BCryptPasswordEncoder().encode(password)

Exposed Credentials Handling

If credentials are accidentally committed:

1. Immediately rotate the credentials in your service provider
2. Force push corrected history (only if not yet public):

   git filter-branch --tree-filter 'rm -f <sensitive_file>' HEAD
   git push origin main --force

3. Monitor access logs for unauthorized activity
4. Update all dependent systems with new credentials

HTTPS & TLS

• Enable HTTPS in production
• Use valid SSL certificates
• Enforce HTTPS redirects

CORS Configuration

• Update SkillZoneApplication.java for production:

  .allowedOrigins("https://yourdomain.com")  // Not localhost in production

JWT Authentication

• Implement JWT tokens instead of sessions
• Use secure token signing
• Set appropriate token expiration times

Input Validation

• Add @Valid annotations to request parameters
• Use validation annotations:

  @NotNull, @NotBlank, @Email, @Size, etc.

Database Security

• Use MongoDB Atlas IP Whitelist
• Enable MongoDB authentication
• Use read-only roles where appropriate
• Enable audit logging

API Security

• Implement rate limiting
• Add request validation
• Use API keys for sensitive endpoints
• Log security events

OAuth2 Security

• Keep client secrets secret (use environment variables)
• Implement PKCE for mobile apps
• Validate redirect URIs
• Use secure state parameter handling

Dependency Management

• Regularly update dependencies:

  mvn dependency:update-check
  npm audit

• Monitor for CVEs
• Use dependency scanning tools

🚀 Deployment Security Checklist

• All credentials are environment variables
• No secrets in version control
• HTTPS enabled
• CORS properly configured
• Input validation implemented
• Database backups configured
• Monitoring and logging enabled
• Security headers configured
• Rate limiting implemented
• Regular security audits scheduled

---

📝 Usage Examples

User Registration

curl -X POST http://localhost:8080/user \
  -H "Content-Type: application/json" \
  -d '{
    "fullname": "John Doe",
    "email": "john@example.com",
    "password": "password123",
    "phone": "1234567890"
  }'

Create a Post

curl -X POST http://localhost:8080/posts \
  -H "Content-Type: application/json" \
  -d '{
    "userID": "user_id",
    "title": "My First Post",
    "description": "This is my first post on SkillZone",
    "media": ["image1.jpg"]
  }'

Add Learning Progress

curl -X POST http://localhost:8080/learningProgress \
  -H "Content-Type: application/json" \
  -d '{
    "postOwnerID": "user_id",
    "skillTitle": "React.js",
    "description": "Learning React fundamentals",
    "field": "Web Development",
    "startDate": "2026-01-01",
    "endDate": "2026-03-31"
  }'

---

🧪 Testing

Backend Tests

cd backend
mvn test

Frontend Tests

cd frontend
npm test

---

🚀 Deployment

Backend Deployment (Spring Boot)

1. Build JAR: mvn clean package
2. Deploy to cloud platforms (AWS, Azure, Heroku, etc.)
3. Set environment variables for database and OAuth credentials

Frontend Deployment (React)

1. Build: npm run build
2. Deploy to:
   • Vercel: Push to GitHub and connect
   • Netlify: Drag & drop build folder or Git integration
   • AWS S3 + CloudFront: Manual upload
   • GitHub Pages: Configure for production build

---

📚 Additional Resources

• Spring Boot Documentation
• React Documentation
• MongoDB Documentation
• Spring Security OAuth2
• React Router Documentation

---

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

👤 Author

SkillZone Development Team

For questions, feedback, or collaboration opportunities, please reach out through the project repository.

---

🐛 Troubleshooting

MongoDB Connection Error

• Verify MongoDB URI in application.properties
• Check network access in MongoDB Atlas (whitelist IP)
• Ensure cluster is running

CORS Errors

• Verify frontend URL in SkillZoneApplication.java
• Ensure backend is running on port 8080

OAuth Issues

• Verify Google OAuth2 credentials are correct
• Check redirect URI configuration in Google Console
• Ensure credentials are set in application.properties

Frontend Build Issues

• Delete node_modules and package-lock.json
• Run npm install again
• Clear npm cache: npm cache clean --force

---

📈 Future Enhancements

• Real-time notifications using WebSockets
• Advanced search and filtering
• User messaging/chat feature
• Gamification (badges, points)
• Mobile app (React Native)
• API documentation (Swagger/OpenAPI)
• Advanced analytics dashboard
• User recommendation system
• Video content support
• AI-powered skill suggestions