Travel Tracker FullStack Project

Globemarks es una aplicación web que permite a los usuarios iniciar sesión, explorar visualmente un mapa del mundo y marcar los países que han visitado.

Usando esta aplicación, el usuario puede crear un registro personalizado de sus viajes. Todos los países marcados se pueden guardar, y los datos se almacenan de forma segura en la base de datos, ofreciendo a los usuarios una forma atractiva de reflexionar sobre sus aventuras globales.

Demo Highlights?

map-webapp-demo.mov

Características ?

• Mapa global interactivo : navegue un mapa visual del mundo, acercando y saliendo para explorar varias regiones.
• Marcado en el país personalizado : haga clic y marque los países que ha visitado, creando una huella de viaje única.
• Visualización del viaje dinámico : vea su historial de viajes cobra vida a medida que los países se llenan de color, reflejando su viaje personal.
• Gestión de la cuenta de usuario : registre, inicie sesión y administre sus marcas de viaje en diferentes dispositivos.
• Persistencia de datos : guarde a sus países marcados de forma segura en la base de datos, lo que le permite volver a visitar su historial de viajes en cualquier momento.

Tecnologías

Mapeo interactivo con folleto y geojson

Globemarks lleva el arte del mapeo interactivo al siguiente nivel utilizando la poderosa combinación de Follet y Geojson .

• Folleto? : Follet es la biblioteca JavaScript de código abierto líder para mapas interactivos. Al integrarlo en marcas de globas , le traemos una experiencia de mapeo rápida, intuitiva y eficiente

• Geojson? : Geojson es un formato para codificar una variedad de estructuras de datos geográficos. En esencia, Globemarks usa Geojson para representar las formas y límites de los países. Esto garantiza la precisión y la precisión cuando marca los países que ha visitado.

• Juntos, ¿un par perfecto? La fusión de las capacidades interactivas de Follet con la representación de datos de Geojson brinda a los usuarios de marcas de globas una experiencia rica e inmersiva. Navegue por el mundo, se acerca a las regiones y marque a los países con confianza sabiendo que está respaldado por algunas de las mejores herramientas del mundo del mapeo web.

Interfaz

• React : utilizado para construir la interfaz de usuario, incluidos componentes como el mapa interactivo.
• JavaScript : un lenguaje de programación utilizado en el desarrollo web, especialmente en la creación de efectos interactivos dentro de los navegadores web.

Backend

• Django : un marco web de Python de alto nivel que fomenta un desarrollo rápido y un diseño limpio y pragmático.
• Python : un lenguaje de programación conocido por su legibilidad y versatilidad.
• PostgreSQL : el sistema de base de datos utilizado para almacenar datos de usuario y marcas de viaje de forma segura.

Control de la versión

• GIT : utilizado para el control de versiones, lo que permite una colaboración eficiente y un seguimiento de cambios.
• GitHub : plataforma para alojar la base de código y administrar la colaboración.

¿Cómo usar este proyecto en su máquina local?

Paso 1: Descargue el código

Opción 1: Clonar el repositorio (para usar y experimentar)

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

Opción 2: Bifurca el repositorio (para contribuir)

1. Haga clic en el botón "Bifurca" en la esquina superior derecha de esta página.
2. Una vez que el repositorio está bifurcado, puede clonarlo a su máquina local:

Paso 2: crear un entorno virtual (opcional pero recomendado)

Para Windows

 python -m venv myenv
.myenvScriptsactivate

Para macOS y Linux

 python3 -m venv myenv
source myenv/bin/activate

Paso 3: Instalar dependencias de Python

 cd world_map_app
pip install -r requirements.txt

Paso 4: Instale módulos de nodo para reaccionar

 cd world_map_app/frontend
npm install

Paso 5: ¿Configuración de la base de datos PostgreSQL?

Este proyecto está utilizando para la base de datos

Antes de ejecutar el proyecto, debe configurar una base de datos PostgreSQL y configurar el archivo .env .

En Windows:

1. Descargue el instalador desde el sitio oficial de PostgreSQL.
2. Ejecute el instalador y siga las instrucciones.

En Mac:

Puedes usar Homebrew:

 brew install postgresql
brew services start postgresql

3. Abra la herramienta de línea de comandos

 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;

Configurar el archivo .env

1. Abra el archivo .envexample.
2. Cambie el nombre en ' .env archivo.
3. Editar el archivo .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