/az-movie-nights

Outdoor Screen and Equipment rentals for AZ Movie nights

Primary LanguageHTML

AZ Movies Nights

By Trevor Mackin 02/28/2020
![Image of Paths](src/assets/images/az_main2.png) ![Image of Paths](src/assets/images/screen1.png) ![Image of Paths](src/assets/images/screen2.png) ![Image of Paths](src/assets/images/az_products2.png) ![Image of Paths](src/assets/images/az_form2.png) ![Image of Paths](src/assets/images/screen5.png) ![Image of Paths](src/assets/images/az_modal2.png)

Component Tree (Planning Phase)

![Image of Paths](src/assets/images/component-structure.png)

Description

This is a client-side application built in React. This project focuses on building a website for an outdoor movie theatre rental company.

The business has a small number of products that a user can choose from by clicking on an item. Once the user chooses a product, a single page will be populated with all the corresponding data from that particular product. From here, a user will be able to add this product to a wish list, view the entirety of their wishlist at this point, move on to the checkout page, or return back to the list of products.

When a user has decided that they have saved all relevant products in the wish list, a user will then head to checkout where they will see their wish list, and be asked to fill out a form. The form will include personal information, the day and time of the event, and any other information they wish to add at this time. This information will then be used to populate an email response to the business owner, and then be sent along with the customers wish list.

The reason for the unorthodox checkout, and the reason for a wish list instead of a cart, is due to the nature of the company. It is my understanding that the company prefers to first speak with customers due to the many factors that go into planning an event. This site will eventually function as the main page for an event team, and they have requested that the site follow this model.

Setup/Installation Instructions

  1. Github Project Address: https://github.com/ratta2ii/az-movie-nights
  2. $ git clone https://github.com/ratta2ii/az-movie-nights.git (Clone repository)
  3. $ cd az-movie-nights (Navigate to the project directory)
  4. $ npm install
  5. $ npm run start

Features

  • Email response once a user has submitted their wishlist
  • Stateful components using Redux
  • CRUD functionality for the user to add and remove items from the wishlist
  • Fully responsive down to 300px width
  • Collapsable navbar for smaller screens
  • Sidebar active when a user clicks the hamburger icon

Technologies Used

  • React
  • JavaScript
  • HTML
  • CSS
  • Redux
  • Webpack

License

MIT License Copyright (c) 2020 MIT (Trevor Mackin)