Trip Keeper

Trip Keeper is designed for adventure seekers who would love an application to keep track of their previous road trips and all it entails. With the ability to add personalized journal entries to each trip you take users will always have a way to remember their favorite places visited. In addition, the built in photo album tool gives users the capability to walk down memory lane at any time. The interactive google map feature brings all roadtrips to life and allows users to see where they've been and have yet to go. Utilizing Trip Keeper is an easy to use app which allows users to organize and relive some of their most fun adventures. Check out Trip Keeper here.

Built With

Front End

Back End

Deployment and Package Management

Installation

Clone the repo git clone https://github.com/rhwebster/mapmyroadtrip.git
Create .env file based on example .env-example file touch .env
Create frontend .env file based on example .env-frontend-example cd react-app/ && touch .env
Install backend dependencies cd mapmyroadtrip/ && pipenv install --dev -r dev-requirements.txt && pipenv install -r requirements.txt
Install frontend dependencies cd ../react-app && npm install
Start virtual environment in frontend cd .. && pipenv shell
Apply the migration to the database flask db upgrade
Seed the database flask seed all
Start backend flask run
Open new terminal and start frontend cd ../react-app && npm start
Open browser to http://localhost:3000/

Features

Inviting splash page with the ability to see Trip Keeper's functionality in full prior to sign up with its demo login

Easy navigation available on each page with access to a feed of all journal entries, all trips, a summary of where all journal entries took place on a google map, and a complete photo album of all previously added pictures.

Google Maps feature displaying most updated list of where journal entries took place. Bonus features include the ability to zoom in and out, street view, access to entire world view, and satelite view.

Live time map updates as you choose a start and end destination for your road trip. Auto complete drop-downs available to help prefill exact location latitude and longitudes. Want to keep this trip to yourself or share it to the World? No problem, just check or uncheck whether to share your trip!

Ability to add a new journal entry per trip. Can customize both the title and entry per entry as well as upload a photo for each entry.

Beautiful full screen display of photos taken throughout all trips taken.

IMPORTANT! If you add any python dependencies to your pipfiles, you'll need to regenerate your requirements.txt before deployment. You can do this by running:

pipenv lock -r > requirements.txt

ALSO 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.

Deploy to Heroku

Create a new project on Heroku
Under Resources click "Find more add-ons" and add the add on called "Heroku Postgres"
Install the Heroku CLI
Run
```
heroku login
```
Login to the heroku container registry
```
heroku container:login
```
Update the REACT_APP_BASE_URL variable in the Dockerfile. This should be the full URL of your Heroku app: i.e. "https://flask-react-aa.herokuapp.com"
Push your docker container to heroku from the root directory of your project. This will build the dockerfile and push the image to your heroku container registry
```
heroku container:push web -a {NAME_OF_HEROKU_APP}
```

Release your docker container to heroku

heroku container:release web -a {NAME_OF_HEROKU_APP}

set up your database:

heroku run -a {NAME_OF_HEROKU_APP} flask db upgrade
heroku run -a {NAME_OF_HEROKU_APP} flask seed all

Under Settings find "Config Vars" and add any additional/secret .env variables.

rhwebster / mapmyroadtrip