Travel Tracker

Try it here! (You'll only need to run the BE if you use the site)

About

Travel Tracker is an application designed to streamline the travel planning and tracking process for both individual travelers and travel agencies. The project simulates real-world travel management applications, aiming to simplify how users and agencies manage, track, and plan trips. The project's primary focus is on achieving the following objectives:

• Data Manipulation: Leverage object and array prototype methods for efficient data manipulation, enabling dynamic interaction with travel information.
• User Interface: Create a clear and intuitive user interface that facilitates easy access to travel data, improving user experience by making navigation and trip management straightforward.
• Testing: Build a comprehensive testing suite using Test-Driven Development (TDD) principles to ensure the reliability and robustness of the code, contributing to a stable and functional application.
• Network Requests: Utilize network requests to interact with a backend server, allowing for the retrieval and storage of trip data to mimic a realistic user environment where data is dynamic and persistent.

Install Travel Tracker Back End

1. Clone down this repo.
   • Clone the travel-tracker BE repository to your local machine by running the following command in your terminal:

git clone <repository-URL>

2. Navigate to Project Directory:
   • Change into the cloned project directory with:

cd travel-tracker-api

3. Install Dependencies:

   • Install all necessary dependencies by running:

npm install

4. Start the back end:

   • Launch the application by running:

npm start

Install Travel Tracker Fron End

1. Check Node.js Installation:

   • Ensure you have Node.js installed on your computer. If not, download and install it from the official Node.js website.

2. Clone the Repository:

   • Clone the travel-tracker repository to your local machine by running the following command in your terminal:

git clone <repository-URL>

3. Navigate to Project Directory:

   • Change into the cloned project directory with:

cd travel-tracker

4. Install Dependencies:

   • Install all necessary dependencies by running:

npm install

5. Start the Application:

   • Launch the application by running:

npm start

6. Explore Travel Tracker:
   • Log in with username: traveler<number between 1-50> and password: traveler
   • Go to the local directory listed in your terminal. You should now see the Travel Tracker dashboard loaded in your browser, ready for you to explore the features and functionality.

Tech

• Jacascript ES6+
• HTML
• SCSS
• Webpack
• Mocha and Chai
• Fetch API
• Git and GitHub

Reflections

Wins

Travel Tracker aimed to merge a modern aesthetic with intuitive usability, focusing on a minimalist color scheme and layout. By selecting a simple color palette and thoughtful layout placement, I created an interface that is easy to navigate without sacrificing visual appeal. This approach to design not only made the application more engaging but also enhanced its usability. Feedback from users highlighted the ease of navigation and the clean, uncluttered user experience. This achievement highlights the commitment to balancing aesthetics with functionality, proving that applications can be both attractive and easy to use.

Challenges

One of the challenges I faced during the project was determining the optimal moments to utilize fetch requests. Integrating network requests to retrieve and send data is essential for the functionality of any modern web application, yet finding the precise timing within the user journey for these requests was complex. Addressing this challenge not only bolstered the project's technical robustness but also deepened my understanding of effective data management and the critical role of aligning network requests with user needs and application efficiency.

What was done to address accessibility

Usability testing for the Travel Tracker application was planned and executed to assess the application's user interface, accessibility, and overall functionality from an end-user perspective Special attention was given to the application's accessibility, leveraging tools like Lighthouse and WAVE to meet WCAG guidelines, ensuring a user-friendly interface that aligns with project goals.

Up Next

In the next phase of development, I'm focusing on enhancing user interaction with the Travel Tracker application by enabling users to click on any item within the pending or past trips sections to view detailed descriptions and data about each trip. This feature is aimed at providing users with a more immersive and informative experience, allowing them to delve deeper into the specifics of their travel history and pending adventures.

Screenshots

Contributors

• Edwin Chalmers : [email protected] : github.com/edwin-chalmers