https://github.com/captaincodercool/instagram-clone

Explore our Instagram-Clone, a dynamic replica built with React.js and Firebase. This project emulates Instagram’s core features, providing a hands-on way to learn about modern web development through real-world application.

https://github.com/captaincodercool/instagram-clone

Science Score: 26.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • CITATION.cff file
  • codemeta.json file
    Found codemeta.json file
  • .zenodo.json file
    Found .zenodo.json file
  • DOI references
  • Academic publication links
  • Academic email domains
  • Institutional organization owner
  • JOSS paper metadata
  • Scientific vocabulary similarity
    Low similarity (12.0%) to scientific vocabulary
Last synced: 10 months ago · JSON representation

Repository

Explore our Instagram-Clone, a dynamic replica built with React.js and Firebase. This project emulates Instagram’s core features, providing a hands-on way to learn about modern web development through real-world application.

Basic Info
  • Host: GitHub
  • Owner: CAPTAINCODERCOOL
  • License: mit
  • Language: JavaScript
  • Default Branch: master
  • Homepage:
  • Size: 2.49 MB
Statistics
  • Stars: 0
  • Watchers: 1
  • Forks: 0
  • Open Issues: 0
  • Releases: 0
Created over 1 year ago · Last pushed about 1 year ago
Metadata Files
Readme License

README.md

📸 Instagram Clone

A responsive and dynamic Instagram-style social media platform built using React and Firebase. Users can sign up, log in, upload images with captions, and interact with posts through real-time comments. This project replicates key features of modern photo-sharing applications and serves as a great full-stack learning tool.


🔧 Getting Started

🚀 Features

  • User Sign-up and Login (Firebase Authentication)
  • Image Upload with Captions (Firebase Storage)
  • Real-time Post Feed with Comments (Firestore Database)
  • Responsive Layout using Material-UI

🛠 Tech Stack

  • Frontend: React.js, Material-UI, CSS
  • Backend: Firebase Auth, Firestore, Firebase Storage

🧰 Installation & Setup

  1. Clone the Repository ```bash git clone https://github.com/yourusername/Instagram-Clone.git cd Instagram-Clone Install Dependencies

bash Copy code npm install Firebase Configuration

Go to Firebase Console

Create a new project

Enable:

Authentication → Sign-in method → Enable Email/Password

Firestore Database → Create database (in test mode)

Storage → Enable and set rules for image uploads

Copy the Firebase config from your project and paste it into:

javascript Copy code // src/firebase.js const firebaseConfig = { apiKey: "YOURAPIKEY", authDomain: "YOURAPP.firebaseapp.com", projectId: "YOURPROJECTID", storageBucket: "YOURAPP.appspot.com", messagingSenderId: "YOURSENDERID", appId: "YOURAPPID" }; ▶️ Run the App bash Copy code npm start Open your browser and visit: http://localhost:3000

📂 Project Structure pgsql Copy code Instagram-Clone/ ├── public/ │ └── index.html ├── src/ │ ├── components/ │ │ ├── Post.js │ │ ├── ImageUpload.js │ │ ├── SignUpLogin.js │ ├── firebase.js │ ├── App.js │ └── index.js ├── package.json └── README.md 📸 Demo Suggestions (Add Screenshots/GIFs) 📥 Login Page

🖼 Upload Section

💬 Real-time Commenting

💡 Future Enhancements Add like and follow features

Add user profile pages with display pictures

Integrate messaging functionality with Realtime DB

Deploy to Firebase Hosting or Netlify

Owner

  • Login: CAPTAINCODERCOOL
  • Kind: user

GitHub Events

Total
  • Push event: 3
Last Year
  • Push event: 3

Dependencies

package-lock.json npm
  • 1499 dependencies
package.json npm
  • @material-ui/core ^4.11.0
  • @material-ui/icons ^4.9.1
  • @testing-library/jest-dom ^4.2.4
  • @testing-library/react ^9.5.0
  • @testing-library/user-event ^7.2.1
  • firebase ^7.23.0
  • react ^16.13.1
  • react-dom ^16.13.1
  • react-instagram-embed ^1.5.0
  • react-scripts 3.4.3