Travel Tracker – Full-Stack Interactive World Map
Interactive map built as a full-stack travel tracker application.
Travel Tracker is a full-stack web application designed to help users visually record the countries they have visited. Each user can create a personalised profile by selecting a unique name and colour, then add, view, or remove visited countries from an interactive SVG world map.
The application includes autocomplete country search, duplicate-entry validation, responsive design, user switching, and complete travel-history management.
Tools Used
Responsive Design
Designed with a responsive layout to keep the family travel tracker easy to use and visually clear across desktop, tablet, and mobile screens.
Features of Full Stack Travel Tracker Application
👤 User Profile Management
Create users with personalised names and colour tags, switch between profiles, and remove users when required.
🌍 Visited Countries Tracker
Search and add visited countries using autocomplete suggestions and display them instantly on the world map.
🗺️ Interactive World Map
Visited countries are dynamically highlighted according to each user’s selected profile colour.
🗑️ Travel History Controls
Delete individual countries or reset the user’s complete travel history with simple controls.
⚠️ Input Validation
Displays clear error messages for duplicate countries, invalid searches, and empty submissions.
📱 Responsive Interface
Provides a clean and accessible experience across desktop, tablet, and mobile screen sizes.
🎨 Custom UI Styling
Includes custom radio-button colour selectors, Roboto typography, and a modern Flexbox-based layout.
What I Learned
💡 Full-Stack Application Development
Connected the frontend interface with server-side routes and a relational database.
🗄️ PostgreSQL Database Management
Stored and managed users, visited countries, profile colours and travel records.
🔄 CRUD Operations
Implemented functionality for creating, reading, updating and deleting user travel data.
🧩 Dynamic EJS Rendering
Used EJS templates to display personalised profile information and map updates dynamically.
🛣️ Express Routing
Created routes for managing users, adding countries, deleting records and resetting travel histories.
✅ Server-Side Validation
Handled duplicate, invalid and empty submissions while displaying helpful error messages.
📱 Responsive Web Design
Improved the layout for different screen sizes using Flexbox and responsive CSS techniques.
Other Projects in This Category
Wiki App – Full-Stack Knowledge Management System
Wiki App – Full-Stack Knowledge Management System
ToDo List App | Node.js & MongoDB Task Manager
World Capitals Quiz App | Full-Stack Quiz Web Application
Book Tracker Web Application Development
Secrets App | Secure Node.js & Express Web Application
QR Code Generator
Daily Journal Blog
Programming Quotes App – Dynamic Quote Generator
React Note Taking Application – Keeper App
Jokes API Web App
Full Stack Blog Application System – Blog API
Live API Weather App
