/clone-instagram

"Dynamic Instagram clone featuring stories, post feeds, search, login, and reels. Built with HTML, CSS, and JavaScript for an interactive user experience."

Primary LanguageCSS


Logo

Instagram-clone

An Awesome Instagram clone Project!

Report Bug . Request Feature

Contributors Issues

Table Of Contents

About The Project

Screen Shot Screen Shot Screen Shot Screen Shot Screen Shot Screen Shot Screen Shot

Welcome to the Instagram-clone project – a dynamic and interactive web application that replicates some of Instagram's popular features. This project aims to provide users with a hands-on experience of exploring and interacting with a simulated social media environment.

Key Features:

  • Dynamic Stories: Engage with dynamic stories that include timers and reply sections for an interactive storytelling experience.

  • Dynamic Post Feed: Scroll through a dynamic post feed with like counts, comments, and an infinite scroll feature for endless exploration.

  • Search Menu: Navigate through a user-friendly search menu designed for seamless exploration.

  • Login Page: Experience a simple login page with local storage authentication for easy access to the application.

  • Reels Section: Explore dynamic reels with changing content, providing a dynamic and engaging experience.

Built With

This project is built using the following technologies and tools:

HTML: The structure of the web pages. CSS: Styling and layout of the user interface. JavaScript: Adding interactivity and dynamic features.

Getting Started

To set up and run the Instagram-clone project on your local machine, follow these steps:

1.Clone the repository: git clone https://github.com/harjyoti12/clone-Instagram.git

2.Navigate to the project directory: cd clone-instagram

3.Open the project in a web browser: Open the index.html file located in the project directory using your preferred web browser. You can do this by double-clicking the file or right-clicking and selecting "Open with" your browser.

4.Explore the Instagram-clone: Once the HTML file is open in your web browser, interact with the dynamic features, including stories, posts, and reels, providing a simulated Instagram experience.

That's it! You're now ready to explore the Instagram-clone on your local machine.

Prerequisites

Before running the Instagram-clone project locally, make sure you have the following installed on your machine:

Web Browser: Ensure you have the latest version of a modern web browser like Google Chrome, Mozilla Firefox, or Safari.

Internet Connection: A stable internet connection is required to load dynamic content and features.

JavaScript Enabled: Make sure JavaScript is enabled in your web browser for the interactive and dynamic aspects of the project to function properly.

Installation

To set up the Instagram-clone project on your local machine:

1.Clone the repository: git clone https://github.com/harjyoti12/clone-instagram.git

2.Navigate to the project directory: cd clone-instagram

  1. Open the project in a web browser: Open the index.html file located in the project directory using your preferred web browser.

Now you're ready to explore the Instagram-clone on your local machine.

Usage

Explore the Instagram-clone project with the following features:

Dynamic Stories: Interact with dynamic stories that include timers and reply sections.

Dynamic Post Feed: Scroll through a dynamic post feed with like counts, comments, and an infinite scroll feature.

Search Menu: Navigate the search menu design for user-friendly exploration.

Login Page: Experience a simple login page with local storage authentication for easy access.

Reels Section: Explore dynamic reels with changing content.

To get started, open the index.html file in your web browser and interact with the project's features.

Roadmap

The following are the proposed features and enhancements planned for the future development of the Instagram-clone project:

  1. Enhanced User Profiles:

    • Implement additional features on user profiles, such as bio editing, profile picture updates, and privacy settings.

  2. Real-time Notifications:

    • Integrate real-time notification functionality for new followers, likes, and comments.

  3. Explore Page:

    • Create an Explore page where users can discover new content based on their interests and preferences.

  4. Direct Messaging:

    • Implement a direct messaging system to enable private conversations between users.

  5. Responsive Design:

    • Ensure a seamless experience across various devices with a focus on responsive design.

  6. Dark Mode / Light Mode:

    • Introduce a dark mode / light mode toggel option for users who prefer a darker / lighter interface.

These are just initial ideas, and the roadmap will be updated as the project evolves. Contributions and suggestions from the community are always welcome!

Contributing

Contributions to this project are highly valued and appreciated. If you have suggestions, feedback, or want to contribute to the project, please follow these guidelines:

Open an Issue: If you have suggestions for adding or removing projects, or any other ideas, open an issue to discuss it.

Create a Pull Request: To directly contribute, create a pull request after editing the README.md file with the necessary changes. Please create individual PRs for each suggestion.

Check Spelling and Grammar: Ensure that your contributions have correct spelling and grammar to maintain a high-quality README.

Code Of Conduct: Please read and adhere to the Code Of Conduct before posting your first idea.

Your contributions help make this project better and are an essential part of the open source community. Thank you for your support!

Creating A Pull Request

Thank you for considering contributing to the Instagram-clone project! Follow these steps to create a pull request and contribute to the project:

1.Fork the Project:

Go to the Instagram-clone repository. Click the "Fork" button in the top-right corner to create your own copy of the project. Clone Your Fork:

2.Open your forked repository on GitHub. Click the "Code" button and copy the repository's URL. In your terminal, run the following command to clone the repository to your local machine: git clone https://github.com/your-username/clone-instagram.git

3.Create a New Branch:

Change into the project directory: cd clone-instagram

4.Create a new branch for your changes: git checkout -b feature/your-feature-name

5.Make Changes:

Implement your changes and ensure that your modifications align with the project's guidelines.

6.Commit Changes:

Stage your changes: git add .

Commit your changes with a descriptive message: git commit -m 'Add your descriptive commit message'

7.Push Your Branch:

Push your branch to your forked repository: git push origin feature/your-feature-name

git push origin feature/your-feature-name

8.Create Pull Request:

Open your forked repository on GitHub. Click the "Compare & pull request" button. Provide a clear title and description for your pull request. Click the "Create pull request" button. Your pull request will be reviewed, and if everything aligns with the project's guidelines, it will be considered for merging. Thank you for your contribution!

Authors

  • harjyoti - ** - https://www.buymeacoffee.com/horoji86v - *We appreciate the dedication and efforts of the authors in making the Instagram-clone project a reality. If you contribute to this project, harjyoti kalita and contributions will be added to this list.*