📝 ReactJS Instagram Post Clone Project

A clean and minimal React-based Instagram Post Clone Application with basic social media features like like, comment, and image posting.
Built for practice of React fundamentals and portfolio showcase.

---

🚀 Features

• 🔐 Simple login (username based)
• 🖼️ Upload image post
• ✍️ Add caption to post
• ❤️ Like functionality
• 💬 Comment system
• 📜 Show/hide comments
• 🔄 Real-time UI updates without refresh
• 📱 Responsive design (mobile friendly)

---

🛠️ Tech Stack

• React.js (Hooks: useState)
• JavaScript (ES6+)
• CSS3 (Custom styling)
• Vite (Fast development build tool)
• FileReader API (image preview)

---

📂 Project Structure

ReactJS-Project-Create-InstaPost/
│
├── src/
│ ├── components/
│ │ └── InstagramPost.jsx
│ │
│ ├── App.jsx
│ ├── main.jsx
│ ├── style.css
│
├── index.html
├── package.json
├── package-lock.json
├── vite.config.js
├── .gitignore
└── README.md

---

⚙️ How to Run This Project

1. Clone the repository

git clone https://github.com/godhaniyaarbham2000-spec/ReactJS-Project-Create-InstaPost.git

2. Move to project folder

cd ReactJS-Project-Create-InstaPost

3. Install dependencies

npm install

4. Start development server

npm run dev

---

💡 Usage

1. Enter username to login
2. Upload an image
3. Add a caption
4. Click Post button
5. Like ❤️ any post
6. Add comments 💬
7. Click comment icon to show/hide comments

---

🧠 Key Learning Concepts

• React useState hooks
• Props handling
• Component-based architecture
• Event handling
• Conditional rendering
• File upload using FileReader API
• Array methods (map, spread operator)

---

📸 Preview

• Instagram-like post UI
• Like & Comment interaction
• Simple login screen
• Responsive card layout

---

⚠️ Notes

• Frontend-only project
• No backend or database used
• Data resets on refresh
• Built for learning React fundamentals

---

📌 Future Improvements

• Firebase authentication
• Real database integration
• User profile system
• Follow/unfollow feature
• Dark mode toggle
• Cloud image upload (Cloudinary/Firebase)

---

👨‍💻 Author

Arbham Godhaniya
MERN Stack Developer 🚀