Community Connect is a social platform designed to help individuals who have moved away from their hometowns for work or education stay connected with their cultural roots. The platform enables users to find and join communities based on cultural, regional, or linguistic backgrounds, organize cultural events, share local recipes, and interact through a dedicated social feed.
- Community Management: Create, join, and manage cultural communities
- Social Feed: Share posts and experiences within communities
- Event Management: Organize and participate in cultural events
- User Profiles: Personalized user profiles with hometown information
- Admin Dashboard: Comprehensive data management interface
community-connect/
├── public/
│ └── index.html
├── src/
│ ├── components/
│ │ ├── common/ # Reusable UI components
│ │ ├── auth/ # Authentication components
│ │ ├── communities/ # Community-related components
│ │ ├── posts/ # Post management components
│ │ └── events/ # Event management components
│ ├── pages/ # Main application pages
│ ├── context/ # React context for state management
│ ├── services/ # API service layers
│ ├── hooks/ # Custom React hooks
│ ├── utils/ # Utility functions and constants
│ └── styles/ # CSS stylesheets
└── configuration files
backend/
├── src/main/java/
│ ├── controller/ # REST API controllers
│ ├── service/ # Business logic layer
│ ├── repository/ # Data access layer
│ ├── entity/ # JPA entities
│ ├── dto/ # Data transfer objects
│ └── config/ # Configuration classes
├── src/main/resources/
│ └── application.properties
└── pom.xml
- Node.js (version 14 or higher)
- npm or yarn
- Clone the repository
- Navigate to the frontend directory
- Install dependencies:
npm install
- Start the development server:
npm run dev
- Open http://localhost:3000 in your browser
- Responsive Design: Works on desktop and mobile devices
- Modern UI: Professional interface with smooth animations
- State Management: React Context for authentication
- API Integration: Axios for HTTP requests
- Routing: React Router for navigation
CREATE TABLE user (
user_id BIGINT AUTO_INCREMENT PRIMARY KEY,
uname VARCHAR(100) NOT NULL,
email VARCHAR(255) UNIQUE NOT NULL,
password VARCHAR(255) NOT NULL,
birth_date DATE,
phone_numbers VARCHAR(20),
home_town VARCHAR(100),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);CREATE TABLE community (
community_id BIGINT AUTO_INCREMENT PRIMARY KEY,
cname VARCHAR(100) NOT NULL,
description TEXT,
user_id BIGINT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES user(user_id)
);CREATE TABLE members (
membership_id BIGINT AUTO_INCREMENT PRIMARY KEY,
joined_on TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
role ENUM('admin', 'moderator', 'member') DEFAULT 'member',
user_id BIGINT,
community_id BIGINT,
FOREIGN KEY (user_id) REFERENCES user(user_id),
FOREIGN KEY (community_id) REFERENCES community(community_id),
UNIQUE KEY unique_membership (user_id, community_id)
);CREATE TABLE post (
post_id BIGINT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(200) NOT NULL,
content TEXT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
user_id BIGINT,
community_id BIGINT,
FOREIGN KEY (user_id) REFERENCES user(user_id),
FOREIGN KEY (community_id) REFERENCES community(community_id)
);CREATE TABLE event (
event_id BIGINT AUTO_INCREMENT PRIMARY KEY,
event_title VARCHAR(200) NOT NULL,
event_description TEXT,
event_date TIMESTAMP NOT NULL,
location VARCHAR(255) NOT NULL,
user_id BIGINT,
community_id BIGINT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES user(user_id),
FOREIGN KEY (community_id) REFERENCES community(community_id)
);- Description: Get all users
- Response: Array of user objects
- Sample Response:
[
{
"user_id": 1,
"uname": "John Doe",
"email": "john@example.com",
"birth_date": "1990-01-01",
"phone_numbers": "+1234567890",
"home_town": "New York"
}
]- Description: Get user by ID
- Parameters:
id(path parameter) - Response: User object
- Description: Create new user
- Request Body:
{
"uname": "John Doe",
"email": "john@example.com",
"password": "hashedpassword",
"birth_date": "1990-01-01",
"phone_numbers": "+1234567890",
"home_town": "New York"
}- Description: Update user
- Parameters:
id(path parameter) - Request Body: User object with updated fields
- Description: Delete user
- Parameters:
id(path parameter)
- Description: Get all communities
- Response: Array of community objects
- Sample Response:
[
{
"community_id": 1,
"cname": "New York Expats",
"description": "Community for New Yorkers abroad",
"user_id": 1,
"creator_name": "John Doe",
"member_count": 5
}
]- Description: Get community by ID
- Parameters:
id(path parameter)
- Description: Create new community
- Request Body:
{
"cname": "New York Expats",
"description": "Community for New Yorkers abroad",
"user_id": 1
}- Description: Get all communities a user has joined
- Parameters:
id(user ID path parameter)
- Description: Join a community
- Request Body:
{
"user_id": 1,
"community_id": 1,
"role": "member"
}- Description: Leave a community
- Parameters:
membershipId(path parameter)
- Description: Get all members of a community
- Parameters:
id(community ID path parameter) - Sample Response:
[
{
"membership_id": 1,
"user_id": 1,
"uname": "John Doe",
"role": "admin",
"joined_on": "2024-01-15T10:30:00Z"
}
]- Description: Get all posts for a community
- Parameters:
id(community ID path parameter) - Sample Response:
[
{
"post_id": 1,
"title": "Welcome Post",
"content": "Welcome to our community!",
"created_at": "2024-01-15T10:30:00Z",
"user_id": 1,
"author_name": "John Doe",
"community_id": 1
}
]- Description: Create new post
- Request Body:
{
"title": "Welcome Post",
"content": "Welcome to our community!",
"user_id": 1,
"community_id": 1
}- Description: Delete post
- Parameters:
id(post ID path parameter)
- Description: Get all events
- Response: Array of event objects
- Sample Response:
[
{
"event_id": 1,
"event_title": "Cultural Festival",
"event_description": "Annual cultural festival",
"event_date": "2024-02-15T18:00:00Z",
"location": "Community Center",
"user_id": 1,
"organizer_name": "John Doe",
"community_id": 1
}
]- Description: Create new event
- Request Body:
{
"event_title": "Cultural Festival",
"event_description": "Annual cultural festival",
"event_date": "2024-02-15T18:00:00Z",
"location": "Community Center",
"user_id": 1,
"community_id": 1
}- Description: Get all events for a community
- Parameters:
id(community ID path parameter)
- Description: Delete event
- Parameters:
id(event ID path parameter)
The backend needs to configure CORS to accept requests from the frontend:
@Configuration
public class CorsConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("http://localhost:3000")
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
.allowedHeaders("*")
.allowCredentials(true);
}
};
}
}Create application.properties:
# Database Configuration
spring.datasource.url=jdbc:mysql://localhost:3306/community_connect
spring.datasource.username=your_username
spring.datasource.password=your_password
# JPA Configuration
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect
# Server Configuration
server.port=8080
# CORS (adjust for production)
cors.allowed-origins=http://localhost:3000INSERT INTO user (uname, email, password, birth_date, phone_numbers, home_town) VALUES
('John Doe', 'john@example.com', 'hashedpassword1', '1990-01-01', '+1234567890', 'New York'),
('Jane Smith', 'jane@example.com', 'hashedpassword2', '1992-05-15', '+1234567891', 'Los Angeles'),
('Mike Johnson', 'mike@example.com', 'hashedpassword3', '1988-11-20', '+1234567892', 'Chicago');INSERT INTO community (cname, description, user_id) VALUES
('New York Expats', 'Community for people from New York living abroad', 1),
('California Dreamers', 'Californians connecting around the world', 2),
('Texas Worldwide', 'Keeping Texas culture alive everywhere', 1);- The frontend uses mock data when the backend is unavailable
- All API calls are handled through service layers in
src/services/ - Authentication state is managed using React Context
- Components are designed to be reusable and modular
- Set up basic Spring Boot project with MySQL connection
- Implement User entity and CRUD operations
- Implement Community and Membership functionality
- Add Post and Event management
- Implement authentication and authorization
- Add validation and error handling
- Start the Spring Boot backend on port 8080
- The frontend will automatically proxy API calls to the backend
- Update the service files to remove mock data once backend is ready
- Test all CRUD operations through the UI
- Use consistent response formats across all endpoints
- Implement proper error handling with meaningful error messages
- Add input validation for all request bodies
- Consider pagination for endpoints that return lists
- Implement proper security (authentication/authorization)
- Use DTOs to control what data is exposed through the API
- Add comprehensive logging for debugging