/travel_awesomely

Primary LanguageJavaScript

Project 3: Travel App

Project Description

Title: Travel Awesomely

About: The Travel Awesomely application helps you explore possible travel destinations when you're planning for your next vacation. Search through popular countries and cities to find images, top tourist attractions, and information for your upcoming trip.

Path CRUD Diagram

Path CRUD Google Sheet

React Diagram

React Diagram

ERD

ERD

Tables:

  1. Destinations (Countries) id - primary key name - varchar img_url - varchar

  2. Cities id - primary key name - varchar country - foreign key (country id) img_url

  3. Comments id - primary key city_id - foreign key (city id) user_id - foreign key (user id)

  4. Users id - primary key username - varchar password - varchar

Application Components

Landing/home page Countries list Individual country pages Individual city pages Login/authentication (JWT) Logout CRUD(create, read, update, delete) functionality in React Express/Node

Deployed App

Hosted App

Whiteboarding: Wireframes/User Stories and Priority Matrix

Priority Matrix Landing Page Wireframe Login Wireframe Countries Wireframe Cities Wireframe City Wireframe

Slide Deck

Slide Deck for Initial Presentation

External API

  • Triposo API

Technologies, APIs, and Modules Used

Modules Used: -Node (a framework for CRUD functionality on a server/database) -Nodemon (server monitor for node.js) -Express (a library used with node.js) -Body-parser (body-parsing middleware to parse incoming requests) -Eslint (used for linting//cleaning code) -Fetch (used to make async fetch requests for incorporating APIs) -Morgan (an HTTP request logger middlewware for Node.js) -Path (module that provides a means of working with directories and file paths) -Bcrypt (secures passwords with hashing functionality) -dotenv (loads environmental variables) -React-DOM (package that serves as the entry point of the DOM-related rendering paths) -React-Router (declarative routing for React) -Bulma (a CSS framework on Flexbox) -Concurrently (enables proxy server w/ front and backend to run concurrently)

Travel Awesomely 2.0 Features and Fixes

  • Auth/Tokens
  • Additional Cities

Instructions for Downloading and Running on Local Host

  • Step 1: Fork and clone the following git repo: https://git.generalassemb.ly/WhiskyTangoFoxtrot/project-3/
  • Step 2: CD into the DB file of the root directory
  • Step 3: In terminal use the following command: createdb travel_db
  • Step 4: In terminal use the following command: psql -d travel_db -f db/schema.sql
  • Step 5: In terminal use the following command: yarn init -y
  • Step 6: In terminal use the following command: yarn i
  • Step 7: In terminal use the following command: yarn dev
  • Step 8: In browser: open http://localhost:3000/
  • Step 9: Begin exploring Travel Awesomely!

MVP

  • REST API in Express
  • Models (four models in the database)
  • CRUD Functionality in React
  • CSS and styles

POST MVP

  • Authentication//JWT login capabilities
  • Ability for users to save Favorite cities