the layouts and styling for the Destinations, Hotels, and Points of Interest pages. ◦ Integrated pagination to manage the display of results on each page. ◦ Implemented SearchBar component for user interaction ◦ Developed functionality to highlight search terms within content for better user visibility. • Pagination Component ◦ Designed a reusable Pagination component for managing navigation through paginated content. ◦ Included dynamic page number generation and navigation controls. • Search Bar Component ◦ Developed a Search Bar component to handle user input and trigger search functionality. ◦ Ensured consistent search capabilities across multiple pages. Role: Frontend
pages using a single class ▪ The class takes in the information to be displayed and boolean values that describe which fields we're looking to display • Page Navigation ◦ Improved navigation between pages by adding links to our instance pages that take the user to the other two models • Filtering and Sorting ◦ Implemented filtering and sorting for the three model pages ◦ Sorting can be done by any attribute that is sortable (i.e. all the non-url attributes) and by ascending or descending order ◦ Added value filtering for latitude and longitude for Destinations and rating and total rating for Hotels and Points of Interest Role: Frontend
Utilized Bootstrap components to create a clean and organized layout. ◦ Included individual GitLab data for each team member, displayed in uniform Bootstrap cards. ◦ Implemented dynamic updates to reflect changes in data, ensuring up-to-date information. • Implementation of Pagination on the Backend ◦ Developed backend logic using Flask to handle pagination requests efficiently. • Use of RESTful API ◦ Utilized RESTful API endpoints for CRUD operations on destinations, hotels, and points of interest. ◦ Implemented secure API routes with proper authentication and authorization mechanisms. ◦ Provided detailed API documentation to facilitate easy integration with the frontend and other services. • Aggregation and Structuring of Data ◦ Aggregated data from various sources, including Google Maps APIs and Wikipedia API. ◦ Implemented data validation and cleaning processes to ensure data integrity and consistency. Role: Backend
API to collect instances for each of the three models ◦ Specified various keywords for Google Maps Places API to filter API results to provide detailed information pertinent to the project data models. • GCP server setup and deployment ◦ Created two projects in GCP to deploy frontend and backend separately ◦ Linked a custom website domain “tripsmart.me” to the frontend project via DNS records verification ◦ Implemented app.yaml files to define the project runtime environment and configuration settings ◦ Deployed the frontend and backend • SQL database ◦ Designed a PostgreSQL database hosted on GCP to store data instances ◦ Created database tables for each of the three models and defined relationships to link the data models ◦ Utilized SQLAlchemy to connect the database to the backend Role: Backend
Designed a RESTful API for our website using Postman as a design platform ◦ Programmed paths for our 3 models in the backend: Destinations, Points of Interest, and Hotels ▪ Get All Instances (matching query parameters) ▪ Get One Instance ▪ Get Number of Instances ◦ Created unit tests for each of the paths using Postman ◦ Formatted the Postman documentation to be clear and concise • Front-end Visualization for RESTful API ◦ Developed a front-end display of our API results in a simple, plaintext JSON format ◦ Added error results for users when attempting to access invalid API paths Role: Frontend/Backend
website looks clean and is easy to navigate ◦ Website has a consistent visual theme ◦ Everything loads relatively fast ◦ Data is organized relatively well • What we learned ◦ Overcame challenges related to API limitations and data integration by pivoting to more suitable APIs. ◦ Developed problem-solving skills by finding and implementing effective solutions to technical issues. ◦ Learned to make the frontend interact with the backend using Axios for HTTP requests.
◦ We could add country values to the destinations so we could then sort and filter by country ◦ The filtering doesn't entirely work for non-Chrome browsers ◦ Perhaps by using the latitude and longitude coordinates, we could further use the Google Maps API or something similar to offer a plotting for each destination in the instance page. ▪ We could then also add latitude and longitude to hotels and points of interest to add the same feature. ◦ Better management of GCP credits. We used APIs made by Google and stored 550+ instances in the SQL database, which rapidly consumed credits. ◦ The /api path could have displayed information about how to use the API without having to visit the collection • What puzzles us ◦ Were having some issues with some website functionality not fully working on anything but Chrome ▪ At first, our instance and navigation pages would not fully render all information needed in order to traverse properly
do well ◦ Splash Page ▪ The splash page model is very well made and interesting to look at ◦ Instance Pages ▪ The stock price history graph on the instance page is very well made, allowing for clear visualization of stock performance and is interactable, showing the price marks at each day ◦ Aesthetic ▪ The aesthetics of the website match the topic well • What'd we learn ◦ One thing we picked up was the idea of visualizing our data, like this group does with its stock history chart
can do better ◦ Data ▪ A majority of the instances don't have a sector or industry values ▪ Very nitpicky but there's a record that has every value as N/A ◦ Filtering ▪ Could add filtering by attribute values for all 3 models vs. just having categorical filtering ▪ Some of the categories result in 0 values when filtered ▪ Another minor nitpick, but after filtering there's no reset button other than refreshing the page/pressing the search bar • What puzzles us about their website ◦ The model on the splash page