Why I Created an E-Commerce Site For My Family Start-Up Business

At Crunchee Munchies, we specialize in bringing the authentic taste of Nigerian snacks, particularly Chin Chin, to the world. Our goal is to provide high-quality, delicious snacks while making it easier for customers to place orders and enjoy these treats. With our family-run business growing, it became clear that having an online presence would help us reach a broader audience.

Why Not Use Shopify or Other Platforms?

When we first started expanding Crunchee Munchies, I considered using platforms like Shopify, which are quick and easy to set up. Almost everyone on Reddit and other forums said this was the way to go and that I’d be crazy for not following this route. So, that’s where I initially started.

However, as a developer, I quickly began to encounter a few grievances. The templates felt somewhat clunky, and customizing the shop to my exact vision wasn’t as smooth as I had hoped. It didn’t sit well with me — someone who loves having control and designing front-ends in great detail. On top of that, the template-generated sites didn’t feel as snappy as they would if I had built them myself.

Moreover, being a small startup, we didn’t immediately need advanced features like integrated payments. Instead, we opted for a more manual process, where customers can place orders, and we’d contact them to confirm whether the order was approved. Once confirmed, we’d provide a link and instructions for payment. This approach allowed us to handle only the amount of orders we could manage at a time while still ensuring a great experience.

All of these factors, combined with my developer mindset, made me realize that I could build what we needed on my own. This would also allow for more control over the design and scalability, with the option to switch platforms or scale up as the business grows. On top of that, I was craving the experience of building a custom solution!

What Stack Did I Use?

For Crunchee Munchies, I decided to use the following tech stack:

• Frontend: Next.js, React, Tailwind CSS
• Backend: We will use Supabase (for authentication, database management, and real-time data handling)
• Hosting: AWS Amplify for deployment and hosting, and AWS S3 for web asset storage and access
• Email: AWS Lambda integrated with AWS SES for sending order and customer emails. The Lambda function uses API gateway to act as a receive order requests
• Payment Integration: We are planning to integrate square payments into our order request workflow. We will still be working with the order and approval request model, but will be building a secure payment portal. Once the order is approved, customers will be able to go to this portal and submit secure payments by order number. This setup will work best with our production capacity

Why This Stack

• Using Next.js allowed me to create a modern looking UI with modern and heavily supported tools like React, and Tailwind CSS. In addition, it allowed me to bundle backend tasks using server actions, all without having to create another project for the back end.
• AWS SES and Lambda offered a great and generous free tier, along with low prices and great scalability. API gateway also provided security, scalability and affordability, seamlessly integrating into the Lambda function. In addition, AWS S3 allows for affordable, and highly accessible website photo and asset storage.

My Workflow

The workflow for building Crunchee Munchies involved:

1. Planning & Design: Identifying the essential features for our e-commerce site and mapping out the user journey.
2. Development: Using Next.js to build dynamic pages and implement custom features like product variations and order management.
3. Testing: Continuous testing with tools like VS Code Live Server to ensure the application worked as expected.
4. Deployment: Using AWS Amplify to deploy the app and GitHub for version control and collaboration.
5. Updates: Regular updates based on customer feedback and business needs.

How I Built the App

Building the app involved:

1. Frontend Development: I created custom pages for product listings, product detail views, and the checkout process. I used Tailwind CSS for responsive, flexible design.
2. Backend Setup: I will incorporate Supabase database management, as it provided an easy-to-use interface to manage products, orders, and users.
3. Order Management: Integrated custom order management features, allowing us to track orders and communicate with customers. This feature is being expanded upon
4. Deployment: Deployed the site using AWS Amplify, ensuring it was scalable and reliable for customers.

The Experience Gained

Creating the Crunchee Munchies e-commerce site was and continues to be a valuable learning experience. I gained hands-on experience with:

• Cloud services using AWS to manage and deploy the app efficiently.
• Custom web development using Next.js and Supabase, ensuring the app could handle product variations, user orders, and real-time data updates.
• Building a user-friendly design that adapts to mobile, tablet, and desktop devices.
• Optimizing for scalability to ensure that the app can grow as the business expands.

Overall, this experience not only helped bring our family's start-up to life but also deepened my knowledge of e-commerce development and cloud infrastructure.

Check out the site here
Check out the source code here