Tripper

Final Project (Lighthouse Labs)

Contributors: Jay Seo, Tausif Khan , Porson Lee

Problems & Solutions

When people plan for travel, visiting multiple websites to decide destinations and activities to do, taking notes of how much money they have spent, all those cumbersome planning becomes tasks and ruins the traveling experience.

To provide a solution to this, our team myself Jay, Porson, and Tausif came together to build a user friendly website where they can easily browse different destinations and activities, get all necessary information and make decisions in one page.

Overview

A highly responsive & interactive website for users to build their own itineraries with activity items by easily dragging & dropping. Users can search destinations by city, country, activity, or budget. In the main page, users can easily drag and drop avaialbe activities into container and see the budget meter changes accordingly to keep track of how much money they are spending. User can check markers on the map to see where the activities are. Also, users can see a list of friends who have been to the same destination and toggle their name to see their activities. Once they are done, users have the ability to edit/delete/view their itineraries.

Tech Stacks

Front End : React, JavaScript
Back End : Node, Express, Postgres(Elephant SQL)
API: Google Maps

Final Project

This is the video of the interactive feature of the web application. This is the landing page where users can search destinations by city name, country name, or their budget Once the user input their budget it shows a list of destinations along with the number of activities they can do This is our main page where most of the interactions happen Users can easily drag and drop the activity items they want into the container Users can add more containers by clicking a button and once there is more than 2 days, a slider shows up to help users navigate better When the budget goes nagative, users can choose to add more budget but still not stopped from adding more activities After finished user can log in Once they log in, user can see a list of friends who have been to the same city, and toggle on/off to see the activities they have done before Save and name the trip User can edit or delete trips User can see a summary of their itineraries

Getting Started

1. Fork this repository, then clone your fork of this repository.
2. Install dependencies using the npm install command in both the root folder as well as the "server" folder.
3. Start the web server using the npm start command while in the "frontend" folder. You will also need to start the client by navigating to the "backend" folder and running this npm start command there as well. The web application will be served at http://localhost:3000/.
4. Create a .env file looking at the .env.example file with your own credentials in both the front end and the back end.
5. Go to http://localhost:3000/ in your browser.