Travel Bucket

A portfolio clone of Wanderlog
Explore the website »

Table of Contents

1. About The Project
   • Key Features
2. Built With
3. Usage
4. Contact

About The Project

Travel Bucket, a Wanderlog clone, is a travel planning website for users to customize their own trip based on destination and available dates. Users are also able to add, edit, and delete any places/events to visit during the day; able to add, delete any notes for the trip; and share the trip with other users. Make vacation planning a lot more useful and fun!

Key Features

• Create new users and have user login with authorization
• Post, edit, and delete trips and events whith the trip that login users own
• Share the trip with other users
• Post, and delete notes within the trip

(back to top)

Built With

• Javascript
• PostgreSQL
• Render
• Flask
• SQLAlchemy
• React
• CSS

(back to top)

Usage

• Users can signup and login to use Travel Bucket, and can login as a demo user to experience the website quickly.

• Once logged in, the user is directed to the main trip page, where logged-in users can view a list of trips the user owns based on time created.

• Logged in users can create a new trip. It can also be edited and deleted.

• Logged in user can click into any individual trip, to see all created events based on the iternary, notes for the entire trip, as well as other invited user.

• Same as creating a trip, logged in users can also create a new event, as well as to edit and delete.

• And to create and delete note.

• Users can invite other users into the trip.

• Users can click into user's profile page to view their information.

(back to top)

Getting started

1. Clone this repository (only this branch)

   git clone https://github.com/YinYang117/Travel-Bucket.git

2. Install dependencies

   pipenv install --dev -r dev-requirements.txt && pipenv install -r requirements.txt

3. Create a .env file based on the example with proper settings for your development environment

4. Setup your PostgreSQL user, password and database and make sure it matches your .env file

5. Get into your pipenv, migrate your database, seed your database, and run your flask app

   pipenv shell

   flask db upgrade

   flask seed all

   flask run

6. To run the React App in development, checkout the README inside the react-app directory.

---

IMPORTANT! psycopg2-binary MUST remain a dev dependency because you can't install it on apline-linux. There is a layer in the Dockerfile that will install psycopg2 (not binary) for us.

---

Dev Containers (Option for M1 Users)

1. Make sure you have the Microsoft Remote - Containers extension installed.

2. Make sure you have Docker installed on your computer.

3. Clone the repository (only this branch)

   git clone https://github.com/YinYang117/Travel-Bucket.git

4. Open the repo in VS Code.

5. Click "Open in Container" when VS Code prompts to open container in the bottom right hand corner.

6. Be Patient! The initial install will take a LONG time, it's building a container that has postgres preconfigured and even installing all your project dependencies. (For both flask and react!)

   Note: This will take much less time on future starts because everything will be cached.

7. Once everything is up, be sure to make a .env file based on .env.example in both the root directory and the react-app directory before running your app.

   npm install

   npm start

8. Get into your pipenv, migrate your database, seed your database, and run your flask app

   pipenv shell

   flask db upgrade

   flask seed all

   flask run

9. To run the React App in development, checkout the README inside the react-app directory.

Helpful commands

Command	Purpose
pipenv shell	Open your terminal in the virtual environment and be able to run flask commands without a prefix
pipenv run	Run a command from the context of the virtual environment without actually entering into it. You can use this as a prefix for flask commands
flask db upgrade	Check in with the database and run any needed migrations
flask db downgrade	Check in with the database and revert any needed migrations
flask seed all	Just a helpful syntax to run queries against the db to seed data. See the app/seeds folder for reference and more details
heroku login -i	Authenticate your heroku-cli using the command line. Drop the -i to authenticate via the browser
heroku authorizations:create	Once authenticated, use this to generate an Oauth token
heroku run -a travel-bucket-app	Run a command from within the deployed container on Heroku

Contact

Huyen Nguyen - GitHub

Kicky Lau - GitHub

Ryan Schneider - GitHub

Suwanshree Acharya - GitHub

Project Repo Link: https://github.com/YinYang117/Travel-Bucket

Project Link: https://travel-bucket-app.herokuapp.com/

(back to top)