Coder Social home page Coder Social logo

otahina / travel-tracker-fullstack-project Goto Github PK

View Code? Open in Web Editor NEW
2.0 1.0 4.0 8.81 MB

🌏Explore the world, mark your worldwide adventures with a click! 📌 This full-stack project 🗺️ is perfect for beginners, featuring interactive maps, user accounts, and secure data storage in the database! 🗄️

Python 1.99% CSS 2.51% JavaScript 95.40% HTML 0.10%
django django-rest-framework full-stack full-stack-developer full-stack-web-development javascript python3 react react-webapp beginner-friendly

travel-tracker-fullstack-project's Introduction

world-map-app-banner

GlobeMarks is a web application that allows users to log in, visually explore a map of the world, and mark the countries they have visited.

Using this app, user can create a personalized record of their journeys. All marked countries can be saved, and the data is securely stored in the database, offering users an engaging way to reflect on their global adventures.

Demo Highlights 🎬

map-webapp-demo.mov

Features 🌍

  • Interactive Global Map: Navigate a visual map of the world, zooming in and out to explore various regions.
  • Personalized Country Marking: Click and mark the countries you've visited, creating a unique travel footprint.
  • Dynamic Journey Visualization: See your travel history come to life as countries fill with color, reflecting your personal journey.
  • User Account Management: Register, log in, and manage your travel marks across different devices.
  • Data Persistence: Save your marked countries securely in the database, allowing you to revisit your travel history anytime.

Technologies 🛠️

🌐 Interactive Mapping with Leaflet and GeoJSON

GlobeMarks takes the art of interactive mapping to the next level using the powerful combination of Leaflet and GeoJSON.

  • Leaflet 🍃: Leaflet is the leading open-source JavaScript library for interactive maps. By integrating it into GlobeMarks, we bring you a fast, intuitive, and efficient mapping experience

  • GeoJSON 🌍: GeoJSON is a format for encoding a variety of geographic data structures. At its core, GlobeMarks uses GeoJSON to represent the shapes and boundaries of countries. This ensures precision and accuracy when you mark the countries you've visited.

  • Together, A Perfect Pair 🌟 The fusion of Leaflet's interactive capabilities with GeoJSON's data representation gives users of GlobeMarks a rich and immersive experience. Navigate the globe, zoom into regions, and mark countries with confidence knowing you're backed by some of the best tools in the world of web mapping.

Frontend

React JavaScript

  • React: Used for building the user interface, including components like the interactive map.
  • JavaScript: A programming language used in web development, especially in the creation of interactive effects within web browsers.

Backend

Django Python PostgreSQL

  • Django: A high-level Python Web framework that encourages rapid development and clean, pragmatic design.
  • Python: A programming language known for its readability and versatility.
  • PostgreSQL: The database system used for storing user data and travel marks securely.

Version Control

Git GitHub

  • Git: Used for version control, allowing for efficient collaboration and change tracking.
  • GitHub: Platform for hosting the codebase and managing collaboration.

How to use this project on your local machine 🩵

Step 1: Download the Code

Option 1: Clone the Repository (For Using & Experimenting)

git clone https://github.com/otahina/Travel-Tracker-FullStack-Project.git

Option 2: Fork the Repository (For Contributing)

  1. Click on the "Fork" button at the top-right corner of this page.
  2. Once the repository is forked, you can clone it to your local machine:

Step 2: Create a Virtual Environment (Optional but Recommended)

For windows

python -m venv myenv
.\myenv\Scripts\activate

For macOS and Linux

python3 -m venv myenv
source myenv/bin/activate

Step 3: Install Python dependencies

cd world_map_app
pip install -r requirements.txt

Step 4: Install Node Modules for React

cd world_map_app/frontend
npm install

Step 5: PostgreSQL Database Configuration 🐘

This project is using PostgreSQL for database

Before running the project, you need to set up a PostgreSQL database and configure the .env file.

On Windows:

  1. Download the installer from PostgreSQL Official Site.
  2. Run the installer and follow the instructions.

On Mac:

You can use Homebrew:

brew install postgresql
brew services start postgresql
  1. Open the command-line tool
psql -U postgres
CREATE DATABASE your_database_name; ①
CREATE ROLE newuser WITH LOGIN PASSWORD 'password'; ② ③
/c  your_database_name;
GRANT ALL PRIVILEGES ON DATABASE your_database_name TO newuser;
GRANT ALL PRIVILEGES ON SCHEMA public TO newuser;

Configure .env file

  1. Open the .envexample file.
  2. Change the name into '.env file.
  3. Edit .env file.
ENGINE=django.db.backends.postgresql_psycopg2 # you don't need to change here
NAME=your_database_name_here # ①
USER=your_database_user_here # ②
PASSWORD=your_database_password_here # ③
HOST=localhost_or_host_address_here # usually localhost

travel-tracker-fullstack-project's People

Contributors

otahina avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.