ezgram - A Social Media App

👉 view site

Overview

This Social Media App is a dynamic platform built using React.js, Recoil, Tailwind CSS, Firebase, and Random User API. It facilitates a vibrant social experience with features such as user authentication, posting content, liking, commenting, friend suggestions, and viewing stories.

Motivation

The motivation behind this Social Media App project was to delve into the world of modern web development, applying technologies like React.js, Recoil, and Firebase to create a feature-rich and responsive social platform. As a fresh developer, the project serves as an immersive learning experience, allowing me to gain hands-on knowledge in frontend development, state management, database connection, and API integration.

Why I Built the Project This Way

• Integrated Firebase for secure user authentication, ensuring a protected and reliable user access experience.
• Implemented a range of features such as posts, likes, comments, friend suggestions, and stories for a comprehensive social interaction platform.
• Utilized Recoil for efficient state management, providing a smooth and reactive user interface.

Features

• Secure User Authentication:

  • Integrated Firebase for secure user authentication, allowing users to access the application's features with confidence.

• Interactive User Features:

  • Implemented features like adding posts, liking, commenting, and viewing stories for a dynamic and engaging user experience.

• Sophisticated Search Functionality:

  • Developed a sophisticated search functionality, enabling users to effortlessly discover and connect with other accounts.

• Efficient Data Management:

  • Established a connection to Firebase for efficient data management, storing posts, images, and like counts seamlessly.

Technologies Used

• React.js: A powerful JavaScript library for building user interfaces.

• Recoil: State management library for React applications, ensuring efficient and reactive data handling. Read more.

• Tailwind CSS: A highly customizable CSS framework for modern and responsive UIs.

• Firebase: A comprehensive platform for building web and mobile applications, providing authentication, real-time database, and cloud functions.

• Random User API: An external API used for fetching random user data, enhancing the social experience.

Getting Started

1. Clone the repository:

   git clone https://github.com/vikasipar/social-media-app.git

2. Install dependencies:

   npm install

3. Set up Firebase credentials.

Running the App

npm run dev

Open http://localhost:5173 in your browser.

Future Enhancements

• Add story functionality.
• Direct messaging functionality.
• Enhanced user profiles with additional customization options.

Screenshots