Food4Kids

• 

  homepage

Inspiration

This was one of the Triangle Challenges that was posted. My partner and I were coming in interested in web development and wanted to create a professional looking web page and this was the perfect opportunity to showcase our talents. The outline was nice and straight forward outlining everything that we needed to do. We both previously had volunteer experience at our local food banks' so this project would be right up our alley.

What it does

This single HTML page acts like an online grocery store where donors can select and purchase various items as donations to Food4Kids. Donors will be able to browse through a selection of items as a carousel, where they can select items to be added to a shopping "bag".

How I built it

We started off trying to do a GatsbyJs app, since it was similar to ReactJs which we have previously used. However, there was a steep learning curve and major difference so we decided to take a different route. We ended up doing a React App with Algolia database to access elements. With the react app Calvin did the coding as Ryan designed, researched, and grabbed images off the internet. We used github to store changes and the repo is linked above.

Challenges I ran into

We ran into several challenges in implementing the new api and had difficulties creating a slider for react elements.

Accomplishments that I'm proud of

I am very proud of the final product of the webpage, many of my peers and random passersby mistaken our page for a professional one.

What I learned

Next time I should come prepared with a better plan as thinking of an idea with good implications was very difficult.

What's next for Food4Kids

We haven't fully implemented the Algolia Api and we are planning to further develop this webpage to its full potential. With functional checkout abilities and possible secure checkout options. Also, we would continue to add more food options as more come available.

Built With

• algolia
• css3
• etc
• html5
• node.js
• react
• reatstrap