HomeyBay
Social e-commerce platform
Purpose and goal
Search pageHomeyBay was born out of the desire to practise the skills I had picked up during my internship and to address an issue faced by many in our society.
A hybridhybrid of social media platforms like Instagram and e-commmerce sites like Lazada, HomeyBay serves to give home bakers a platform to market their products and widen their influence through customer reviews driven by familiar social-media-style features (image carousels, tagging of products and users, likes, comments).
Product's postHomeyBay's goal is to provide home bakers with a centralized platform to sell their goods (as opposed to using Instagram or even WhatsApp), with each product having their own shareable listing to increase visibility and discoverabilitydiscoverability . Buyers can search for products by name, or discover them naturally through the feed.
Stack consideration
Having just completed a summer internship, I wanted to not only put my web-development skills to the test, but at the same time learn new technologies. I felt confident in developing my own set of APIs and integrating them with a frontend framework - NextJS (with its detailed documentation) provided just the level of configuration for my needs. Similarly, I picked up Tailwind CSS and quickly familiarised myself with its countless classes.
I also opted to use the lightweight zustand library for client-state managementclient-state management e.g creating posts and comments. This single source of truth allowed me to easily update the UI based on the state of the application and avoid prop drilling.
I chose Supabase for the database as I wanted to work with a relational database like PostgreSQL. I planned to host it on an AWS EC2 instance as it provided more storage, but the compute allocated in the free tier was too limited and caused unstablility. Luckily, the Supabase free tier hosts an instance with sufficient resources for our project.
As the website handles images, I chose to use AWS S3 to store them, where I had to learn about access controlaccess control to allow users to upload and retrieve images. On the client side, I used Ant Design's components to facilitate image cropping and uploading.
Daily site reportLastly, we hosted it on Vercel as it is easily deployed with NextJS integration with Vercel. For site monitoring, I use Google Analytics to track eventstrack events like user sign ups, page views, popular paths, and an AWS Lambda function to send daily reports using a Telegram bot.
Problems faced
Optimistic updates with likesWith any new project, I had to learn a lot of new skills. Notably for a social media site, data fetching was a huge challenge. On the server-side, I learnt about data caching, mutations, revalidations, and even Skeleton components which all contribute to the responsivenessresponsiveness of the site. Handling transactions such as liking posts, and choosing to cache certain data to reduce the number of API calls were also important considerations.
Handling authenticationauthentication was also very difficult. I had to learn how to restrict certain actions to authenticated users only, password salts and hashing, email verification, password resets, Google Auth, tokens, sessions and more.
Arguably the biggest challenge was the architecturearchitecture of the site and the database. I had to plan how the data would flow through the site, and how to handle the different states of the application. I had to learn how to structure the database to allow for efficient queries and joins, while at the same time keeping it simple to understand and maintainable.
Lessons learnt
Initial draft by design leadBeing the first time I have led a team to create a web application, I learnt a lot about project managementproject management and team dynamics. I had to learn how to delegate tasks and manage expectations, while at the same time coding out features and reviewing PRs.
Having defined roles and regular meetings helped immensely in churning out this project in two months.
Importantly, I also learnt to be more flexibleflexible and to adapt to changes. I had to learn how to use new technologies and to adjust the architecture of the site to accomodate features that we previously had not thought of (e.g. comments).