⬆︎ For those us who enjoy not reading minified code.
By Jonathan Ray & Eric Mauldin
Full-Stack Capstone Project
Table of contents
- Reach Goals
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.
- 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 simulation
Add Trip simulation
- CSS / Materialize
- geocoding APIs
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
undoactions 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.
A user can add, edit and delete trips that will display on a responsive map/push pin interface.
- 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