/DC-capstone-backend

Primary LanguageJavaScript

Flamingo

https://goflamingo.today

By Jonathan Ray & Eric Mauldin

Full-Stack Capstone Project

Table of contents

  • Description
  • Features
  • Screenshots
  • Technologies
  • Challenges
  • MVP
  • Reach Goals
  • Authors

Description

Flamingo is a mobile-first, digital interpretation of a familiar way of showing trips across the globe. Trading thumbtacs for digital pins, Flamingo users can quickly add, delete and edit past and future trips, creating and saving travel experiences.

Features

  • Smooth, hasslefree signup/signin process with visual cues to guide users through the registration process.
  • 15 randomly selected travel photos on the splash page to inspire a unique experience on each visit to goflamingo.today.
  • Helpful tool-tips appear when needed to cue and guide users.
  • Trip pins display different colors depending on whether their date is in the past or future.

Screenshots and Demo

Sign in

alt-text

Sign up

alt-text

Dashboard

alt-text

Add Trip

alt-text

Trip Details

alt-text

User Profile

alt-text

Sign in simulation

Profile simulation

Add Trip simulation

Technologies

  • React
  • Node.js
  • Express
  • PostgreSQL
  • JavaScript
  • HTML
  • CSS / Materialize
  • Axios
  • bcrypt
  • Mapbox
  • Autosuggest
  • geocoding APIs
  • AWS
  • Nginx

Challenges

  • Challenge #1: Directly manipulate the dom within React lifecycle methods.

  • Solution: In order to implement the datepicker and photo carousel provided by Materialize, an approach outside of React was needed. Understanding of React lifecycle methods led us to employ a myriad of techniques to ensure that the site ran smoothly while two incongruent approaches dynamically displayed the datepicker and image carousel viewer.

  • Challenge #2: Dynamically store trip data input by the user in the backend and serve automatically.

  • Solution: Update React state input on change and store the new values in the backend on window close. New values will then be served on component remount

  • Challenge #3: Providing responsive undo actions to the user

  • Solution: Utilized onclick events to editable fields that, in turn, fire a css class change to display an undo tooltip feature to safe guard against unwanted changes.

MVP

A user can add, edit and delete trips that will display on a responsive map/push pin interface.

Reach Goals

  • Add two finger swipe to photo carousel
  • Set map zoom to relative dimensions of the map from page height/width
  • Change date column in PSQL to two columns to include trip start and end dates
  • Add flight information for trips and connect map pins based on connections

Authors