Wander-Must

The must have packing app.

Concept

Wander-Must

In the world of travel, there are apps to assist with various parts of the overall experience, but no shared, social space for those with a true wanderlust. Wander-Must is a social network for world travelers looking for the unexpected, but averse to unwelcome surprises. Knowing what to pack becomes easy with the following steps:

1. Sign up/Log in - create a unique username and choose your spirit animal

2. Choose a destination, your travel dates, and the type of travel (Business, Leisure, Adventure, Vacation) and create a new suitcase

3. If another user has already visited your destination, explore their experiences and add items to your suitcase

4. If you are the first to visit a destination, pick and choose what you may need from a list of 100 items and add them to your suitcase

5. Update your suitcase as needed, adding and deleting items, writing your travel blog, changing the photo for your suitcase, and adjusting item amounts

Application

Planning a trip requires more research than most users have the time or energy to carry out. We add a personal touch to packing, creating a shared space for like-minded travelers to compare notes, relive vacations, and give others ideas on where to go and what to bring.

Motivation

World travelers generally spend several hours scouring the internet for information on what they should or shouldn't take on a trip to a particular part of the world. Information can be difficult to sift through, and the information that is available lacks consistency, context, and any sort of personal experience to lend it credence. Wander-Must serves as a user-friendly exploration of other users' personal experiences, organized in a way that makes planning for trips painless and fun. Each trip contains user details and personalization that contextualize these experiences, leading to a more accurate understanding of what to pack for a specific trip.

Design Process

Wander-Must is designed as both a desktop and mobile social network, but any future development will focus on the mobile experience and standalone apps, as we believe that users will use the service primarily from their phones.

The color scheme and design were chosen to impart a modern, feminine aesthetic, as we have identified women as the primary demographic for our application. The site has a clean, straightforward look designed to make the user experience as painless as possible, providing a number of customizable options that never overwhelm the user.

The site was originally built using jQuery and Handlebars templating, but it has been completely refactored as a React build, providing users with a clean, single-page app.

Concepts Used

• React components
• State
• Props
• ES6 JavaScript features:
  • Classes
  • Constructors
  • Import/Export
• Node and Express servers
• MVC (Model-View-Controller) design pattern
• Sequelize ORM
• GraphQL Resolvers, Queries, and Mutations
• Authentication

Technologies Used

• React.js
• HTML5/CSS3
• Material Kit
• Javascript
• Local Storage
• API & Axios
• Sequelize
• Node.js
• Express.js
• Passport.js
• Heroku
• JawsDB
• Cloudinary image hosting
• Visual Studio - Text Editor
• Git Terminal/Bash

Future Developments

Here are some of the features to be included in any future development for this project:

1. Persistent search bar to find cities and users

2. Updating suitcase details

3. Multiple destination suitcases

4. User creation of new items not already in database

5. Use of tokens to test authentication

6. Password recovery and reset

7. Social media signup/login

8. Printable packing lists

9. Create space for sites like expedia to show airfare/hotel prices

10. Real-time social feed for new suitcases and update to suitcases

11. The abiity to follow other users

12. More mobile-first design and creation of app

13. Integration with other social media channels

Node Packages Used

• apollo-boost
• axios
• babel
• babel-preset-es2015
• babel-register
• bcrypt
• body-parser
• cloudinary-react
• dotenv
• express
• express-graphql
• express-session
• google-places-autocomplete-service
• graphql
• if-env
• lodash
• moment
• mysql2
• passport
• passport-google-oauth20
• passport-local
• passport-twitter
• react
• react-alert
• react-alert-template-basic
• react-apollo
• react-autocomplete
• react-datepicker
• react-dom
• react-google-autocomplete
• react-moment
• react-numeric-input
• react-popper
• react-router-dom
• react-scripts
• react-slick
• react-validate
• reactstrap
• sequelize
• sequelize-cli
• validate.js
• yelp-api

Authors

The Wander-Must Team:

• B Barnett - B Barnett

  • React, Styling, GraphQL

• Wayne Baylor - Wayne Baylor

  • Passport, Authentication, Auth Routes

• Sam Hicks - Sam Hicks

  • Validation, Cloudinary, Libraries

• Molly Johnson - Molly Johnson

  • Sequelize, GraphQL, Cloudinary

• Xander Rapstine - Xander Rapstine

  • React, GraphQL, Styling

• Evan Seaman - Evan Seaman

  • External API, Validation, Libraries