natividadesusana / instagram-layout-react

🌐 This is a React-based Instagram interface recreation with responsive design, componentization, stories/posts/suggestions listing, editing of username and profile picture, post saving/liking functionality, and developed to improve front-end development skills.

React project

project-instagram-react.mp4

Demo: https://projeto7-instagramreact-six.vercel.app/

About

This project is a recreation of the Instagram interface, developed in React, which contains several features such as:

• Responsive layout that adapts to different screen sizes
• Componentization of page elements for better code organization
• Listing of stories, posts and suggestions, using arrays and objects
• Editing username and profile picture via prompts
• Functionality to save and like posts
• I developed this project as a way to apply the knowledge acquired in React and improve my skills in front-end development.

I chose React because it is one of the main libraries for developing user interfaces, JavaScript as a programming language because of its popularity and versatility, and CSS for component styling.

Technologies

The technologies used in this project were:

• React
• JavaScript
• CSS

How to run

To download and run the project, follow these steps:

1. Clone this repository: git clone https://github.com/natividadesusana/instagram-layout-react.git Install dependencies: npm install
2. Run the project: npm start Go to http://localhost:3000 in your browser to see the project in action.

---

Desktop Layout

---

Desktop Layout Without Sidebar

---