Please enable JavaScript to use CodeHS

Image Feed App

In this project, students use control structures, state, and object mapping to display a number of photos, comments, and other information with the ability to "like" photos.

Hard

8 Hours

High School

Project Description

Background

In this project, you’ll be creating an app that will show a feed of images with an associated number of likes. There should also be a way to change the active user account and post new images to the feed. The app below is an example.

Image Feed Demo


Your Task

Take some time to plan the layout of the app and how different components will interact.

Create a sketch of the app screens and label any dimensions you think will be helpful (remember that you’ll be writing your program using either flex or ‘dimensions’ to create a responsive design.)

List any images you may need to include to complete this app screen. Do some research to find these images (adding the term ‘transparent’ to your search will usually give you .png images with transparent backgrounds which look much nicer in final designs!) and record any links you may need.

Think about and respond to these questions to make a plan before you begin coding:

  1. How do different components interact with one another?
  2. What happens when I click a button?
  3. Should anything on the screen change as a user types a value?
  4. What state values are needed and how and when are they altered?
  5. Insert a link to your planning sketch here (once you’ve created a sketch of the layout, take a picture and upload it through codehs to create a link to share.)

    Questions to consider before getting started:

    • Are there any additional skills you’ll need to implement the desired functionality?
    • Do some research to see if you can figure out a way to add this in! Start with React Native Documentation (Lots of good links can be found in the DOCS tab!) or look on YouTube for some good demos.
    • Are there any APIs that could help make it easier to create your functionality?
    • Want to change an attribute of a component when the user interacts with it? (Take a look at the ‘Account’ screen functionality in the demo for an example.) There is a supplemental lesson on this inside the ‘Additional Topics’ module. Check this out to add this functionality to your app.