Your Destination Station
Explore the docs »
Deploy Link
·
Report Bug
·
Request Feature
This application and its accompanying api are deployed with Heroku. It may take a moment for the server and application to "wake" from Heroku's sleep state.
username: traveler50
password: traveler
Alternate usernames can be used by using traveler as the first part, and any number 1-50. Each user has their own unique set of data.
This was a personal project that challenged me to refactor a previous project written in vanilla JS to React. The previous version of "Travel Tracker" was a representation of my first 2 months of coding. This "remix" version reflects my progress as a frontend developer 8 weeks later. Learning goals were extended to include working with Express js by adding new endpoints to the api found here.
The original project spec can be found here.
This project challenged the developer to create an application that managed a single user's travels. Fetch calls were originally made to a locally hosted server (now refactored and deployed on Heroku) that contained three different data sets travelers, destinations, and trips. With this information, students were given creative control of how to display all relevant information to the user.
Key features of the application include making POST requests to book a new trip, GET requests to view previous trips, pending trips, and upcoming approved trips. Additional application features included displaying the cost of lodging and cost flights while booking, displaying a total trip cost prior to confirming the trip, and user ability to make a DELETE request to cancel the trip. Users also have the ability to log in and out through a "mock" login page.
Particular challenges included making different network requests containing data sets that required filtering and matching userIDs in order to display accurate trip information. This challenge was simplified by refactoring the original API mentioned above to handle new network requests and give desired specific user information removing the frontend logic and uneeded extra data from the original endpoints. More details about the API refactor can be found here.
Responisve design and MUI components were implemented to enhance the UX/UI for different devices.
To get a local copy up and running follow these simple steps.
- NPM
- React Router 5
- Dayjs
- Clone the repo
git clone https://github.com/justincanthony/travel-tracker-remix.git
- Install NPM packages
npm install
username: traveler50
password: traveler
Alternate usernames can be used by using traveler as the first part, and any number 1-50. Each user has their own unique set of data.
When visiting the application's home page, the user is presented with a login. Should the user forget thier password, they can click the forgot password link where there are simple instructions for logging in. Once the user has been granted access, the will be directed to thier dashboard wich displays the upcoming "approved" trip and links to help the traveler to further enhance thier adventure by checking dining, weather, events, and a special dynamic link that refelcts the user's traveler type property.
From the dashboard view, their are several other nav links that can direct the user to their desrired action. The Destinations link directs a user to a page view of all of the available destinations. While on this page, the user can book a trip by clicking on a Destination Card. Upon clicking the Book Me button, a modal form will pop up asking the user to input a date, duration, and number of travelers. The cost of the trip will dynamically display as the user enters information. Once their trip has been submitted, a toast notification will display the status of the request and details of the trip requested. The user can switch page views to Pending Trips where they can preview their requested trip and cancel it should they choose to do so. A final page view displays all of the user's past trips.
When the user has concluded their session, they can log out of their account by accessing the dropdown menu found in the navbar, and selecting Logout.
Screen Size EXAMPLES
| Mobile Spec | Desktop Spec |
|---|---|
 |
 |
See the open issues for a list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Justin Anthony
GitHubjustincanthony@gmail.com