AernStore started as a small dropshipping business that my partner and I built while studying in the city. Our home is in a rural area where product variety is limited, and prices are often higher than in the city.
The idea is simple: we buy products in the city at lower prices and shipping them to our village. Additionally, we ordered in bulk from marketplace like Shopee, benefiting from cheaper shipping costs compared to individual orders. Over time, we even gained resellers who redistributed our products.
As our customer base grew, managing feedback via WhatsApp messages became overwhelming. We needed a better way—one that was efficient, engaging, and allowed anonymity for honest feedback. This led to the idea of developing AernStore Feedback—a simple yet engaging platform where users could:
- Rate their experience (1-5 stars) and provide feedback
- Request specific products they'd like us to sell
Finding the Right Approach
Initially, we considered using a basic Google Form, but it felt too generic and lacked visual appeal. We wanted something different, modern, and engaging.
While researching, I stumbled upon a YouTube tutorial on how to connect Google Sheets with a website using Google Apps Script. This method allowed form submissions to be directly stored in Google Sheets, essentially providing us with a simple backend and database—for free! It was also perfect for my partner, who isn't from a programming background, as Google Sheets made it easy to monitor submissions.
Building the Platform
This project was a learning milestone for me in multiple ways:
-
First time using Next.js
I had never used Next.js before, and instead of starting with the traditional pages router, I dived straight into the app router architecture. This meant learning about:
page.tsxandlayout.tsx- Folder-based routing for
/feedback,/feedback/rating, and/feedback/request. - Implementing a seamless SPA experience without page reloads.
-
First time using shadcn/ui
I wanted a modern UI, so I explored
shadcn/uifor components like cards, buttons, and dialogs. Instead of using default styles, I customized them by modifying the global color variables inglobals.css. To match AernStore's branding, I chose pink as the primary color to align with the logo.For the tab navigation, I enhanced the card component, giving it an elegant and fluid transition between sections.
-
First time using Framer Motion
To make the rating experience more interactive, I incorporated Framer Motion to make hover and click animations for the stars in the rating section. This small touch made a huge difference in the overall user experience, making feedback submission more fun rather than feeling like a chore.
-
First time implementing a Loading Screen
Another exciting challenge was implementing a loading screen for the first time. I wanted to greet users with a fun way, so i made the logo pop up using Framer Motion, before the main content loaded.
-
First time creating a VTuber Style Logo
AernStore already had a logo, but I wanted to make it more engaging. After seeing the trend of modern tech stack logo is having their Vtuber-style version of it, I decided to create a VTuber-style logo for AernStore too using Figma. This was a fun experience, and I learned a lot from it.
The Outcome
After days of development and experimentation, AernStore Feedback became a visually appealing, intuitive, and efficient platform for collecting customer insights. Users could now share their opinions anonymously and request new products with ease—all while we managed the submissions effortlessly via Google Sheets.