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.
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
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
Statistics
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
- Releases: 0
Metadata Files
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
- 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
- Repositories: 1
- Profile: https://github.com/CAPTAINCODERCOOL
GitHub Events
Total
- Push event: 3
Last Year
- Push event: 3
Dependencies
- 1499 dependencies
- @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