geuxor/grouptripper

Group Travel Planner

Group Tripper

Discover the world with friends

Grouptripper is an App to plan Trips with your friends and family.

Live Demo

You can find a deployed version of this App here (user: [email protected] , password: Demo1234)

The Frontend and Backend ar hosted on one Heroku Dyno, the database is served from the MongoDB Atlas Cloud.

Features

Setup a basic trip Itinerary with a short description, your country of destination along with your trip dates and add some stops.

Easily invite your Friends and Family to collaborate on your planning.

After accepting your invite, your co-travellers can add stops or reorder them and add comments to the your trip.

Project Presentation

Grouptripper was developed as a Thesis Project for the Codeworks Bootcamp by Alex Marshall, Mohammed Abdul Khader and Stefan Huckschlag.

Here you can find a video of the project presentation:

Getting started

These instruction will help you setup a local development instance of the app.

get the repo

git clone https://github.com/hucki/grouptripper.git

install the dependencies

npm install

Setup prerequisites

For an example how to fill /server/.env see /server/.env.example For an example how to fill /client/.env.local see /client/.env.local.example

Database

1. set up a mongoDB database locally or as a hosted service
2. choose a database name and set DB_NAME in /server/.env
3. set DB_USER and DB_PASS in /server/.env

local DB

Only if you want to run the DB locally follow theses steps:

1. set DB_LOCAL=true in /server/.env
2. set DB_LOCAL_URI and DB_LOCAL_PORT in /server/.env as shown in the example file

remote DB

Only if you want to run the DB remotely follow theses steps:

1. set DB_LOCAL=false in /server/.env
2. set DB_URI_PROTOCOL, DB_URI_HOST and DB_URI_PARAMS in /server/.env as shown in the example file

Hint: For debugging and/or development purposes, you can set up databases both locally and remotely and switch between them by setting DB_LOCAL to true or false

Mail provider

• add EMAIL_USER and EMAIL_PASSWORD to /server/.env

Authentication

Set up an Application on auth0 and add AUTH0_DOMAIN, AUTH0_CLIENTID, AUTH0_CLIENT_SECRET and AUTH0_AUDIENCE to /server/.env

APIs

• unsplash: apply for an API key and add to /server/.env
• openrouteservice: apply for an API key and add to /client/.env.local

Start the App

Start client and server in dev mode locally

From the root folder of the project change into /server and npm start From the root folder of the project change into /client and npm start

Deploy the App

Build process

To create a build ready for Deployment, just run

npm run build

from the root folder of the project. The result will be created in server/dist and includes the compiled backend and frontend

start the App

To start the created build just run

npm start

from the root folder of the project.

Tech-Stack

Frontend

• TypeScript
• reactjs
• React Query
• Leaflet via react-leaflet
• formik
• Tailwind CSS

Backend

• Node.js
• Express
• TypeScript
• MongoDB
• Mongoose

CI / CD

• Github Actions
• Travis CI
• Codecov
• Heroku Github Sync

Hosting

• heroku for Frontend and Backend
• MongoDB Atlas for the Database

Authentication

• Auth0

APIs

• openrouteservice
• unsplash

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Mohammed Abdul Khader 💻 🤔

Alex Marshall 💻 ⚠️ 🎨

Stefan Huckschlag 💻 🚇🎨

This project follows the all-contributors specification. Contributions of any kind welcome!