TimelessTrails - Find Historic Sites in Charlottesville

Home Page
Search Page
Search page pt.2

Inspiration

Our team was influenced by the projects suggested on the HooHacks website. After communicating our individual ideas to each other, we decided that we all wanted to challenge ourselves and attempt to build a project that neither of us felt super comfortable in building--the reason for this was because we all wanted to learn as much as we could from this hackathon and from each other. We decided on doing a website that highlights historic sites in Charlottesville because we all felt that it met our needs in wanting to learn the most we could from building this project.

What it does

Our project is a website that highlights historic sites in Charlottesville. The user goes to our website and is met with a home screen that titles our project name along with a beautiful history related icon in the top left as well as a background image of Charlottesville downtown with a search button on top of this background image. When the user clicks on the search button on the home screen, the user is sent to a second page which we've denoted as the search page. On this page, the user will be shown all the historical sites in Charlottesville with a red marker of the location of said site. When the user clicks on the red marker, the name, address, and a brief description of that historical site is shown to the user--this is the same process for when the user clicks on any of the red markers.

How we built it

Our team used Python to create a selenium web scraper to then create our own CSV file from a verified website that showcases all of the historical sites in Charlottesville. From this, we then used a Google Maps API to convert addresses to longitude and latitude formatting using geocoding. Then, these coordinates were input as markers on an interactive map.

Challenges we ran into

One of the very first challenges we faced was that our team arrived late to the hackathon (approximately 2:20pm on March 23rd), meaning that we had less time to work on our project. The next challenge we faced as a team was that the database we had first found for our website contained unreliable information in terms of addresses not lining up with the actual names and actual addresses of the historical sites in the city. Therefore, we decided to simply create our own CSV file with the names, addresses, etc by finding an accurate and verified website that we was filtered to only historic sites in the state of Virginia and the city of Charlottesville--not being able to use our first data set made it hard to work with the Geocoding API without losing multiple data markers and having limited data to work with, however, we eventually managed and found a way to overcome this. Another major challenge we had to overcome was the fact that two out of three members of our team have never participated in any sort of programming competition or hackathon and had limited to almost no experience in most of the languages used in this project.

Accomplishments that we're proud of

A few accomplishments the team is proud of is the Python Selenium web-scraper robot that we built using a Google API which we then programmed to function as an interactive map on our website - making it easy to implement the map for users to use with a familiar platform like Google Maps. A few members of the team used Tailwind CSS, Javascript, TypeScript, Figma and Next.JS for the first time, and finding out about this new framework and its versatility was exciting to learn. Another feat that we achieved is creating a functional website that anyone - tourists or residents of Charlottesville alike - can use to explore the historic sites around them. It feels amazing to have come out of these last few hours having a functional website that we built completely from nothing!

What we learned

The beginners of our team learned how to work with all of the programming languages listed as well as how to navigate VSCode. Overall, everyone in our team learned several new elements to Computer Science since we had decided to pick a project that would challenge everyone in our team to maximize learning outcomes.

What's next for TimelessTrails - Find Historic Sites in Charlottesville

We hope to have this website become an interactive online platform where users can log in and have an avatar (which they can customize to their liking) present throughout the city of Charlottesville. This would be like a game on a website where everyone from all over the world can log in and jump to whatever red marker they want to view and learn more about while also interacting with other users!