Skip to content

👗 Full-stack React app that's a one stop shop for jet-setters: store your trips in a calendar, create itineraries that are saved in Mongo, & receive fab fashion advice through the Tumblr + Open Weather Map API

Notifications You must be signed in to change notification settings

rocksteadyrose/travelapp

Repository files navigation

💼 Style My Travel 👗 - Your personal travel stylist!

View the completed app on Heroku here.

screen shot 2018-08-17 at 9 07 40 am

Style My Travel a full-stack React app that's a one stop shop for jet-setters. You don't need to open multiple tabs to book your vacation, add it into your calendar, search the weather in that city, and decide what to wear and pack: Style My Travel does all of this for you!

Simply create a travel profile and input your upcoming travels to see all of your trips in one place on our travel calendar. Then, click your trip on the calendar for your personalized fashion itinerary, which includes fashion-spired outfits personally tailored to your specific trip, the weather in that city, and more. Don't forget to ❤ your fave outfits for inspiration, and create your packing list right there from the itinerary!

Technologies Used:

  • React
  • React-Big-Calendar
  • Tumblr API
  • OpenWeatherMap API
  • Animate CSS
  • Elemental-UI
  • Semantic-UI
  • Material-UI
  • BcryptJS
  • JsonWebToken
  • Babel
  • MongoDB
  • Mongoose
  • Axios
  • Express
  • Node.js
  • Javascript
  • Bootstrap
  • Passport
  • HTML
  • CSS

Screenshots: screen shot 2018-08-17 at 9 08 28 am screen shot 2018-08-17 at 9 08 05 am screen shot 2018-08-17 at 9 08 47 am screen shot 2018-08-17 at 9 08 57 am screen shot 2018-08-17 at 9 12 04 am screen shot 2018-08-17 at 9 13 54 am screen shot 2018-08-17 at 9 14 21 am stylemytravel1 stylemytravel2

INSTRUCTIONS:

  • ON THE MAIN PAGE:

    • Learn about the app
    • Sign up to create an account / Login to your account
  • ON THE TRAVEL FORM:

    • The app will take you to a travel form, where you will input your travel plans, including your location, timeline, hotel, and flight
  • ON THE CALENDAR:

    • After you've inputted your travel plans, your trip is posted to the travel calendar, where you can also view any other travel plans previously inputted

    • Simply click any date and you'll be taken to your customized itinerary for that trip

  • ON THE CUSTOMIZED ITINERARY:

    • On your customized travel itinerary, you'll see your travel info, the weather for your trip, plus fashion photos from the Tumblr API specific to the city you're travelling to that are ideal for the weather in your city.

    • You can ❤ any photo to add it to your favorites to access it at any time from your itinerary (or delete it from your Favorites if you change your mind).

    • There is the ability to add another trip or delete this trip

    • You can also create a packing list

Mock Photos for Planning Phase:

new wireframe 1 new wireframe 1 copy new wireframe 1 copy 2 new wireframe 1 copy 4 new wireframe 1 copy 5

Timeline

Phase 1

  • Choose your already planned travel
  • What you should wear if you are headed to Paris — pair with Weather API

Phase 2

  • We'll book the trip for you
  • Add additional experiences like airbnb, trip advisor, food options, etc
  • In-app purchases, clothing boxes, and partnership opps
  • Bookings and purchases all within the app so that the app serves as a one stop shop: no need to open a million tabs to book your travel, check the weather, and plan/purchase your outfits

Roles

  • Leslie: Lead Backend Developer– Full Stack Developer
  • Andrea: User Authentication, Back-end, Front-end UI
  • Laura: Lead Front-end
  • Mayra: Javascript, OpenWeatherMap API, Slide Deck

About

👗 Full-stack React app that's a one stop shop for jet-setters: store your trips in a calendar, create itineraries that are saved in Mongo, & receive fab fashion advice through the Tumblr + Open Weather Map API

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published