I Built BriefStack.dev in a Weekend with AI (No Vibe Coding)

Online at the moment, there is a lot of vibe coding, but very little system architecture breakdowns, explanations of the key decisions, or demonstrating a realistic AI workflow. So, I wanted to combat that by showing how I built this, a newsletter generation service that produces a variety of articles each day across different niches by summarizing what happened on X for the previous day. This product includes email delivery, cron jobs, X API integration, and an AI integration. We will start by going over the P definition and the AI workflow, followed by the system architecture and the core flow behind the design, then the key services and libraries involved. And then we'll fast forward through the build process, stopping at various points to talk about adjustments that had to be made. Let's first discuss the P, which was pretty minimal and started with an elevator pitch. Briefstack scans X, filters the noise, and delivers a concise AI generated summary of what happened from dev tools to markets to space every morning. It's pretty short and concise. Just tells the AI what we're trying to do. The next section, pages and flow, just details the general flow through the app and how it works for users. So, in this version, users get free access to everything. And we use Neon's for access. When you load the website, you just land on the home/sales page with the signin button at the top. Once you're signed in, you get redirected to briefs and you can click on a brief to go to the specific brief page. So, it's intentionally quite vague just to let the AI have a go at basically the design and then I'll iterate over it with AI with a bit more control later on. Newsletters have the following structure, a title, a TLDDR, a body, and a conclusion. There's also some additional metadata fields. So like tags and categories, date and rettime estimate just to enrich the the components a little bit more and to potentially add filters later on. Listing out the API keys we'll need so for the various services just so the AI knows to put some placeholders in. And then specifying exactly what libraries I want it to use. So shaden for your components zod for validation using the versel AI SDK using Zustin for any global state which we're not using the TypeScript XDK drizzle for other database related stuff and then storybook so we can iterate on components a bit quicker. The next important piece is the sequence diagram. The sequence diagram in this app breaks down the newsletter generation flow. You can see along the top are all the key services listed. process first starts by the versol chron job hitting our back end. The back end then fetches all the accounts and tags to search and then fetches all the posts from X and then with all the X posts we produce the newsletter with the AI API. We then save the newsletter to the database, get all the signups and then send emails. The sequence diagram really helps just to align the AI and me on exactly what we're building. It's also really useful when you're trying to detail flows to yourself and want to understand them deeply. Once the P was complete, I generated a discrete set of tasks and each task was given to Claude to complete. This pattern follows the typical P to tasks to automated workflow that is emerging. It falls apart a bit in that it needs oversight. So after each task, I generally did a quick review and I had low expectations around what it would finally deliver, anticipating a decent amount of refactoring and improvement, but nonetheless it gave me a really strong starting point. The key services which we have partially already covered is Versel for hosting, versron for kicking off the newsletter generation, Neon for orth and database hosting, resend for sending emails and email templating, and Claude for generating our newsletter. The key libraries were Nex.js HJS for developing the React app. Shad CN for components. Versel AI SDK for a type- safe way to generate AI completions. Drizzle for our database OM and handling database migrations. X API XDK for fetching X posts. And Storybook for isolated component development. Now we've broken down all the key aspects. I'll fast forward through the build and make some notes along the way. In this first section, I set up the project, copied over the PD, and generated all the tasks required. After this was generated, I made sure to review exactly what was outputed so Claude didn't run off building something I didn't want. With the task generated, I passed them off to Claude. Sometimes I have two instances running at the same time if they're working on independent things. But generally, I prefer to have Claude run as a single instance to reduce the chance of them standing on each other's toes and producing redundant code. Here we are setting up Neon, creating the schema, and handling Google or implementing Google or was a pain as always cuz it usually just fails and you don't know why. So, spending a nice amount of time working through that until it finally just works. I also set up all the other services and the AI has given us a decent starting point for the UI. Now, I realize how crappy it looks. So, I spend a solid amount of time tidying up the design by creating a logo, deciding on theme colors, and iterating over all the components. Typically, I have the AI generate three variants of a single component and review them all in Storybook. Then, I can pick and choose my favorite elements to find what I like the most. I use this strategy throughout the entire app and typically that gives me the best result for UI design. At the moment I'm also reviewing the versron generation route as well as the timing durations. You can see now the sales page is finally coming together and looking less like boilerplate chats. Now I'm finally wrapping up by refactoring and testing everything. Thanks for watching. Check out briefstack.dev dev if you want to see the final product. I'll probably keep improving it over time, so sign up now to follow along.

I built BriefStack.dev - a daily newsletter that curates AI dev tool news from X so you don't have to doom scroll. Built in a weekend using Claude, Next.js, Vercel, and Resend. In this video I break down the full architecture, AI workflow, and key decisions — no vibe coding, no hand-waving. Just real system design with AI as a tool. 🔗 Try it: https://briefstack.dev Stack: Next.js, Claude (Vercel AI SDK), Neon, Drizzle, Resend, Vercel Cron, X API, shadcn, Storybook TODO: Chapters 00:00 Introduction 00:40 PRD breakdown 02:20 Sequence diagram 02:55 AI workflow 03:20 Key services 03:32 Key libraries 03:56 Showcasing the build Music: First Rain by Tokiwave https://soundcloud.com/tokiwave License: Creative Commons — Attribution 3.0 Unported — CC BY 3.0 Free Download / Stream: https://audiolibrary.com.co/tokiwave/first-rain Music promoted by Audio Library: https://youtu.be/Ot9187kyNpM Music: Apollo 11 by Wanheda https://soundcloud.com/user-724527508 License: Creative Commons — Attribution 3.0 Unported — CC BY 3.0 Free Download / Stream: https://audiolibrary.com.co/wanheda/apollo-11 Music promoted by Audio Library: https://youtu.be/Ot9187kyNpM?t=273 Tags: ai coding, build with ai, claude ai, saas development, indie hacker, solo developer, nextjs project, vercel ai sdk, ai workflow, no vibe coding, ai dev tools, build in public, saas in a weekend, newsletter saas, ai agent workflow, claude code, side project, web development, typescript, fullstack development