HawkerHawk

Inspiration

Needed a centralised platform to view hawker centre information according to the centres, most other food or social websites display a list of individual stores rather than according to the centres, and don't show information like the open/closed status of the day (I think this is slightly useful since I have went to centres many times only to find out they were closed for cleaning/works).

What it does

It takes the list of hawker centres from a data.gov.sg API and renders it to a list on a single webpage, with basic information such as the name, number of stalls, address and most importantly, it's closed/open status on that day with the reason if it's closed.

Clicking on details will bring you to a page to show more detailed information about the hawker centre that you have selected, it will also show the list of stores in that hawker centre that have been added by community members.

From the individual page for each hawker centre, you will be able to add stores, which will be displayed in a flex list below the detailed information of the centre. You can also add menu items to the stores to populate the store menus.

How we built it

Tech Stack:

• NextJS
• MaterialUI
• TypeScript
• Supabase

Other libraries and tools used:

• Axios
• Vercel (for Hosting)
• Formik (for React Forms)
• Yup (for Validation)

Challenges we ran into

I have zero experience with using component libraries in a frontend framework, I am more used to writing either plain CSS or using utility frameworks like TailwindCSS to build out my components, so I ran into some problems with the styling and forms, which still definitely needs some work.

Also I have a lack of knowledge on Auth in general, which I decided to place as a last priority in the development of this application (incomplete), but it is definitely doable with Supabase which abstracts a lot of the complexity.

Accomplishments that we're proud of

• Able to complete the main features of the application to make it semi-useful.

What we learned

• Learnt basic usage of API routes in Next.js (something new).
• Learnt about the usefulness and also limitations about BaaS frameworks like Supabase.
• Learnt more about SQL databases and database design for SQL accordingly (Previously mostly worked with NoSQL e.g. MongoDB and DynamoDB)

What's next for HawkerHawk

• Fixing bugs
• Creating a proper Auth process to authorize POST requests (For adding stores, adding menu items etc..)
• Work on fixing the styling of the application (It is really ugly right now...)
• Pagination/Infinite Scroll (haven't decided which is better for this yet)
• Filtering and sorting from API

Built With

• materialui
• next.js
• supabase