FeelAtHome.SG

Web-app
Web-app
Wireframe
Design thinking

Inspiration

Popular dishes like Nasi Lemak and chilli crab, which we can hardly imagine ourselves living without, are largely endemic to our nation. So much so that it is nearly impossible to find our mouth-watering dishes anywhere else in the world. With nearly 350,000 Singaporeans living abroad, many overseas citizens are missing the key ingredient to cure homesickness. This inspired us to come up with a solution - not just to provide a traditional Singaporean culinary experience, but to also connect Singaporeans around the globe through food. Now, with FeelAtHome.SG, a traditional Singaporean experience is just a click away.

What it does

This website essentially allows a user to create an account to either buy food or sell any food which they may have left over. Thus in this win-win situation, the seller is able to make money on surplus food and the buyer is able to have an appetizing meal, delivered to his doorstep, to remind them of home.

How we built it

We built a web application mostly based on HTML and CSS(and a little JavaScript to boot), and connected it to Flask, a framework in Python. The back-end processing is done using Flask, and the front-end is all about the HTML and CSS, using Visual Studio Code as our text editor. Additionally, we used Figma, a free online tool, to create an interactive wireframe to display the application as it would look on mobile. To collaborate with each other, we used Discord, and the demo video was taken using OBS(Open Broadcaster Software) and edited using Filmora.

Challenges we ran into

We were challenged by multiple design issues which halted our progress as we tried to provide a more aesthetic experience for the user. Additionally, we came up with a problem early on - do we set up an entire database and setup logins, registrations etc., or do we just try to make sure the processing is available in time for the submission? We decided that setting up a database and connecting it to our web app would be far too complicated and would take too long, so we stuck with a more simple, yet effective demonstration.

Accomplishments that we're proud of

During the course of this project, we managed to identify and solve a real-life issue that pertains to hundreds of thousands of Singaporeans living abroad, something that we as a team are really happy about. Additionally, we believe that we've put together a very efficient and simplistic solution, and a unique one at that.

What we learned

To develop this website, we learnt how to link various languages together in order to provide a smooth user interface, and began to explore more in detail. While styling our web pages, we explored more artistic techniques which greatly improved the overall feel of our solution, and discovered new techniques to style elements on the page. And, most importantly, by working on this solution, we learnt to work as a team, which greatly improved our productivity.

What's next for FeelAtHome.SG

As we expand and develop further, a change of name is likely, and we hope to connect Singaporeans living abroad in more ways than just one - not just through food, but through jobs, social networks, residencies and more.

Credit's / Inspiration

https://codepen.io/canvasplay/pen/WXWobd

https://codepen.io/kristofferh/pen/MyOKMo

Built With

css3
discord
figma
filmora
flask
html5
html5-and-css3
javascript
microsoft-onenote
microsoft-visual-studio-code
powerpoint
python
sqlite

Submitted to

CodeFiesta 2021 - First submission

Created by

I worked on most of the logic of the backend and identified the initial problem and a very vague solution for it (which my group did a fantastic job of refining and developing the idea). I also developed the initial styling of the homepage. I had no clue how to use flask (the framework we used) before this project, so this was an extremely enjoyable learning experience.

Rahul Rajkumar
My main role was in taking the team through the character mapping segment of the project and the stage where we ideated possible solutions. Although I could have worked on the back end, I chose instead to work on the prototyping of the UI and UX part of the website, drawing the initial impressions and helping create the wireframes. I was proud of how the website shaped up at the end because none of us were real experts in working with HTML or CSS.

Praneeth Suresh
I worked both on the back-end as well as the front-end of the project. I styled and structured the web pages, wrote a major chunk of the code, and found ways to optimize it. While working on the back-end, I used my prior experience in web development to define major parts of the code and get the database up and running alongside the app. I also kept experimenting and exploring new, more efficient ways to implement the desired functionality and exploring various features in Flask that would make our app more user friendly and scalable.

Prakamya Singh
Pratyush Bansal