instagram_clone

📍 Clone Instagram – Experience the Magic!

🚀 Developed with the software and tools below.

---

📚 Table of Contents

• 📚 Table of Contents
• 📍Overview
• 🔮 Features
• ⚙️ Project Structure
• 🧩 Modules
• 🏎💨 Getting Started
• 🗺 Roadmap
• 🤝 Contributing
• 🪪 License
• 📫 Contact
• 🙏 Acknowledgments

---

📍Overview

GitHub's Instagram Clone project enables users to build an Instagram-like web application from scratch in a short period of time. The project provides a working example of the application and code samples

🔮 Feautres

[📌 INSERT-PROJECT-FEATURES]

---

⚙️ Project Structure

repo
├── README.md
├── components
│   ├── SearchBar.js
│   └── TabBar.js
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│   ├── _app.js
│   ├── _document.tsx
│   ├── activity.js
│   ├── api
│   │   └── hello.ts
│   ├── exlpore.js
│   ├── home.js
│   ├── index.js
│   ├── new-post.js
│   ├── profile.js
│   └── search.js
├── postcss.config.js
├── public
│   ├── favicon.ico
│   ├── next.svg
│   └── vercel.svg
├── styles
│   ├── Home.module.css
│   ├── SearchBar.module.css
│   └── globals.css
├── tailwind.config.js
└── tsconfig.json

5 directories, 25 files

---

💻 Modules

Api

File	Summary	Module
hello.ts	This code provides an example of how to use Next.js API routes to create a handler function that will respond with a status of 200 and a JSON object containing a name property with the value of ' John Doe ' .	pages/api/hello.ts

Components

File	Summary	Module
SearchBar.js	This code creates a search bar component that takes a search term and calls a function with the search term when the search button is clicked . It includes an input field and a search button .	components/SearchBar.js
TabBar.js	This code creates a tab bar at the bottom of the page with five icons linking to different pages . It uses React , styled components , and React Icons to create a fixed tab bar with icons for Home , Explore , New Post , Activity	components/TabBar.js

Pages

File	Summary	Module
activity.js	This code creates a React component that displays a list of activities , such as likes , comments , follows , and mentions . It also includes a tab bar that allows the user to filter the activities by " You " or " Following " . The activities	pages/activity.js
profile.js	This code creates a profile page with a profile header , stats , and post tabs . The profile header includes an avatar , username , bio , and edit profile button . The post tabs allow the user to switch between posts and saved posts . The posts	pages/profile.js
_app.js	This code imports the useRouter and useEffect functions from the ' next / router ' and ' react ' libraries respectively , and imports the global stylesheet . It then creates a function called MyApp which takes in a Component and page	pages/_app.js
exlpore.js	This code is a React component that implements an infinite scroll feature and a search bar . It uses the styled - components library to style the components , and the react - infinite - scroll - component library to implement the infinite scroll feature .	pages/exlpore.js
_document.tsx	This code creates a document component that imports HTML , Head , Main , and NextScript components from the Next / Document library . It then returns an HTML element with a language attribute of " en " and contains the Head , Main , and NextScript	pages/_document.tsx
search.js	This code exports an array of objects containing post titles and content , as well as a function that filters the array based on a query string .	pages/search.js
index.js	This code is a React component for a simple Instagram clone using Next.js . It imports the Head component from Next.js and the TabBar component from the components folder . It also sets the title , description , and favicon for the	pages/index.js
new-post.js	This code creates a React component that allows users to upload a photo or video , add a caption , location , and tags , and post it . It also includes a social sharing feature that allows users to share their post on Facebook , Twitter ,	pages/new-post.js
home.js	This code is a React component that displays posts from a dummy API . It includes components for a TabBar , Post , and SearchBar . It also includes styling for the Post , PostHeader , User , Avatar , Username , PostImage ,	pages/home.js

Public

File	Summary	Module
next.svg	This code creates an SVG ( Scalable Vector Graphics ) image with two paths . The image is composed of two shapes , one with a width of 394 and a height of 80 , and the other with a width of 81 and a	public/next.svg
vercel.svg	This code is an SVG ( Scalable Vector Graphics ) image of a black rectangle with a white outline . It contains a path element with a black fill and a viewBox of 283x64 . It is used to create a graphical representation	public/vercel.svg
favicon.ico	This code is an error message indicating that a file could not be decoded because it is not a text or UTF-8 file .	public/favicon.ico

Styles

File	Summary	Module
Home.module.css	This code creates a container with padding , a main section with min - height , padding , flex , display , flex - direction , justify - content , and align - items , a footer with display , flex , padding , border - top	styles/Home.module.css
globals.css	This code sets the default font family , text color , and background color for a webpage . It also sets the box - sizing to border - box and changes the color scheme to dark when the user prefers a dark color scheme .	styles/globals.css
SearchBar.module.css	This code creates a search form with a text input and a search button . The form is displayed as a flex container with items aligned and justified to the center . The text input has a padding of 0.5rem , font size of 1rem	styles/SearchBar.module.css

---

🚀 Getting Started

✅ Prerequisites

Before you begin, ensure that you have the following prerequisites installed:

[📌 INSERT-PROJECT-PREREQUISITES]

💻 Installation

1. Clone the instagram_clone repository:

git clone https://github.com/junyjeon/instagram_clone

2. Change to the project directory:

cd instagram_clone

3. Install the dependencies:

npm install

🤖 Using instagram_clone

npm start

🧪 Running Tests

#run tests

---

🛠 Future Development

• [📌 COMPLETED-TASK]
• [📌 INSERT-TASK]
• [📌 INSERT-TASK]

---

🤝 Contributing

Contributions are always welcome! Please follow these steps:

1. Fork the project repository. This creates a copy of the project on your account that you can modify without affecting the original project.
2. Clone the forked repository to your local machine using a Git client like Git or GitHub Desktop.
3. Create a new branch with a descriptive name (e.g., new-feature-branch or bugfix-issue-123).

git checkout -b new-feature-branch

4. Make changes to the project's codebase.
5. Commit your changes to your local branch with a clear commit message that explains the changes you've made.

git commit -m 'Implemented new feature.'

6. Push your changes to your forked repository on GitHub using the following command

git push origin new-feature-branch

7. Create a pull request to the original repository. Open a new pull request to the original project repository. In the pull request, describe the changes you've made and why they're necessary. The project maintainers will review your changes and provide feedback or merge them into the main branch.

---

🪪 License

This project is licensed under the [📌 INSERT-LICENSE-TYPE] License. See the LICENSE file for additional info.

---

🙏 Acknowledgments

[📌 INSERT-DESCRIPTION]

---