Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
controllers
models
public
routes
screenshots
views
README.md
index.js
package-lock.json
package.json
schema.sql
seed.sql

README.md

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

You can’t perform that action at this time.