- Leveraging the power of Google Map api, for any place you find there, you can find it on TravKer too!
- You are not only dropping a pin on Map, but also logging your travel details such as Date, Pictures (max. 4), Ratings and Comments so that you can always click on the pin and review your travel moments.
- You can add as many pins as you like, edit and delete the pin as you wish.
- All the pins are added automatically to the list of the sidebar on the left. You will be redirected to the pin location by just clicking any place.
- A "Locate-me" icon on top right of the map is there for you to locate your current location.
- Homepage: ./screenshot/homepage.png
- Register ./screenshot/register-page.png
- Login Screenshot: ./screenshot/login-page.png
- Dashboard: ./screenshot/dashboard.png
- Add Pin Form: ./screenshot/form.png
- Pin Info Box: ./screenshot/info-window.png
- Demo video: https://youtu.be/vvC1Y212qco
- Live Site: https://travker.netlify.app *Please note that the Live Site might not work properly due to expired free trial of google cloud service account
- Clone the repo
git clone https://github.com/weilin93/travelog.git
cd travelog
- Install dependencies (root)
npm install
- Install dependencies (client)
cd ..
cd client
npm install
- Install dependencies (server)
cd ..
cd server
npm install
-
Create a new project on https://console.cloud.google.com/ and create a new Api Key. Replace googleMapsApiKey on /client/src/dashboard/dashboard.jsx with the new Key you created.
-
Setup firebase configuration https://firebase.google.com/
-
Start development
cd ..
npm run dev
- React - Front end library for building user interfaces
- React Router - Routing and navigation for React
- Node.js - Back end server
- Express - Back end framework for Node.js
- MongoDB - Non-SQL Database
- Mongoose - ORM for MongoSB
- Firebase Storage - Realtime storage
- React Google Map Api - Bindings to the google maps api and is used as React Components
- JWT - Authentication. Shares security information between client and server
- Canva - Logo design, background image and video editing tools.
- Love, lots of love ♥