CS+SG Fall 2024 Education Team Homework 2

Introduction

In this homework assignment, you will be applying what you've learned by creating a functional clone of Instagram web! 🤓

Requirements

1. Clone this repository
2. Create a new React project using the instructions from the lecture (DON'T FORGET TO ADD A FOLDER FOR YOUR REACT PROJECT TO GO IN!!)
3. Create a clone (mockup) of your Instagram profile using React 👩🏾‍💻
4. Submit by making a commit AND ADDING A PICTURE/VIDEO TO THE COMMIT SECTION 🥳

Deliverables

• [] Include a navigation bar at the top of your page
• [] Inclued a footer at the bottom of your page
• [] Include the Instagram logo in the upper left of your website
• [] Include a profile picture of you and bio
  • [] Include informaiton about you in your bio
• [] Have at least three (3) pictures on your profile (HINT Use React components here and pass props!!)
• [] Have the follow button work! Followers should increase/decrease when you click on the follow button! The button should also change in text and color.
• [] Mimic the styling of the Instagram web page as closely as possible

Stretch Goals Not required, but encouraged!

• [] Have a post open up when you click on it, just like on the real Instagram web (HINT Use React components here and pass props!!)
• [] Show the like count and comment count of each post when you hover on it, just like on the real Instagram web

Directions

1. Clone this Repository

   • Download VSCode if you don't have it downloaded already (see our installation guide!)

   • Open VSCode

   • Open a new window if you have another project, File > New Window

   • Choose Clone Git Repository... from the Start options OR Open a terminal or command prompt, navigate to the directory where you want to store the project (hint: use the command cd [PATHNAME], and run the following command: git clone [HTTPS_LINK_TO_REMOTE_REPO]

     

   • Open the new cloned folder in VSCode

   • Write your code in the index.html and index.css files from the list of files on the left. If you don't see the files in the folder, choose the explorer which looks like pages in the upper part of the left navigation

   • Make your edits! 😎

Submission

Once you've completed your Instagram clone, make sure to review the requirements and ensure you've met them all. Then, submit your assignment by making a commit:

• In VSCode, choose the branch icon in the left navigation bar (below the magnifiying glass

  

• Type a message into the field at the top of the bar that opens

• Choose the plus button that appears when you hover over changes; this prepares all of the changes you made to be packaged into a commit

• Hit the commit button!

• Hit that button again in order to send your commit from your local repository to the remote one (syncing the two repositories)

• You're done!! 🎉🎉🎉

PLEASE ADD A PHOTO/VIDEO OF YOUR FINAL PROJECT HERE!:

[YOUR PHOTO/VIDEO GOES HERE]

[Watch the Demo]

Resources

Please remember that while you're working on this assignment, you can always refer to:

• Lecture notes
• Personal notes
• Lecture Slides
• Teaching Assistants (TAs) & Education Team Lead