Travel Tracker FullStack Project

Globemarks adalah aplikasi web yang memungkinkan pengguna untuk masuk, secara visual menjelajahi peta dunia, dan menandai negara -negara yang telah mereka kunjungi.

Menggunakan aplikasi ini, pengguna dapat membuat catatan yang dipersonalisasi tentang perjalanan mereka. Semua negara yang ditandai dapat disimpan, dan data disimpan dengan aman dalam database, menawarkan pengguna cara yang menarik untuk merefleksikan petualangan global mereka.

Sorotan demo?

peta-webapp-demo.mov

Fitur ?

• Peta Global Interaktif : Navigasi peta visual dunia, zoom masuk dan keluar untuk menjelajahi berbagai wilayah.
• Penandaan Negara yang Dipersonalisasi : Klik dan tandai negara -negara yang telah Anda kunjungi, membuat jejak perjalanan yang unik.
• Visualisasi Perjalanan Dinamis : Lihat sejarah perjalanan Anda menjadi hidup ketika negara -negara dipenuhi dengan warna, mencerminkan perjalanan pribadi Anda.
• Manajemen Akun Pengguna : Mendaftar, Masuk, dan Kelola Tanda Perjalanan Anda di berbagai perangkat.
• Kegigihan Data : Simpan negara Anda yang ditandai dengan aman dalam database, memungkinkan Anda untuk meninjau kembali riwayat perjalanan Anda kapan saja.

Teknologi

Pemetaan interaktif dengan selebaran dan geojson

Globemarks membawa seni pemetaan interaktif ke tingkat berikutnya menggunakan kombinasi kuat leaflet dan geojson .

• Selebaran? : Leaflet adalah perpustakaan JavaScript open-source terkemuka untuk peta interaktif. Dengan mengintegrasikannya ke dalam Globemarks , kami memberi Anda pengalaman pemetaan yang cepat, intuitif, dan efisien

• Geojson? : Geojson adalah format untuk mengkode berbagai struktur data geografis. Pada intinya, Globemarks menggunakan Geojson untuk mewakili bentuk dan batas negara. Ini memastikan ketepatan dan keakuratan ketika Anda menandai negara yang telah Anda kunjungi.

• Bersama -sama, pasangan yang sempurna? Penggabungan kemampuan interaktif leaflet dengan representasi data Geojson memberi pengguna Globemarks pengalaman yang kaya dan mendalam. Navigasi dunia, perbesar ke daerah, dan tandai negara -negara dengan kepercayaan diri mengetahui Anda didukung oleh beberapa alat terbaik di dunia pemetaan web.

Frontend

• React : Digunakan untuk membangun antarmuka pengguna, termasuk komponen seperti peta interaktif.
• JavaScript : Bahasa pemrograman yang digunakan dalam pengembangan web, terutama dalam penciptaan efek interaktif dalam browser web.

Backend

• Django : Kerangka kerja web python tingkat tinggi yang mendorong pengembangan cepat dan desain pragmatis yang bersih dan bersih.
• Python : Bahasa pemrograman yang dikenal karena keterbatasan dan keserbagunaannya.
• PostgreSQL : Sistem basis data yang digunakan untuk menyimpan data pengguna dan merek perjalanan dengan aman.

Kontrol Versi

• GIT : Digunakan untuk kontrol versi, memungkinkan untuk kolaborasi yang efisien dan mengubah pelacakan.
• GitHub : Platform untuk hosting CodeBase dan mengelola kolaborasi.

Bagaimana cara menggunakan proyek ini di mesin lokal Anda?

Langkah 1: Unduh kode

Opsi 1: Kloning repositori (untuk menggunakan & bereksperimen)

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

Opsi 2: Fork The Repository (untuk berkontribusi)

1. Klik tombol "Fork" di sudut kanan atas halaman ini.
2. Setelah repositori bercabang, Anda dapat mengkloningnya ke mesin lokal Anda:

Langkah 2: Buat lingkungan virtual (opsional tetapi direkomendasikan)

Untuk windows

 python -m venv myenv
.myenvScriptsactivate

Untuk MacOS dan Linux

 python3 -m venv myenv
source myenv/bin/activate

Langkah 3: Pasang dependensi Python

 cd world_map_app
pip install -r requirements.txt

Langkah 4: Instal Modul Node untuk Bereaksi

 cd world_map_app/frontend
npm install

Langkah 5: Konfigurasi Basis Data PostgreSQL?

Proyek ini digunakan untuk database

Sebelum menjalankan proyek, Anda perlu mengatur database PostgreSQL dan mengkonfigurasi file .env .

Di Windows:

1. Unduh pemasang dari situs resmi PostgreSQL.
2. Jalankan penginstal dan ikuti instruksi.

Di Mac:

Anda dapat menggunakan homebrew:

 brew install postgresql
brew services start postgresql

3. Buka alat baris perintah

 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;

Konfigurasikan file .env

1. Buka file .envexample.
2. Ubah nama menjadi file .env .
3. Edit file .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