BluciferBNB - Application for Vacation Rentals Around Denver

Pair project by Caleb Haizlett and Kim McCaskill during Module 3 at Turing School of Software and Design

Learning Goals:

• Make informed design decisions to create a user-friendly application.
• Keep state based components to a minimum and leverage more functional components.
• Use a modular architecture for your application 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.

Wins:

• Building functional single-page application with React and testing all components
• Getting SOLID MVP through use of iterations and project board

Challenges

• Learning to test some asynchronous code with Jest/Enzyme
• Dynamic React Router intricacies
• Workflow with some remote days due to inclement weather

Overview of Site:

• We utilize an external API that houses data about different areas of Denver and associated rentals available in those areas.
• The user has ability to:
  • Log in
  • Search through different areas with descriptions
  • Check listings in each area with details of each listing
  • 'Favorite' a listing to have all favorited listings show on a seperate page

BluciferBNB

Login:

Areas in Denver:

Listings Available:

Listing Page:

Technologies Used:

• Javascript/React
• HTML/CSS
• Jest/Enzyme

Systems/Practices

• git/Version Control
• Trello/Project Management
• draw.io/Sketch & Wireframing
• OOP
• TDD

Setup

Clone down this external API

Fork then clone down this repository.

Then install the library dependencies for both repositories. Run:

npm install

To verify that it is setup correctly, run npm start in your terminal for both repositories. One will launch browser with localhost.

How to View Your Code in Action

In the terminal, run:

npm start

Browser should open up with localhost:3000

Running Tests

Run your test suite using the command:

npm test

The test results will output to the terminal.