Vibe Coding: Crafting the Brooke & Maisy E-Commerce Store with Rails & Kilo Code

Sunday, August 17, 2025

Discover how to merge aesthetics with functionality in e-commerce development using Rails and AI tools to create a vibrant online store.

Vibe Coding: Crafting the Brooke & Maisy E-Commerce Store with Rails & Kilo Code 🎨

You have a vision. A creative project that needs an online home. A modern space that feels soft and warm, but with a serious back-end ready for business. Welcome to Vibe Coding, where your aesthetic and brand personality drive technical decisions.

The Dynamic Duo: AI & Development 🤖✨

This post outlines the journey of crafting an e-commerce store using Rails 8 and the Kilo Code VSCode extension, which acted like a senior developer throughout the process! With the help of AI assistants like Gemini and Claude, we transformed a beautiful idea into a fully functional application.

The project aimed at launching a crafts store, “Brooke & Maisy,” selling handmade bracelets, bookmarks, and stickers, embraced an ivory and pastel aesthetic to foster a personal touch.

Meet the Tools: Kilo Code & AI Agents 🎛️

Key Features:

  • The Kilo Code extension orchestrated workflow seamlessly with various AI agents:
    • Architect (powered by Gemini) for planning
    • Code Agent (powered by Claude Sonnet 4) for implementation
    • Ask Agent for clarifications and guidance

Fun Fact: This entire setup allowed efficient task handling while providing transparency regarding costs! In the end, the total for all AI requests was just $6.98. That's a fraction of the cost compared to hiring a developer. 🤑

Phase 1: Building the Blueprint 🏗️

Every grand project starts with a strong foundation. For our store, we kicked off with a modern Ruby on Rails setup, utilizing a custom template since Rails doesn’t supply every tool out of the box—like Tailwind CSS and PostgreSQL. Once established, Rails proved to be a robust framework that gets you building quickly. And here are the tools that helped us shine:

  • Tailwind CSS: Aesthetic-oriented styling with a custom pastel color palette.
  • Hotwire: For smooth, modern interactivity using Turbo Frames.
  • Stimulus: Modest JavaScript framework for adding interactivity directly in HTML.

Authentication & File Management 🔒📷

Next up was adding secure user login and handling files efficiently. Enter the Devise gem for user authentication and Active Storage with AWS S3 for image management. Voila! We were ready to showcase our crafts.

Phase 2: Structuring the Store 🛒

Once our foundational work was in place, the next step involved translating the store's requirements into a database structure, thanks to the Kilo Code AI. It generated a to-do list to systematically create the essential components:

Essential Models:

  • Product & Category Models: Organizing main items and their variations.
  • Shopping Cart & Orders: Handling the purchasing process seamlessly.
  • Content & Reviews: Supporting blog functionalities and customer feedback.

Even for those aspiring to be Rails developers, this showcases the charm of the rails generate model command, which simplifies database designs while letting you focus on more complex business logic. The agents took care of ensuring everything was interconnected—making for a neat and organized setup.

What’s Next? 📈

Stay tuned! We will dive deeper into how Phase 1 played out, dissect prompts, and explore actions taken, including code snippets that made this journey possible. Content aside, you can also find this piece on Substack where it first bloomed.

Curious about developing with Rails and opulent AI? Let’s ride the wave of innovation together! 🌊

Source: DEV Community