DEV Community

Ben
Ben

Posted on

How I'm Building my First Full Stack Project

Is AI just hype, or can it actually be safely and effectively integrated into modern business systems?

I'm currently undertaking my first full stack project.

It's called BFshop and on the surface you'd be forgiven for thinking it's just another E-commerce project but there's two things that will set BFshop apart:

  1. There will be a customer storefront (currently live and under construction in the projects section of my website) where orders can be placed. There will also be a merchant interface tracking these same orders which will pass between received, sent and delivered status
  2. It will be a fully business system including work flows made with n8n

But it's still missing something...

What could it be missing?

What is the one essential ingredient in 2026?

We all know what it is.

AI.

How am I going to implement AI without it being AI for the sake of AI?

Think of BFshop as a two lane structure.

  • Lane 1: traditional interactivity connects frontend to backend; you click submit order, shipment ready, etc
  • Lane 2: the same connections are made, but by an AI at your request

The AI assistants for the customer and merchant side will differ to reflect the needs of the user on each side;

  • the customer end AI will be for querying order details, product suggestions; typical things a shopper wants to know when browsing
  • the merchant end AI will be for querying stock and triggering workflows where suitable

Why does this matter?

AI is not going anywhere any time soon. We all hear about how it will make developers redundant. My answer is to embrace and utilize AI.

I don't want to be drowned beneath the tide, I want to surf on its peak.

The two lane system allows for

  • Regular user control
  • AI control as directed by the user
  • Both paths to travel through the same gateway, but with the right rules and restrictions applied to each.

But that's not all.

We're still in AI's honeymoon phase. Its workplace implementation is still yet to be fully cemented as more than novelty. Its true place in the business world has yet to be found.

Do I know what that will be?

No.

But what I do know is that control and oversight of AI systems will need to have their place.

That's why I'm going to build AI Overwatch into BFshop.

AI Overwatch

AI Overwatch will be a control center for everything AI in the merchant app.

Concerned your AI assistant changed something it shouldn't have? Check the activity logs.

Want to make sure the AI doesn't have the ability to delete data? Check the Capability registry.

And so on.

BFshop will fully enhance the incredible power of the modern day, without sacrificing safety, responsibility, or human control.

Project Structure & Specifications

The customer end of BFshop (BFcustomer) is part of my main website folder structure, as it started as a simple project. As the project grew, I decided to build the rest (BFmerchant) in a separate folder for better organization. BFshop will live on a subdomain, so it remains accessible from the main site.

Dependencies

  • Tailwind CSS for styling (my preferred tool)
  • Prisma for database connection
  • Neon as the database (after issues with Supabase)

Setting up Neon was challenging, but I learned the basics of attaching a database to a project by doing and asking for help when needed. Even if I don’t know every command, I now understand the process better.

Styling Consistency

If I could rebuild my site, I’d set clear styling rules from the start. For this project, I’ve created lists for spacing and typography per screen size. I’ll keep fonts and colors simple and professional.

For example:

Heading to body spacing

  • h1 to next text: mb-4 md:mb-6
  • h2 to next text: mb-3 md:mb-4
  • h3 to next text: mb-2 md:mb-3

Grid/card gaps

  • Mobile: gap-4
  • Tablet: md:gap-6
  • Desktop: lg:gap-8

This enforcement will keep things orderly and clean, giivng it that professional look my website currently lacks.

API

Both BFCustomer and BFmerchant will communicate with the database via the API in BFmerchant. This may not be perfect, but it’s a workable structure for now.

The APIs will enforce rules that govern communication between front and backend, and will be particularly relevant when it comes to oversight of AI activity

AI Disclaimer

I use AI as a mentor and assistant, especially for learning new concepts, repeated structures, and complex tasks. My goal is to learn and understand, not just copy-paste. I’ll also use AI to audit the project as I go.

Next Steps

  • Practice writing APIs
  • Deploy BFmerchant on a subdomain of benfosterdev.com
  • Wire up APIs to BFCustomer

Planning the project like this is a big step for me. For my main website, I always rushed into building because I was excited to get going. The extent of my preparation was mapping out the intended structure of each page and how the divs would look, with minimal planning on what styling options would be used to produce a cleaner and scalable design. I also gave no thought to the overall structure of the site and how each element would work together. This is partly because it was planned as a purely frontend project, so data was always an afterthought. Now, going into BFshop, the structure is clear in my head, meaning I can accurately map out each section's basic layout enough to give me 'wall sockets' where the API 'cables' will plug into.

Take a look at my website at benfosterdev.com to see as the project progresses!

Top comments (0)