LocalToMe

https://localtome.vercel.app/

LocalToMe

Front End Developer

  • Project Scope: 4 months, September 2022 – December 2022
  • Project Type: 6 person project, (2 Designers, 4 Developers)
  • Tech Stack: Next.js, React, Mapbox, Styled-components, Storybook, Framer-motion, Firebase, Algolia

<section id="project_brief">

LocalToMe is a web application that locates and provides low-income families/individuals with free & accessible food resources near their area within their budgets. To accomplish this project, I collaborated with 5 other members, 3 developers and 2 designers from BCIT’s Full Stack Web Development and Digital Design and Development programs.

LocalToMe's map showing all the available food resources near Vancouver.

</section>

<section id="process">

Throughout this project, we had to figure out what underprivileged people actually wanted and how we would help them. To do so, we tried to contact food banks themselves, but they were unresponsive and then tried to look into webscraping, however deemed that out of scope and too complicated for our project with a lot of unknown variables that might occur. Then we found a public API from Vancouver that sourced out all of the free, low cost programs in downtown Vancouver, which we ended up using.

City’s of Vancouver’s Open Data portal for public data.

</section>

<section id="outcome">

A challenge I faced, was this project being the first time I worked with using data from an actual database (Firebase), and had to figure out how to grab data and incorporate it into our designs. During LocalToMe, I focused on scripting reusable components for the front end, helping design the prototype, and creating responsive web design. In the process of creating reusable components, I used styled-components to style it and then wrote documentation inside of Storybook, detailing how the component is used, and what information/props it requires, so other developers can see what the component needs. Furthermore, developed a documentation and organization system for the components that team members would follow when scripting components. In the end, we were able to successfully build a fully functional web application and present our project to industry experts and over 100 people.

LocalToMe's home page displaying all the information you need in an accessible location.

</section>

View the project links.