https://github.com/edignot/vrad

:house_with_garden: Denver vacation rental marketplace app. Tech stack: React, CSS, Fetch API, Jest, React Testing Library
https://github.com/edignot/vrad

denver react vacation-rentals

Last synced: 11 days ago
JSON representation

:house_with_garden: Denver vacation rental marketplace app. Tech stack: React, CSS, Fetch API, Jest, React Testing Library

• Host: GitHub
• URL: https://github.com/edignot/vrad
• Owner: edignot
• Created: 2020-05-20T23:18:20.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-23T02:18:48.000Z (7 months ago)
• Last Synced: 2024-04-23T06:00:49.987Z (7 months ago)
• Topics: denver, react, vacation-rentals
• Language: JavaScript
• Homepage:
• Size: 30.2 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# VRAD - Vacation Rentals Around Denver

![vrad](/vrad.jpg)

### About

VRAD is an application allowing users to find Vacation Rentals Around Denver, similar to AirBnb. A user can Login with their name, email address & purpose for the rental(there is no Login authentication), and choose different areas around Denver where they would like to stay.  After selecting an area, a user can view all available listings for that area. User can open each listing and see additional information and pictures, and can also add or remove the listing from their :blue_heart:Favorites. After favoriting listings, user can click on the My Favorites button to see all the listings they are interested in.

This was a paired project during Module 3 at [Turing School of Software & Design](https://turing.io/).

### User Story

User should be able to:

#### 1. Login



#### 2. See Welcome message, Favorite Listings, Logout button, Areas Listings



#### 3. Choose Area and see all Listings



#### 4. Select Listing and see Listing details and image slider



#### 5. Add/Remove Listing from Favorite Listings



### User Interaction 

![1](/1.gif)

### Built with

- React

- JavaScript

- CSS

- Fetch API

- Jest

- React Testing Library

### Main Files

- [All Components](https://github.com/edignot/VRAD/tree/master/src/components) | Each Component has it's own test and CSS styling file

  - [App Component](https://github.com/edignot/VRAD/blob/master/src/components/App/App.js) | React Routing 

    - [App Component Async Integration Testing](https://github.com/edignot/VRAD/blob/master/src/components/App/App.test.js)

- [Fetch API Network Calls](https://github.com/edignot/VRAD/blob/master/src/ApiFetch/ApiFetch.js)

### Learning Goals

- Keep state based components to a minimum and leverage more functional components.

- Use a modular architecture for App file structure.

- Think deeply about React Lifecycle Methods.

- Become familiar with promises, nested fetch requests, and handling the UI based on acceptance of data.

- Become familiar with routing and how to handle dynamic routes.

- Use propTypes for every component receiving props.

- Write tests for React components and some asynchronous functionality.

### Install

1. Clone this repo

1. Run `npm install` to get dependencies

1. Run `npm start` to start the webserver 

1. Open `localhost:3000` in your favorite browser

### Contributors

### [Edita Ignot](https://github.com/edignot) | [MY COMMITS](https://github.com/edignot/VRAD/commits/master?author=edignot&branch=master)

[Karl Nielsen](https://github.com/Karlfunhouse)