CS+SG Fall 2024 Education Team Instagram Clone

⏰ Due 12/15/2024

Introduction

This project is a functional (backend and frontend) clone of Instagram web! 🤓

Requirements

1. Clone this repository
2. Create a new React project using the instructions from the lecture
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

Put Xs in the boxes as you complete them in order to mark them off!

• 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
• FOUR (4) PAGES:
  • PROFILE PAGE
    • Pulls up the profile information of the currently logged in user
    • Include a profile picture and bio
    • Include information about you in your bio
    • The option to make posts
    • 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!!)
    • 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.
  • SIGN UP PAGE
    • Allows user to input their information and create an account; fields for:
      • First name
      • Last name
      • User handle
      • Password
  • LOGIN PAGE
    • Allows user to enter password and username to log in
  • FEED
    • Display posts of those that the user is following
• Mimic the styling of the Instagram web page as closely as possible!!!!!!!!!!!!!!!!!!!

Stretch Goals Not required, but encouraged!

• Make it so that users can only visit the profile page & feed if they are logged in AND can only visit the login & sign up pages if they are NOT logged in
• Allow users to like other posts
• SUPER CHALLENGING: Allow users to make comments on posts

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]

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