Travel Tracker FullStack Project

GlobEmarks est une application Web qui permet aux utilisateurs de se connecter, d'explorer visuellement une carte du monde et de marquer les pays qu'ils ont visités.

En utilisant cette application, l'utilisateur peut créer un enregistrement personnalisé de ses voyages. Tous les pays marqués peuvent être enregistrés et les données sont stockées en toute sécurité dans la base de données, offrant aux utilisateurs un moyen attrayant de réfléchir à leurs aventures mondiales.

Points forts de la démo?

map-webapp-temo.mov

Caractéristiques ?

• Carte globale interactive : naviguez sur une carte visuelle du monde, en zoomant et en zoomant pour explorer diverses régions.
• Marquage du pays personnalisé : cliquez et marquez les pays que vous avez visités, créant une empreinte de voyage unique.
• Visualisation du voyage dynamique : voyez votre histoire de voyage prendre vie alors que les pays se remplissent de couleur, reflétant votre parcours personnel.
• Gestion des comptes d'utilisateurs : inscrivez-vous, connectez-vous et gérez vos marques de voyage sur différents appareils.
• Persistance des données : enregistrez vos pays marqués en toute sécurité dans la base de données, vous permettant de revisiter vos antécédents de voyage à tout moment.

Technologies

Cartographie interactive avec leplateur et Geojson

GlobeMarks fait passer l'art de la cartographie interactive au niveau suivant en utilisant la puissante combinaison de dépliants et de Geojson .

• Dépliant? : Le dépliant est la principale bibliothèque JavaScript open source pour les cartes interactives. En l'intégrant dans GlobeMarks , nous vous offrons une expérience de cartographie rapide, intuitive et efficace

• Geojson? : Geojson est un format pour coder une variété de structures de données géographiques. À la base, GlobeMarks utilise Geojson pour représenter les formes et les limites des pays. Cela garantit la précision et la précision lorsque vous marquez les pays que vous avez visités.

• Ensemble, une paire parfaite? La fusion des capacités interactives de Leaflet avec la représentation des données de Geojson donne aux utilisateurs des GlobEmarks une expérience riche et immersive. Naviguez dans le monde, zoomez sur les régions et marquez les pays en toute confiance en sachant que vous êtes soutenu par certains des meilleurs outils du monde de la cartographie Web.

L'extrémité avant

• React : Utilisé pour la construction de l'interface utilisateur, y compris des composants comme la carte interactive.
• JavaScript : un langage de programmation utilisé dans le développement Web, en particulier dans la création d'effets interactifs au sein des navigateurs Web.

Backend

• Django : un cadre Web Python de haut niveau qui encourage le développement rapide et la conception pragmatique propre.
• Python : un langage de programmation connu pour sa lisibilité et sa polyvalence.
• PostgreSQL : Le système de base de données utilisé pour stocker les données des utilisateurs et les marques de voyage en toute sécurité.

Contrôle de version

• GIT : Utilisé pour le contrôle des versions, permettant une collaboration efficace et un suivi des changements.
• GitHub : plate-forme pour l'hébergement de la base de code et la gestion de la collaboration.

Comment utiliser ce projet sur votre machine locale?

Étape 1: Téléchargez le code

Option 1: cloner le référentiel (pour l'utilisation et l'expérimentation)

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

Option 2: Fourchez le référentiel (pour contribuer)

1. Cliquez sur le bouton "Fork" dans le coin supérieur droit de cette page.
2. Une fois le référentiel fourché, vous pouvez le cloner sur votre machine locale:

Étape 2: Créez un environnement virtuel (facultatif mais recommandé)

Pour les fenêtres

 python -m venv myenv
.myenvScriptsactivate

Pour macOS et Linux

 python3 -m venv myenv
source myenv/bin/activate

Étape 3: Installez les dépendances Python

 cd world_map_app
pip install -r requirements.txt

Étape 4: Installez les modules de nœud pour réagir

 cd world_map_app/frontend
npm install

Étape 5: Configuration de la base de données PostgreSQL?

Ce projet utilise pour la base de données

Avant d'exécuter le projet, vous devez configurer une base de données PostgreSQL et configurer le fichier .env .

Sur Windows:

1. Téléchargez l'installateur à partir du site officiel de PostgreSQL.
2. Exécutez le programme d'installation et suivez les instructions.

Sur Mac:

Vous pouvez utiliser Homebrew:

 brew install postgresql
brew services start postgresql

3. Ouvrez l'outil de ligne de commande

 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;

Configurer le fichier .env

1. Ouvrez le fichier .envexample.
2. Modifiez le nom en fichier ' .env .
3. Modifier le fichier .env .

 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