Tripaholics is a travel web app that allows users to create and/or login into an existing account. Additionally, it allows users to create, edit and delete trips. To create a trip, they need to be logged in, and once they are logged in, they can select the destination, range of dates for travel, and the reason for traveling (which is optional).
Users can also see their future trips in a list of trips that are sorted by start date. They also have a separate page for the trip details, where they can add/delete reservations, a to-do list, activities that they would like to do during their trip, and/or invite friends to join their trip (and they receive an invitation to their preferred email). The project also allows users to edit their account's name and email, and save those changes to the database.
- Front-end: Javascript, HTML5, CSS3, Bootstrap, AJAX, JSON
- Templating Engine: Jinja2
- Back-end: Python, Flask, PostgreSQL, SQLAlchemy
- APIs: Google Maps API, Twilio's SendGrid API, Unsplash Images API, Swiper API
-
Homepage displays additional information about the project, including a navbar that automatically scrolls down when a link is clicked
-
Users can click on the button to start planning, but they can create a trip only if they are logged in
-
Users can see recommended places to travel to in a beautiful carousel
-
Users can read provided answers to a list of frequently asked questions about the project
-
Users can create an account and/or login
-
Passwords are saved to the database already hashed for extra layer of security using Argon2
-
Trips created are displayed as cards. If users click on the card, they are redirected to the Trip Details Page, where they can add a task to their to-do list, as well as reservations, activities, and send an invitation to their friends so they can join the trip.
-
Users can choose to edit or delete a particular trip if they want to. I used AJAX for the delete button to delete the trip without reloading the page.
-
If users click to edit a trip, they are redirected to the "Edit Trip" page where they can modify or add the reason of the trip, as well as a description.
-
Users can modify or add the reason of the trip, as well as a description, and save the changes to the db.
-
Users can edit their account information by clicking "Account" on the navbar. They can change their name or email, and save the changes to the database.
- Users can create and add a to-do list to the trip
- Users also have the option to mark a task as done or delete it
- Users can add reservations to the trip, including hotels, Airbnbs, Flight, Train, etc.
- Reservations are displayed as cards, and they can be deleted when you are done with them
-
Users can add activities to the trip. The categories are: Guided Tour, Arts & Culture, Outdoor Activities, etc.
-
Activities are displayed as cards (which can also be deleted just like the reservations)
-
Users can invite a friend to join their trip by entering their email address. For this particular feature, I used SendGrid Mail API to send a personalized email invitation to the preferred email account.
- Included 404 error handler page just in case the page doesn't exist.
If you would like to run this project, here are the steps:
git clone https://github.com/rdpfeifle/Travel-web-app
Create and activate a virtual environment within your directory
python3 -m pip install --user virtualenv
source env/bin/activate
Install the dependencies:
pip3 install -r requirements.txt
Obtain keys for the Google Maps API, SendGrid API and Unsplash Images API
Save your Google Maps and Unsplash API keys in a file called secrets.sh using this format:
export YOUR_APP_KEY="YOUR_KEY_GOES_HERE"
Save your SendGrid API key in a file called sendgrid.env using this format:
export SENDGRID_API_KEY="YOUR_KEY_GOES_HERE"
Source your keys into your virtual environment:
source secrets.sh
source ./sendgrid.env
Set up the database:
python3 seed_database.py
Run the app:
python3 server.py
You can now navigate to 'localhost:5000/' to access the website
👩🏻 Hi, my name is Raquel and I'm a Software Engineer. This travel web app was created in 4 weeks as my capstone project at Hackbright Academy, a 12-week accelerated Software Engineering fellowship. Feel free to connect on LinkedIn!