Pork's Places

Our goal is to recommend outdoor places to visit for the recovering post-lockdownite. We will provide a searchable list of locations with data, including distance from an address and a map.

Comment

Inspiration

Our inspiration came from our love for the outdoors. We want to share the beauty of Washington with others. We know there are tools out there that list all the parks in Washington. What our website brings to the table is a curated list of places we recommend.

What it does

The website recommends a random “Place of the Day” on the home page every day, but in separate pages shows a sorted list of all the places we recommend with searchable filters. On another page, we show all the places on an interactive map so you can get a visual sense of where everything is. We also have a Sustainability page going over our goals and justification for our project. Finally we have a Creators page that shows the team behind the whole thing with pictures.

How we built it

The website is built on a Flask and JS backend. We used HTML and CSS for the frontend. The reason we used both Flask and JS for the backend was because of the google maps api. The maps api only works with JS. When creating the website we relied heavily on making wireframes for each page and learning how to create a website. I’m quite proud of how our website turned out as it’s something I can see myself using as a customer.

Challenges we ran into

For the most part, we didn’t have any prior experience in most of the languages we used. Most of the group had to teach themselves HTML, CSS, and JavaScript in the two weeks prior to the hackathon, which also happened to be the middle of midterms. We also used Python, but not many of our members had experience with that either. One interesting challenge was with the liveshare plugin for VS Code. It worked for the most part, except only the host could get images to work for some reason. On day 1 we used Github to host the site, but that took a very long time to update, and updated at very different speeds for different people. On day 2 we used Pythoneverywhere, which worked much better, though we had initial difficulties with getting CSS and Javascript to show up at all.

Accomplishments that we're proud of

We rendered the mascot for the site, John Porker, in Blender. The member of our group responsible for the assets had never used Blender for a full project before, only messing around. But in the end the renders had a consistent low-fidelity horror indie game aesthetic, which serves the purpose of scaring people into going outside instead of continuing to look at the site.

Even if we were learning mostly all-new languages to us, we did learn them effectively enough to complete the project. It helped that there was usually at least one person more familiar with a language, so we as a group could generally figure out how to fix an issue.

The google maps API integration is another accomplishment. Most of us had never integrated an API to a project before, but in the final site it does everything we want it to and works with no issue.

But the biggest accomplishment is just getting this done. We went in with a plan and a timeframe, and we completed what we set out to do.

What we learned

Experience in many tools and languages. HTML, CSS, Javascript, Python, Blender, Github, VS Code liveshare, Clip Studio Paint for vector logo design, visual design for websites, mostly all in a few days.

What's next for Pork's Places

In the future, we plan to do the following:

  • Add at least 20 more places
  • Make a more robust searching method where the user can filter by multiple tags
  • Host the website on a raspberry pi
  • Make better UX Decisions (The font is too small in certain areas)
  • John Pork Lore
  • A unified code base. In our source code we had trouble making a global variable to store our Locations list
  • Figuring out bike paths and bus routes from one location to another
Share this project:

Updates