Lab Overview

1. Create and clone down a repository called props-practice
2. Add the provided code to your project and do an initial commit. NOTE: Do not commit until you CONFIRM you have a .gitignore file so that you don't push up your node_modules folder!
3. Create tickets for each task.
4. For each task, create and switch to a branch called task-<number>
5. Complete the task, push up to GitHub, create a PR, and merge to main.
6. In your terminal, checkout back to main and complete a fresh pull.
7. Don't forget to link your repo in our 1-1 chat.

To run the project locally:

• You will need to install the dependencies I've added to the project. npm i
• You can start the react application using npm run start

Instructions

You have TEN (10) functionality tasks to fix or complete which are explained by comments in the code. Remember you can search a file or entire codebase. The pattern you will search for is: Task <number here>. Once you have restored all functionality with the ten tasks, you have additional Styling Tasks below.

I recommend starting with index.js, and then work your way through the files. Familiarize yourself with the flow, modules, and data being used.

Styling Tasks

• Task 11: Ensure all photos are cropped to the same ratio.

• Task 12: On desktop, display a 2x grid of posts. (Meaning two posts can sit side-by-side, with each additional row also containing a maximum of two posts.)

• Task 13: Using CSS media queries, ensure tablet and mobile views only show one post per row (a single column of posts)

Stretch Goals:

• Make the lab fully responsive.