Name: RIYA ARORA
Company: CODTECH IT SOLUTIONS
ID: CT12DS422
Domain: Web Development
Duration: June to July 2024
Mentor: Mohammed Muzammil Ahmed

PROJECT OVERVIEW

Social Media Web Application

A comprehensive social networking site with features that make it easy and engaging to connect and share with friends.

Screenshot 2024-07-17 at 6 50 20 PM Screenshot 2024-07-17 at 6 45 51 PM Screenshot 2024-07-17 at 6 46 51 PM Screenshot 2024-07-17 at 6 47 25 PM Screenshot 2024-07-17 at 6 47 04 PM Screenshot 2024-07-17 at 6 48 10 PM Screenshot 2024-07-17 at 6 57 30 PM Screenshot 2024-07-17 at 6 59 59 PM Screenshot 2024-07-17 at 6 49 21 PM

🌟 KEY FEATURES

User Profiles: Create personalized profiles to showcase your identity and activities.   
Friend Connections: Easily connect and interact with friends and new acquaintances.    
News Feed: Stay updated with the latest posts and activities from your network.    
Multimedia Sharing: Share photos, videos, and other media effortlessly.    
Explore Page with Infinite Scroll Functionality: Discover endless content tailored to your interests.    
Real-time Updates: Receive updates for a dynamic experience.    
Content Recommendations: Enjoy personalized content suggestions.    

💻 TECHNOLOGY STACK

Frontend: HTML, SCSS, JavaScript, React (Hooks, Context API, React Query)
Backend: Node.js, Express.js
Database: MySQL Workbench
Libraries: Multer, Cors, Axios, CookieParser
Authentication: JWT, Bcrypt
UI: Material UI icons
Development Tools: Visual Studio Code

RUN LOCALLY

Clone the project

  git clone https://github.com/riyaarora03/social-media-platform.git

Go to the project directory

  cd social-media-platform

Split terminal

For Backend

  cd api
  npm install
  npm start

For Frontend

  cd client
  npm install
  npm run dev
  npm init -y

You will have to setup mysql database through Mysql Workbench as shown below:

users table | stories table | relationships table | posts table | likes table | comments table

imageimageimageimageimageimage

Set up foreign keys and primary keys as suitable to you.

That's it! The application should now be running locally on your machine.

WHAT I LEARNT

This project has been an incredible learning experience, pushing me to implement advanced functionalities and create a seamless user experience. Here are some highlights:

  1. Advanced Functionalities: I've integrated real-time updates, infinite scroll, and content recommendations to ensure a dynamic and engaging user experience.
  2. Comprehensive Design: Building a full-stack application required careful planning and design, from front-end interfaces with React to robust back-end systems using Node.js and Express.js.
  3. User-Centric Features: Developing user profiles, friend connections, news feeds, and multimedia sharing has enhanced my understanding of user engagement and interaction.
  4. Database Management: Working with MySQL Workbench for database design and management provided invaluable insights into data organization and retrieval.
  5. Authentication and Security: Implementing JWT and bcrypt for secure authentication and data protection was a critical part of the project, ensuring user privacy and security.

Contributing

Contributions are welcome! If you have any suggestions or improvements, feel free to submit a pull request.