I developed this app for a friend who needed an online shop to sell his nail supplies. At the time, I hadn't built a fully functional app before; my experience was limited to small experimental projects, mainly for practice and not suitable for real-world application. However, I saw no harm in trying and agreed to help him, though I warned it might take a long time to complete.

Indeed, it did take a long time—eight months, to be exact. There were a few distractions along the way, but the delay was primarily due to my lack of experience building such an app. I ended up creating three versions of it, all starting from scratch.

The first version was very basic. Without a clear understanding of how to build it, I hardcoded everything, including all the data, directly into the TypeScript code. After completing almost 80% of the app, I began to get a sense of how it should be structured, prompting me to start over.

The second version showed some improvement. With a better grasp of the data model, I utilized Supabase's free PostgreSQL database service and Prisma for database queries. Still wary of TailwindCSS, I hesitated to mix CSS with HTML in my React-based TypeScript files, fearing it would clutter the code. I opted for SCSS and CSS module instead. This version was also the first time I used Clerk for admin authentication. As the app became more complex, I learned to use Storybook to manage its components. However, I was still unsatisfied with the app's appearance, leading me to start over again.

The third version emerged as a fully functional e-commerce web app. By this time, I had a solid understanding of the app's general structure, which made Storybook unnecessary. Despite initially resisting TailwindCSS, I decided to give it a try and was surprised to find how easy and efficient it was, especially useful for rapid prototyping. Due to the app's complexity, I separated the admin panel into its own application. You can find its repo on Github here.

Unfortunately, by the time I completed it, my friend, possibly due to financial or personal reasons—or perhaps due to a long wait — no longer wanted the app. So, I repurposed it as a general store for my portfolio, adding some fictional mythical items for demonstration purposes.

The links above refer to the third version. Here are the demo and GitHub links to the first and second versions for those interested:

• First version: Github, Demo
• Second version: Github, Demo