Because of the pandemic, many of us are stuck at home and we're more prone to develop a sense of loneliness and helplessness which could lead to mental health issues such as depression. To combat this, we look towards the facilitation of selfless acts to users in order for them to experience kindness from fellow quarantiners using the rising act of paying it forward. One of our goals in addition to this is to incorporate a "restaurant" style delivery theme to help promote small businesses affected during this time. Remember it doesn't cost a thing to make someone smile!

What it does

Our application is based on the concept of "pay-it-forward". Visitors "order" an inspirational quote to gift to the next person in an effort to spready positivity to anyone who has experienced loneliness or depression due to the COVID-19 situation. We hope to bring smile to someone's face in these difficult times.

How We built it

We first designed the user interface and layout in Adobe Xd before we started to code the project. After some design insight, Harjit and Umadevi built the foundation of the website using HTML and Bootstrap and styled it using CSS. As for the functionality, such as loading quotes on the page and saving user-chosen quotes for future use, Edward and Michael worked on these methods and also made sure the website loaded on our Vercel server using Next.js.

Challenges We ran into

Harjit: One concern of mine was the website design. It's hard to come up with a clean yet responsive and functional site in less than 24 hours. I never worked with Bootstrap or made a website before and it was a daunting task being assigned lead design.

Umadevi: This was my first time building a fully responsive website. One challenge I had was receiving an error 403 message saying that the images won't display. The obvious solution was making sure the image is specified and then making sure the path was correct. Also, working with JSX was difficult since it was my first time.

Edward: It was my first time using the Next.js framework. At first, it was taking a great portion of my time because I was reading up on the documentation. I have some familiarity with React but Next.js has more to offer such as libraries or functions.

Michael: It was also my first time using the Next.js framework as well as creating a project as a group. I was in charge of a lot of work that I was not expecting, such as converting HTML pages into Next.js compatible pages.

*Vercel also did not allow us to write our json so for full functionality it is better to run it locally. *As of this time, our domain name from does not yet redirect to our vercel project.

Accomplishments that I'm proud of

Harjit: I'm proud of creating a fully responsive and clean looking website in less than 24 hours. I'm also proud of submitting my first project for a hackathon!

Umadevi: I'm proud of the animations on the website, it was really fun learning how to make them.

Edward: I'm proud of gaining experience in working as a group. It was my first project and hackathon so I had a lot of fun.

Michael: I'm proud of finishing all the work I was given while learning so much from it.

What I learned

Harjit: I learned how to use Bootstrap and how to make website designs look nice.

Umadevi: I learned how to use git commands to clone and edit repos as a group and specific CSS effects.

Edward: I learned how to use Github as a group and I gained more insight on how the use the Next.js framework.

Michael: I learned about the limitations of Next.js and working with React.

What's next for Food For Thought

We want a better user interface to include sounds and more animations as well as the ability to add a personal note in addition to the quotes. We feel that having a note adds to the ingenuity we portrayed in this project.

Built With

Share this project: