STR Aggregator
Project Description
The STR Aggregator is a MERN full-stack web application that utilizes web scrappers to collect information; MongoDB for the backend; Express.js for server routing; React.js for client-side routing and views;and, Node.js for its runtime environment.
Table of Contents
- Title
- Description
- Table of Contents
- Installation
- Usage
- Contributing
- Tests
- Technologies
- Collaborators
- Questions
- License
Installation Instructions
Users may clone the STR Aggregator Repo. Or, use the app as deployed on Heroku: STR Aggregator.
Usage
The STR Aggregator is deployed on Heroku.
The STR Aggregator is comprised of 5 heroku apps. Behind the scenes there are four web scrapers being utilized to scrape STR listings from AirBnB, VRBO, and Sonder.com. The Web Scraper Repo is being used for those apps and they are set to fire off every ten minutes. The listings collected by the web scrapers are saved into the MongoDB database collection specific for that city, and displayed in the STR Aggregator when the user chooses that particular city. Below is a diagram of the process.
PROGRESSIVE WEB APPLICATION (PWA): The STR Aggregator leverages the built in React.js capabilities to provide a Manifest and Service Worker enabling use as a PWA.
Users begin by being presented with the Sign-up page where they will be prompted to enter their First Name, Last Name, E-mail Address, and Password. Passwords are entered twice and have validation to ensure they are the same.
Returning users can go directly to the Sign-in page where they will be prompted to enter their E-mail Address and Password.
Once authenticated a user will be brought to the Landing Page. Here the User is presented with the options for one of four cities to search for Short-term Rental listings.
When the User chooses a city to search, the STR Aggregator goes to the MongoDB Collection of that city and gets that most recent web scrapings to show to the User.
Each listing contains: a photo of the STR, the STR title, STR details, the price of the STR, a link to the STR listing on the site from which it was scraped, and a button that will add that listing to a list of user favorites.
See a listing you want to be able to revisit - then you can add it to the User's favorites...
When cost is a concern (and, it always is!!), the User can create a budget for the travel with the STR AGGREGATOR's built in budgeting page. The page allows the User to enter in different categories of the travel budget, the description, quantity, and amount. The handy-dandy pie chart gives a visualization of the budget costs. And when the first trip is over, the User can delete all previous entries and plan for the second trip.
After the User is finished planning their trip they can log out.
This is the team that brought you the STR Aggregator.
Guidelines for Contributing
Please e-mail one of the contributors at their address listed below with any thoughts on future updates or feature suggestions.
Tests
Test early; test often.
Technologies Used
:computer: :computer: :computer: :computer: :computer: :computer:
:memo: HTML5 :memo:
HTML5 is a markup language used for structuring and presenting content on the World Wide Web. The goals are to improve the language with support for the latest multi-media and other new features; to keep the language both easily readable by humans and consistently understood by computers and devices; and to remain backward compatible to older software. Many new symantec features are included.
HTML5 content borrowed from this page.
:art: CSS :art:
Cascading Style Sheets (CSS) is a stylesheet language used for describing the presentation of a document written in a markup language (such as HTML5). CSS is designed to enable the separation of presentation and content; including layout, colors, and fonts. This separation improves content accessibility to provide more flexibility and control in the specification of presentation characteristics, enabling multiple web pages to share formatting by specifying relevant CSS in a separate file, which reduces complexity and repetition in the structural content (HTML), as well as enabling the file to be cached to improve the page load speed between the pages that share the file and its formatting.
Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice, and on Braille-based tactile devices.
CSS content borrowed from this page.
:shoe: Bootstrap 4 :shoe:
Bootstrap 4 is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
Bootstrap 4 content borrowed from this page.
:sparkler: JavaScript :sparkler:
JavaScript (JS) is one of the core technologies of the World Wide Web (along with HTML and CSS). It enables interactive web pages and is an essential part of web applications. JS is a multi-faceted, scripting language that provides versatility through Application Programming Interfaces (APIs) and Document Object Model (DOM) manipulation, among others.
JavaScript content borrowed from this page.
:globe_with_meridians: NODE.js :globe_with_meridians:
NODE.js is an open-source, cross-platform JavaScript runtime environment that execute JavaScript code outside a web browser. NODE.js lets developers use JavaScript to write command line tools and for server-side scripting. NODE.js represents a "Javascript everywhere" paradigm, unifying web-application development around a single programming language, rather than different programming languages for server- and client-side scripts.
NODE.js content borrowed from this page.
:satellite: Express.js :satellite:
Express.js is a minimal and flexible NODE.js web application framework that provides a robust set of features for web and mobile applications. The myriad HTTP utility methods and middleware allow for the creation of a robust API. Express.js provides a thin layer of fundamental features, without obscuring NODE.js features.
Express.js content borrowed from this page.
:japanese_ogre: MongoDB :japanese_ogre:
MongoDB is a document-oriented NoSQL database used for high volume data storage. Instead of using tables and rows like traditional databases, MongoDB makes use of collections and documents. Documents consist of key-value pairs that are the basic unit of data and more closely resemble the JSON architecture.
MongoDB content borrowed from this page.
:dizzy: React.js :dizzy:
React.js is an open source JavaScript library that is used for building interfaces for single-page applications, which handles the view layer for web and mobile apps. React allows for the creation of reusable UI components. This allows developers to create large web applications that change data, without reloading the page.
React.js content borrowed from this page.
Collaborators
This STR Aggregator was conceived, created, and coded by the following group of collaborators:
| TEAM | Members |
|---|---|
| :football: Vincent Doria, Jr. :football: | :beers: Shane Schilling :beers: |
| :8ball: Abraham Spindel :8ball: | :green_heart: Eric D. Torres :green_heart: |
Questions
Check out our Github profiles:
You can contact any one of use by e-mail the following:
- Vincent Doria, Jr. - vrdphone@gmail.com
- Shane Schilling - trilambda122@gmail.com
- Abraham Spindel - AbrahamSpindel@gmail.com
- Eric D. Torres - etorresntoary@gmail.com
for any additional questions and/ or clarifications you may need about the project.
License
This application uses the GNU Affero General Public v3.0 License found here.
This README.md file generated with my NODE.js README Generator app.