{"id":23823224,"url":"https://github.com/tomriu/social-media-project","last_synced_at":"2026-04-13T03:01:54.096Z","repository":{"id":270332624,"uuid":"910026753","full_name":"TomRiu/social-media-project","owner":"TomRiu","description":"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.","archived":false,"fork":false,"pushed_at":"2024-12-31T02:43:00.000Z","size":12009,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-22T00:41:29.440Z","etag":null,"topics":["cloudinary-api","formik","java","material-ui","reactjs","spring-boot","springframework","tailwind-css","websocket"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TomRiu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-30T10:08:04.000Z","updated_at":"2025-02-10T10:24:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"5a0a987d-e796-4928-b93d-1c2d9f76aaf1","html_url":"https://github.com/TomRiu/social-media-project","commit_stats":null,"previous_names":["tomriu/social-media-project"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TomRiu/social-media-project","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomRiu%2Fsocial-media-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomRiu%2Fsocial-media-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomRiu%2Fsocial-media-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomRiu%2Fsocial-media-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TomRiu","download_url":"https://codeload.github.com/TomRiu/social-media-project/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomRiu%2Fsocial-media-project/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":283966764,"owners_count":26924587,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-12T02:00:06.336Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cloudinary-api","formik","java","material-ui","reactjs","spring-boot","springframework","tailwind-css","websocket"],"created_at":"2025-01-02T10:15:34.735Z","updated_at":"2025-11-12T03:02:36.182Z","avatar_url":"https://github.com/TomRiu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Social Media Website\n\nThis 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**.\n\nThe project aims to enhance connectivity, user engagement, and content sharing through a user-friendly and feature-rich platform.\n\n---\n\n## Features\n\n### Authentication and User Management\n\n- Secure user registration, login, and logout.\n- Password recovery using email verification.\n- Profile view and editing.\n- Follow and unfollow users.\n\n### Post Interactions\n\n- Create, like/unlike, save/unsave, and delete posts.\n- Add comments to posts.\n\n### Real-Time Communication\n\n- Real-time chat functionality using WebSocket API.\n\n### Search and Discovery\n\n- Search for users and posts with advanced filters.\n\n### Responsive Design\n\n- Optimized for performance across various devices and screen sizes.\n\n---\n\n## Technologies Used\n\n### Frontend\n\n- **HTML, CSS, JavaScript**: Structure and basic interactivity.\n- **React.js**: Component-based UI development.\n- **Redux**: State management.\n- **MUI**: Pre-styled UI components.\n- **Tailwind CSS**: Utility-first CSS framework.\n- **Formik**: Form management and validation.\n\n### Backend\n\n- **Java**: Programming language for backend development.\n- **Spring Boot**: Backend framework for API development.\n- **Spring Security**: Authentication and authorization.\n- **Spring Data JPA**: Data persistence with MySQL.\n- **Spring Mail**: Email sending for password recovery.\n- **Spring Boot DevTools**: Enhances development experience.\n- **JWT**: JSON Web Tokens for authentication.\n- **Lombok**: Reduces boilerplate code.\n\n### Database\n\n- **MySQL**: Relational database for storing user and platform data.\n\n### Real-Time Features\n\n- **WebSocket API**: Enables instant messaging capabilities.\n\n### Media Storage\n\n- **Cloudinary API**: Secure and efficient image storage.\n\n---\n\n## Project Structure\n\n- **Frontend**: Located in the `frontend` directory.\n- **Backend**: Located in the `backend` directory.\n- **Documents**: Having all relevant documentation in the `documents` directory.\n- **Images**: Images used to demonstrate the application in the `images` directory.\n\n---\n\n## Installation\n\n### Prerequisites\n\n- Node.js and npm\n- Java (JDK 17 or above)\n- MySQL\n\n### Steps\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/TomRiu/social-media-project.git\n   cd social-media-website\n   ```\n\n2. Set up the backend:\n\n   ```bash\n   cd backend\n   ./mvnw spring-boot:run\n   ```\n\n3. Set up the frontend:\n\n   ```bash\n   cd frontend\n   npm install\n   npm start\n   ```\n\n4. Configure the application:\n   - Update the `application.properties` file in the `backend` directory with your local MySQL and email application credentials.\n   - Update the `src/utils/uploadCloud.js` file in the `frontend` directory with your cloud name of Cloudinary.\n\n---\n\n## Demo\n\n### Screenshots\n\nBelow are some screenshots demonstrating the application features:\n\n1. **Register Page**\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"images/register.png\" alt=\"Registration Interface\" width=\"700\"/\u003e\n  \u003cp\u003e\u003cem\u003eUser Registration - Simple and secure sign-up process\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n2. **Login Page**\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"images/login.png\" alt=\"Login Interface\" width=\"700\"/\u003e\n  \u003cp\u003e\u003cem\u003eLogin Page - Clean and intuitive login experience\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n3. **Forgot Password**\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"images/forgot-password.png\" alt=\"Password Recovery\" width=\"700\"/\u003e\n  \u003cp\u003e\u003cem\u003ePassword Recovery - Easy password reset through email verification\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n4. **Reset Password**\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"images/reset-password.png\" alt=\"Password Recovery\" width=\"700\"/\u003e\n  \u003cp\u003e\u003cem\u003eReset Password - Get by email link to reset password\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n5. **Create Post**\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"images/create-post.png\" alt=\"Post Creation\" width=\"700\"/\u003e\n  \u003cp\u003e\u003cem\u003ePost Creation - Rich media sharing capabilities\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n6. **Home and Search**\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"images/home-and-search.png\" alt=\"Home Feed and Search\" width=\"700\"/\u003e\n  \u003cp\u003e\u003cem\u003eHome Feed \u0026 Search - Discover and explore content\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n7. **Like, Comment, Save Posts**\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"images/like-comment-save.png\" alt=\"Post Interactions\" width=\"700\"/\u003e\n  \u003cp\u003e\u003cem\u003ePost Interactions - Engage with content through likes, comments, and saves\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n8. **Get My Profile with My Posts**\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"images/get-me-post.png\" alt=\"Personal Profile View\" width=\"700\"/\u003e\n  \u003cp\u003e\u003cem\u003ePersonal Profile - View and manage your posts\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n9. **Get My Profile with My Saved Posts**\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"images/get-me-saved-post.png\" alt=\"Saved Posts View\" width=\"700\"/\u003e\n  \u003cp\u003e\u003cem\u003eSaved Content - Access your curated collection of saved posts\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n10. **Other User Profile**\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"images/other-profile.png\" alt=\"Other User Profile View\" width=\"700\"/\u003e\n  \u003cp\u003e\u003cem\u003eUser Profiles - Connect with other users\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n11. **Real-Time Chat and Messaging**\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"images/chat-and-message.png\" alt=\"Chat Interface\" width=\"700\"/\u003e\n  \u003cp\u003e\u003cem\u003eReal-time chat with WebSocket technology\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n## Documentation\n\n- Full documentation: [FINAL_REPORT_OF_BASIC_INTERNSHIP.pdf](documents/FINAL_REPORT_OF_BASIC_INTERNSHIP.pdf)\n- Project presentation: [SOCIAL_MEDIA_WEBSITE_PRESENTATION.pptx](documents/SOCIAL_MEDIA_WEBSITE_PRESENTATION.pdf)\n\n---\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n---\n\n## Future Enhancements\n\n- **Notifications**: Real-time updates for likes, comments, and follows.\n- **Stories**: Temporary posts similar to other social media platforms.\n- **Reels**: Short-form video content creation and viewing.\n- **Enhanced Error Handling**: Sophisticated feedback mechanisms for better user experience.\n\n---\n\n## Contributing\n\nContributions are welcome! Please follow these steps:\n\n1. Fork the repository.\n2. Create a feature branch.\n3. Submit a pull request with a detailed description of your changes.\n\n---\n\n## Acknowledgments\n\nSpecial thanks to **Kim Ngọc Bách**, the guiding lecturer, and everyone who contributed to this project.\n\n---\n\nFeel free to explore the source code, and don’t forget to star the repository if you find it useful!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomriu%2Fsocial-media-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomriu%2Fsocial-media-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomriu%2Fsocial-media-project/lists"}