Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/tomriu/social-media-project

This project is a dynamic Social Media Platform aimed at enhancing connectivity, user interaction, and content sharing. Developed as part of a basic internship in PTIT, it leverages modern web technologies (spring boot, reactjs, ...) to create an engaging and scalable platform.
https://github.com/tomriu/social-media-project

cloudinary-api formik java material-ui reactjs spring-boot springframework tailwind-css websocket

Last synced: 2 months ago
JSON representation

This project is a dynamic Social Media Platform aimed at enhancing connectivity, user interaction, and content sharing. Developed as part of a basic internship in PTIT, it leverages modern web technologies (spring boot, reactjs, ...) to create an engaging and scalable platform.

Awesome Lists containing this project

README 

          
# Social Media Website



This repository contains the source code and documentation for a dynamic **Social Media Platform** developed as product of Basic Internship subject in **Posts and Telecommunications Institute of Technology**.



The project aims to enhance connectivity, user engagement, and content sharing through a user-friendly and feature-rich platform.



---



## Features



### Authentication and User Management



- Secure user registration, login, and logout.

- Password recovery using email verification.

- Profile view and editing.

- Follow and unfollow users.



### Post Interactions



- Create, like/unlike, save/unsave, and delete posts.

- Add comments to posts.



### Real-Time Communication



- Real-time chat functionality using WebSocket API.



### Search and Discovery



- Search for users and posts with advanced filters.



### Responsive Design



- Optimized for performance across various devices and screen sizes.



---



## Technologies Used



### Frontend



- **HTML, CSS, JavaScript**: Structure and basic interactivity.

- **React.js**: Component-based UI development.

- **Redux**: State management.

- **MUI**: Pre-styled UI components.

- **Tailwind CSS**: Utility-first CSS framework.

- **Formik**: Form management and validation.



### Backend



- **Java**: Programming language for backend development.

- **Spring Boot**: Backend framework for API development.

- **Spring Security**: Authentication and authorization.

- **Spring Data JPA**: Data persistence with MySQL.

- **Spring Mail**: Email sending for password recovery.

- **Spring Boot DevTools**: Enhances development experience.

- **JWT**: JSON Web Tokens for authentication.

- **Lombok**: Reduces boilerplate code.



### Database



- **MySQL**: Relational database for storing user and platform data.



### Real-Time Features



- **WebSocket API**: Enables instant messaging capabilities.



### Media Storage



- **Cloudinary API**: Secure and efficient image storage.



---



## Project Structure



- **Frontend**: Located in the `frontend` directory.

- **Backend**: Located in the `backend` directory.

- **Documents**: Having all relevant documentation in the `documents` directory.

- **Images**: Images used to demonstrate the application in the `images` directory.



---



## Installation



### Prerequisites



- Node.js and npm

- Java (JDK 17 or above)

- MySQL



### Steps



1. Clone the repository:



   ```bash

   git clone https://github.com/TomRiu/social-media-project.git

   cd social-media-website

   ```



2. Set up the backend:



   ```bash

   cd backend

   ./mvnw spring-boot:run

   ```



3. Set up the frontend:



   ```bash

   cd frontend

   npm install

   npm start

   ```



4. Configure the application:

   - Update the `application.properties` file in the `backend` directory with your local MySQL and email application credentials.

   - Update the `src/utils/uploadCloud.js` file in the `frontend` directory with your cloud name of Cloudinary.



---



## Demo



### Screenshots



Below are some screenshots demonstrating the application features:



1. **Register Page**



  Registration Interface

  
User Registration - Simple and secure sign-up process





2. **Login Page**



  Login Interface

  
Login Page - Clean and intuitive login experience





3. **Forgot Password**



  Password Recovery

  
Password Recovery - Easy password reset through email verification





4. **Reset Password**



  Password Recovery

  
Reset Password - Get by email link to reset password





5. **Create Post**



  Post Creation

  
Post Creation - Rich media sharing capabilities





6. **Home and Search**



  Home Feed and Search

  
Home Feed & Search - Discover and explore content





7. **Like, Comment, Save Posts**



  Post Interactions

  
Post Interactions - Engage with content through likes, comments, and saves





8. **Get My Profile with My Posts**



  Personal Profile View

  
Personal Profile - View and manage your posts





9. **Get My Profile with My Saved Posts**



  Saved Posts View

  
Saved Content - Access your curated collection of saved posts





10. **Other User Profile**



  Other User Profile View

  
User Profiles - Connect with other users





11. **Real-Time Chat and Messaging**



  Chat Interface

  
Real-time chat with WebSocket technology





## Documentation



- Full documentation: [FINAL_REPORT_OF_BASIC_INTERNSHIP.pdf](documents/FINAL_REPORT_OF_BASIC_INTERNSHIP.pdf)

- Project presentation: [SOCIAL_MEDIA_WEBSITE_PRESENTATION.pptx](documents/SOCIAL_MEDIA_WEBSITE_PRESENTATION.pdf)



---



## License



This project is licensed under the [MIT License](LICENSE).



---



## Future Enhancements



- **Notifications**: Real-time updates for likes, comments, and follows.

- **Stories**: Temporary posts similar to other social media platforms.

- **Reels**: Short-form video content creation and viewing.

- **Enhanced Error Handling**: Sophisticated feedback mechanisms for better user experience.



---



## Contributing



Contributions are welcome! Please follow these steps:



1. Fork the repository.

2. Create a feature branch.

3. Submit a pull request with a detailed description of your changes.



---



## Acknowledgments



Special thanks to **Kim Ngọc Bách**, the guiding lecturer, and everyone who contributed to this project.



---



Feel free to explore the source code, and don’t forget to star the repository if you find it useful!