On My Way
Full Stack Web App
Company/Client
Hackbright Academy
Project Date
February 2024
My Role
Hackbright has asked for me to create a full-stack web app.
Project Summary
On My Way is an advanced trip planning tool that delivers a seamless travel experience. Users create personalized trips with essential details: title, description, dates, and budget. The user-friendly interface enables efficient excursion searches based on location, displaying detailed information and photos. Users easily add preferred excursions to their trips, enhancing itineraries with personal notes and specific dates. The profile interface consolidates all trips for easy access, allowing flexible review and modification. Within trip details, users navigate organized information, visualizing dates and a structured itinerary. Freedom to edit any component ensures a dynamic planning experience.
Objectives:
To ensure the success of the Hackbright project, I will adhere to the following minimum requirements:
Version Control:
Utilize Git to track project files.
Include a comprehensive .gitignore file and a well-documented readme.md file.
Repository Management:
Maintain a public GitHub repository for the project.
Pin the project repository to my GitHub profile and include the repository URL in my resume.
Dependency Management:
Employ virtualenv for the installation and tracking of project dependencies.
Include a requirements.txt file in the Git repository to document project dependencies.
Database Implementation:
Develop a SQL database with a minimum of one table.
Implement at least one SQLAlchemy class for querying the database.
Server Configuration:
Set up a Flask server to handle backend functionality.
Template Design:
Create 1-2 Jinja templates that demonstrate the use of template inheritance.
Styling:
Design and include at least one CSS file.
Bootstrap can be used as a CSS framework and counts as one CSS file.
JavaScript Integration:
Implement at least one feature that utilizes JavaScript to manipulate the Document Object Model (DOM).
This feature may involve the use of JavaScript frontend libraries, frameworks, and/or custom-written code.
Asynchronous Communication:
Include at least one AJAX request in the project to facilitate asynchronous communication between the client and server.
Documentation and Presentation:
Ensure thorough documentation of the project's structure, setup, and usage.
Present the project as a polished and functional web application.
Creating a Database
The first step in creating my app was to start with a database. I began by starting with creating use cases for my site. I asked myself what could a user do on my web app? I then wrote down everything that I would want my user to do in my app:
a user can sign in
a user can create trips
a user can have a profile
a user can upload photos
a user can delete trips
a user can edit trips
a user can create a username
a user can search for locations
a user can search for activities
a user can search for other users trips
My Model.py
From there I began creating tables in my falsk db. I started with the users table then slowly added more that I think I would need. There are some I added for future features, it is important to add those now before there is an established db with user information. These are the tree tables that I used in my project, you can see the rest that I created for future features in my github
User/Task Flow
Style Tile and UI Kit
My style tile presents my logo and color scheme. Once determining the color I moved on to creating the styles of buttons and other UI features that I wanted. The OMW UI Kit displays everything that I used to create the OMW website and designs.
Features
Once I decided to create a trip-planning app I brainstormed features for my site. I created a list of things that I thought would help the user plan a trip. Here is my initial list of features
some of the features that i wanted to add to my site
sign in or sign up as a user
can create trip itineraries or edit current ones
user inputs location and returns excursions
option for ai agent
site returns tickets for selected excursion
add hotel bookings
links to your google account - calendar and email
link with booking.com
google api
Once all of the features were listed I needed to narrow down what I wanted my MVP (minimal viable product) to include. I knew that to add all of these features for a first time project would be difficult based on the time allotted as well as my knowledge. From there I decided what I wanted to work on for my MVP.
From there I created my list of features for my MVP and worked feature by feature
I embarked on the development of my app's homepage with a clear vision in mind. Recognizing the importance of an engaging call-to-action (CTA) text and a seamlessly integrated button, I commenced the process by crafting a navigation bar. Understanding the pivotal role it plays in facilitating user navigation within the web app, I decided to leverage the power of React, a robust frontend library.
Continuing the development journey, I meticulously designed a consistent button that would maintain its presence across the entire app. Starting with a Figma prototype (seen to the right), I created button states for a neutral state, hover state, and a click state. I then translated the envisioned button into a React file, ensuring a cohesive and polished appearance for users throughout the website.
To enhance the visual appeal of certain aspects of the website, I opted for Bootstrap and discovered a navigation bar template that resonated with my design preferences. Utilizing my expertise, I tailored and edited the nav bar to align seamlessly with the aesthetic I envisioned in my Figma document. I also made sure that this navbar would render on every page.
My journey began with the intention of creating a streamlined login page, but as I delved into the intricacies, I encountered challenges. Adapting to the complexity, I innovatively crafted two buttons, a sign in button and a sign up button each serving distinct functions. To efficiently capture user input, I fashioned two React elements, orchestrating post requests to the backend for either user registration or database entry.
Recognizing the robust capabilities of React, I devoted significant effort to establishing a conducive frontend environment. Once committed to this framework, I meticulously designed both a sign-in and a sign-up form, ensuring a seamless integration with the backend through consistent post requests.
In the user registration process, a post request initiates a sequence where a CRUD function is executed on the server. This enables the addition of user-provided information into the database, fostering a comprehensive user repository.
Upon user sign-in, a post request is dispatched to the backend, where an advanced security measure unfolds. The password undergoes hashing and subsequent validation using bcrypt, ensuring a secure and protected authentication process.
The SignInForm function defines a client-side form handling mechanism, utilizing a POST request to the /sign-in/user endpoint upon user submission. It extracts email and password inputs, sends them as JSON to the backend, and processes the response: displaying an alert for unsuccessful sign-ins or redirecting to the homepage upon successful authentication.
This Flask route, /sign-in/user, processes incoming POST requests for user sign-in by retrieving email and password from the request's JSON data. It invokes the crud.sign_in_user function to authenticate the user, setting a session variable upon successful sign-in, and returning a JSON response with a success code; otherwise, it displays an error flash message and redirects the user to the sign-in page.
This Python function, sign_in_user, verifies a user's credentials by querying the database for the provided email, checking the entered password against the hashed password in the database using bcrypt. If successful, it returns the user object; otherwise, it handles incorrect passwords or non-existent users with appropriate flash messages.
In envisioning a robust travel app that would seamlessly offer users exciting excursions and detailed location information, my exploration led me to seek out the perfect API. After thorough research, it became evident that TripAdvisor's API stood out as an excellent choice for my application.
Delving into the API documentation, I discovered the optimal approach to accessing the desired information—specifically, the ability to perform location-based searches. Through careful examination of the documentation, I discerned a two-step process. First, I needed to initiate a call to the API to obtain the unique location ID. Subsequently armed with this key identifier, I could then retrieve comprehensive data, including location details such as ID, name, captivating photos, and insightful descriptions.
Server calling the TripAdvisor API
Retrieve location id based on user location search
Retrieve location details based on location id
Retrieve photos based on location id
This meticulous understanding of the API's functionality not only streamlined my development process but also ensured that users would have access to rich and engaging content, elevating their travel experience within the app.
Knowing what information I wanted to retrieve from the TripAdvisor API I began designing a card that would display all the information that the user needs to see. I crafted one card with React and then was able to apply it to my excursions page as well as a grid layout that I also created in react.
Below shows the card I created in React.
Upon achieving the seamless rendering of the excursion page, my focus shifted toward elevating the user experience by introducing a personalized touch. It was time to bring to life the user profile—an immersive space where users could not only reminisce about their past trips but also explore the curated information gathered during their signup journey, such as name and email. I decided to create each part of the profile page into their own React elements. I created an element to render the user information, then another element to render all of the trips that the user created.
To accomplish this, I seamlessly orchestrated additional AJAX requests, drawing upon the wealth of data stored in my database. This meticulous process ensured that users could effortlessly access a snapshot of their travel history along with the personalized details they shared during signup.
Building on the foundation of a meticulously crafted grid designed for rendering API results, I seamlessly extended its functionality to grace the user profile page as well. The same React file, employed with finesse, effortlessly translated the grid's visual appeal into captivating cards that adorned the user profile—a harmonious continuation of the app's aesthetic charm.
The last task for users is to tweak the details of their created trips. Here, I aim to display the trip and all its associated excursions based on its unique trip ID.
In this space, users can easily review and adjust various trip and excursion details, such as notes, times, and title. Once users decide to save these changes, my database gets updated, and the fresh information is then reflected on an updated page. It's a straightforward process, ensuring users have the flexibility to refine their travel plans with ease.
The finishing touch for OMW involved a meticulous styling process where I ensured a cohesive and polished appearance across the entire site. My initial focus was on the modals scattered throughout the platform – two implemented with React forms and the remaining two with HTML.
To enhance consistency, I opted to transform all modals into React forms. Leveraging the existing styling from one modal, I seamlessly applied it to the entire set, guaranteeing a uniform and familiar experience for users interacting with any modal across the site. This approach not only elevated the visual appeal but also contributed to a seamless and user-friendly design throughout the platform.
Continuing with the refinement process, I shifted my attention to the cards featured across my site, specifically focusing on the excursion page. To achieve a more uniform and visually appealing layout, I introduced a "Read More" button. This strategic addition ensures consistency in card sizes upon rendering, providing users with the ability to easily view and read comprehensive excursion descriptions while maintaining a harmonized and polished presentation.
In enhancing the visual elements of my profile page cards, I opted for a more impactful design approach. By incorporating bolder fonts and vibrant colors, I aimed to improve readability and ensure users can effortlessly absorb the wealth of information available on each card. This thoughtful adjustment not only prioritizes clarity but also adds a touch of vibrancy to create an engaging and visually appealing user experience.