AI Janitor
I noticed one thing too late today.
While starting the project I shared a Claude.md from another project that I just finished.
The idea was to extract best practices from it that will be relevant to this project.
The initial plan, architecture and implementation followed it but the claude.md wasn’t created.
As a result in various other sessions the agents didn’t have the same guidelines and that led to sloppy code, fat components, routes mixed with business logic and other stuff that claude likes to do without proper guidance.
This meant it was time to put the AI Janitor hat on and refactor the code.
Fortunately Claude is awesome at cleaning up after itself. I have a bunch of prompts for that here’s the one I used today:
Analyze the architecture and structure of my Next.js application. Your task is to:
Identify issues and anti-patterns: Look for fat routes, lack of modularization, duplicated logic, poor separation of concerns, misuse of Next.js features (e.g., API routes, server components, client components,
getServerSideProps, getStaticProps), and unclear folder structure.
Evaluate code quality and best practices: Check whether the project adheres to best practices for Next.js, React, and TypeScript (if used), including:
Consistent and scalable folder organization (e.g., app/, pages/, components/, lib/, hooks/).
Clear separation between UI, business logic, and data fetching.
Proper use of server vs client components.
Reusability of components and hooks.
Maintainable state management approach.
API route design and backend integration strategy.
Code readability and testability.
Summarize the issues found: Provide a concise list of weaknesses, bottlenecks, and risks that may affect maintainability, scalability, or performance.
Propose a restructuring plan: Offer a step-by-step roadmap for refactoring the application into a clean, scalable architecture. Include:
Suggested folder structure.
Guidelines for splitting fat routes into smaller modules/components.
Recommendations for API design and data fetching strategies.
Suggestions for improving state management.
Testing strategy improvements (unit, integration, E2E).
CI/CD or DevOps considerations for scaling.
Make the restructuring plan detailed and actionable, with reasoning for each suggestion, so that future developers can maintain and scale the application easily.After the cleanup it was time for some Marketing 101.
Marketing:
I didn’t do anything fancy just the basic setup:
1) Google Analytics - Duh
2) Tracking pixels for the channels I’ll be using - Meta, Linkedin, Tiktok, Youtube
3) And a bit more fancy, but nothing too complex - sending events from the app to those platforms for better targeting
4) SEO Basics
I’d say you need to do 1,2.
It takes a bit of time to click through the setups, but it’s really important as you need analytics to know what’s happening in your app and how people engage with it.
You need tracking to be able to reach people that visited your website on those channels at some point in the future.
Events are useful if you want to build custom audiences for example ask those platforms to target/find you more people like the ones who signed up to your app or performed any other action you define and send as an event.
Or exclude some people for example those who signed up already from your campaigns.
In terms of SEO I just setup metadata / Opengraph logo and worked on performance optimization so that the page loads are better than they were initially, added the site map etc.
Conclusions
This was a relatively simple build. I only worked for couple of hours on this today. Yesterday was pretty intensive though.
I’m really happy with the result. I love the terminal vibe, all small accents, access denied page :D
I’m curious as to where this project will lead, as I’ve been reluctant to participate in social media for a long time and I’m trying to find a format and community that I feel comfortable in.