Skip to content

Latest commit

 

History

History
73 lines (56 loc) · 3.15 KB

README.md

File metadata and controls

73 lines (56 loc) · 3.15 KB

Assignment 3

Getting Started

  1. Fork this repository and clone the code to your machine.
  2. Setup your application 
    # Make sure you run this command inside the week3 folder. Check via `pwd`
# Not doing so may cause the create-react-app command to fail
pwd
# /path/to/week3
create-react-app ecommerce-ui
  3. Ensure you can run your dev server 
    cd ecommerce-ui
npm start

# or if you're using yarn
cd ecommerce-ui
yarn start

Overview

For this assignment, you'll be creating an e-commerce UI using React.

Why e-commerce? E-commerce drives a major portion of the web. People buy physical products via e-commerce (Amazon, Nordstrom, Zulily). Software services (TurboTax) and nonprofits (Washington Trails Association) also make up the e-commerce portion of the web.

E-commerce allows companies to cater to a national/global audience. It's also a game-changer for individuals because it lowers barriers to entry for online sales.

Requirements

For this UI, we'll be using some fake data that represents a collection of vacation rentals (Airbnb-like). Additionally, the UI appearance will mostly be up to you, although you're free to use other websites and designs as inspiration.

Ensure that your UI meets the following criteria:

  • Renders the provided data using React components
    • Data will be provided in _data/airbnbs.json
    • Copy the JSON files to your project and import them into a component like so: 
      import airbnbs from './airbnbs.json';
    • At minimum, your UI should display the title, image, and payment information
  • Uses React components that...
    • Are modular/reusable. For example, each vacation rental could be considered a modular and reusable component.
    • Are tested with at least one snapshot test per component.
    • Use the appropriate loops/conditionals to map and display components.
    • Use propTypes to define props.
  • Offers a "Shopping Cart" functionality where you can add a vacation rental to a shopping cart. This shopping cart should...
    • Be displayed above the vacation rentals
    • Allow the user to remove a vacation rental from the cart if they change their mind
    • Display the total payment due based on the vacation rentals in the cart
  • In order to facilitate the "Shopping Cart" functionality, each vacation rental should have a button that allows the user to add a vacation rental to the shopping cart.

Inspiration

Submission

  1. In order for a valid submission, your app should run and display a UI when running npm start.
  2. Create a pull request to this repository. There will be no CI.

Extras (optional)

  • Make the shopping cart hideable/showable, in order to avoid clutter. This could be implemented as a hide/show button.
  • Create a UI that allows the user to enter their own vacation rentals. This should...
    • Allow the user to view a form
    • Allow the user to enter vacation rental information, such as the title, image, price, etc.
    • Add the new rental to the list of vacation rentals being displayed