/TomAndJourney

This website is trip planner site name's TomAndJourney

Primary LanguageJavaScript

🌍 Tom & Journey – Your Ultimate Travel Companion βœ¨πŸš€

Tom & Journey is a collaborative effort between Atibdee and me, resulting in a user-friendly travel planning website developed as part of our Software Developer coursework. Tailored for ease of use, this platform empowers users to effortlessly plan their trips with customizable filters for various points of interest. Once a route is selected, the site provides estimates for distance, time, and budget. Users can personalize their itineraries, zoom in/out on the map, and leverage OpenStreetMap's extensive data.

Our project also includes a thoughtfully designed admin panel, enabling seamless pin configuration with MongoDB integration for real-time database updates. Tom & Journey serves as a testament to our expertise in web development, database management, and user-centric design.

Table of Contents

Lessons Learned πŸŽ“

Back to top

πŸ”„ Authentication Session πŸ”„

  • πŸ” Ensuring a Secure User Experience by establishing trust and preventing unauthorized access.
  • 🚷 Disallowing simultaneous logins from multiple locations
  • πŸšͺ Providing a secure logout mechanism to effectively terminate user sessions.
  • πŸ”‘ Managing access levels and permissions (user role and admin role)
  • 🌐 Maintaining user identity during their interactions with the platform

πŸ—ƒοΈ phpmyadmin database πŸ—ƒοΈ

  • πŸ›‘οΈ Encrypting sensitive data utilizing md5.
  • 🎨 Interface for database manipulation.
  • 🚨 Implementing effective error handling mechanisms to promptly detect and address issues within the database.
  • πŸ§‘β€πŸ’» Defining and enforcing appropriate permissions for database users to restrict access based on roles and responsibilities.
  • πŸ“‹ Implementing proper data validation mechanisms to ensure the integrity and accuracy of information stored in the database.

πŸ—ΊοΈ Interactive Map πŸ—ΊοΈ

  • πŸ•’ Providing dynamic and real-time information on the interactive map.
  • πŸ€— Creating an intuitive and easy-to-use navigation system.
  • πŸƒ Utilizing Leaflet and OpenStreetMap for enhanced map functionality.

πŸ“œ Website Programming πŸ“œ

  • πŸ–₯️ Designing websites that adapt to different devices for an optimal user experience.
  • πŸ› οΈ Structuring code in a modular way for easier maintenance and scalability.
  • πŸ™‹β€β™‚οΈ Implementing features that prioritize user needs and enhance usability.
  • πŸ”„ Integrating code changes regularly to maintain a stable and up-to-date website.
  • πŸ•΅οΈ Implementing mechanisms to detect and handle errors, while maintaining logs for analysis.
  • 🧰 Leveraging relevant programming tools like PHP, JS, CSS, and Bootstrap to streamline development processes.

Screenshots πŸ“·

Back to top

🏑✨ Home Page ✨🏑
When you click on the Tom&Journey website, this is the first page you will see.

🌈πŸšͺ Login Page πŸšͺ🌈
Back to top
We have implemented a system to distinguish between users and administrators. Additionally, we have implemented a session system that prevents others from logging into your account simultaneously. This system is also used for the logout functionality.
If you login with the admin account, it will redirect you to the Admin Panel Page.
βœοΈπŸ“‹ Register Page πŸ“‹βœοΈ
Back to top
You must register before logging into Tom&Journey. If you register on the webpage, your role will be user. The only way to add an admin user is by accessing the database directly. The registered data will be stored in the database.

πŸ‘‘πŸ“„ Profile Page πŸ“„πŸ‘‘
Back to top
After logging in, you can access your profile through the navigation bar, where it will display your account details. On this page, you have the option to edit your email and password.

πŸ—ΊοΈπŸš— Trip Planner Page πŸš—πŸ—ΊοΈ
Back to top
Your trip planner will recommend a suitable trip for you, displaying the trip name, total distance, total travel time, and the number of places to visit. The time and distance are calculated using Leaflet and OpenStreetMap, open-source tools that provide an interactive map experience.
If you're not currently logged in, an inviting modal will gracefully appear, suggesting that you log in for an enhanced experience.
I've designed the trip planner page to include a map, map filters, pins, pin details, and automatic trip routing. You have the freedom to move the map as you wish, with the ability to zoom in and out. The filters consist of 10 categories, including points of interest for photography, hotels, gas stations, food establishments, metro/skytrain stations, museums, grocery stores, ports, cafes, and bars. Each filter can be toggled separately. The pins are added manually, and the routing system is provided by Leaflet.

πŸ’­πŸ—¨οΈ Modals πŸ’­πŸ—¨οΈ
Back to top
This modal will appear when you have successfully logged into the system.
This modal will show up when you fail to log in to your system due to an unregistered account.
This modal will show up when you fail to log in to your system due to blank username and password input.
This modal will show up when you fail to log in to your system due to entering the wrong username or password.

πŸš€πŸŒ Admin Panel Page πŸŒπŸš€
Back to top
The dashboard will display shortcuts for each category.
admin_1
On this page, you can add, edit, or delete train pins.
admin_2
On this page, you can add, edit, or delete bar pins.
admin_3
On this page, you can add, edit, or delete cafe pins.
admin_4
On this page, you can add, edit, or delete anchor pins.
admin_5
On this page, you can add, edit, or delete market pins.
admin_6
On this page, you can add, edit, or delete food pins.
admin_7
On this page, you can add, edit, or delete pump pins.
admin_9
On this page, you can add, edit, or delete hotel pins.
admin_10
On this page, you can add, edit, or delete photo pins.
admin_11
On this page, you can add, edit, or delete museum pins.
On this page, you can add, edit, or delete photo pins.
On this page, we've set the recommended trip for you. You can add, edit, or delete trip recommendations. Which will show on the first page of trip planner.

🌟✨ About Us Page πŸ“œβœ¨
Back to top
This page serves as the credit page for contributors.

Contributor πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Back to top