Hello Internet friends!
Having spent more than a decade in product development, I'm so excited about what's now starting to be possible. This is the first “Log” from my “Personal AI Post Grad”. Where I’m rethinking everything I know about design, and building a business.
I’m excited! and think this song will help put your in the right mood for what’s now starting to be possible.
I think most of your rather watch the video ☝️☝️☝️☝️☝️☝️ but below I give a loose overview of the process for each of the application. Bullet points — nothing extensive. But wrote all of this because I can think of at least three of you that will be curious!
THE PROJECTS
1/5 —Whatsapp VibeCheck
Built and deployed with Replit. ~ $45 dollars in credits
This was something I thought would be fun, so I built it. It’s a browser-based tool that analyzes exported WhatsApp chats.There’s no database or data saving—just something fun. And integrated with Stripe so I can pay for the hosting costs.
Loose process
I discussed the idea with ChatGPT to explore what functionality would be possible, and what libraries were available. I learned that there were a number of sentiment analysis libraries. ( I also learned what sentiment analysis was).
Using Replit, I built the uploader and sentiment analysis.
This needed some tweaking as different file sizes didn’t work.Then I looked at what functionality was available in the libraries. Then added more functionality. Emoji summaries and mood journey maps
I then Adjusted the UI design to make it more visual.
Added the functionality to analyze group messages and made sure all the features I had already made would work in the UI with group texts.
TESTING
I then sent screenshots of the application to people I knew on WhatsApp and asked for some input.Having the functionality built. I then describe the type of landing page I wanted. And ask the Replit Agent to create a landing page to sell and showcase the Vibecheck functionality.
Updating the design I then sent the URL out to 4 people to test. .
After getting feedback, I made changes and integrated Stripe
Lastly, I added the story mode which isn’t yet done.
Next steps
More to do here! I think I will actually launch this app in the future, and I really like it.
Testing live: Sharing the link with friends to see what they find. I’m already getting feature requests, and learning “what's off” — Others know their conversation history more and if I get the same issues, I know what to fix.
Make it public/ Monetise: Then make the public connected to payments and share with all of you fine people.
2/5 — Seo Analyser
Built with Replit. ~ $2.87 dollars in credits
This was my first exercise back using Replit as a part of the personal post-grad. Following along with the tutorial, the idea was to build an interactive website that would analyze the meta tags in the HTML of any website you entered.
Process
The basic functionality was built with a single prompt.
“Help me create an interactive app that displays the SEO (meta) tags for any website in an interactive and visual way to check that they’re properly implemented.
The app should fetch the HTML for a site, then provide feedback on SEO tags in accordance with best practices for SEO optimization. The app should give Google and social media previews.”The basic functionality was there. I spent time taking screenshots of the UI and Prompting Replit agent to change the visual design of the interface. I spent time making the interface more consistent.
Then, once I made this mobile responsive, I wanted to have it more playful, and I added confetti and then rain from a React library I found using ChatGPT.
2 -🏞️ National Park Head-to-Head Ranking App
Built with Replit. ~ $2.33 dollars in credits
This was a basic exercise to learn how to add a database for persistent data, and have everything built and deployed within Replit.
With one prompt, I described the functionality we wanted, provided the Wikipedia URL that we wanted to take the information from, as well as described that we wanted to use the Wikipedia URLs for each image and that we wanted to use an ELO chess ranking system.
We also included a very basic wireframe image, we showed what type of interface we wanted to have.
Then I spent time improving the mobile responsiveness and tweaked card dimensions.
3. Portfolio page
Built with Cursor. I spent $20/month — so I don’t know
This was part of the front-end fundamentals course in Join Takeoff. Learning about how to use libraries and provide project rules to make sure that when the agent started building, it would always use specific libraries and formats.
~Process
The exercise was bringing together basic buttons from Shadcn, cards, and then I added accordions for fun with a toggle.
When I eventually make a website, I want to include my writing. I asked ChatGPT whether there was an RSS feed or any publicly available integrations with Substack.
With that information, I then went back to the Cursor agent and explored asking it, "Can you create a plan on how to integrate with Substack” including my Substack URL.
I then experimented, after making it responsive, to copy the design of a website I liked.
Using a screenshot and some prompting, I created the top navigation, but needed to modify it for mobile responsiveness.
Then once I got the RSS feed to work with Substack, I spent a good chunk of time inputting screenshots and different prompts into the Cursor agent to create the titles and hover states for the Substack Journal page.
Prompt Manager
Built with Cursor. I spent $20/month — so I don’t really know
This was another example project from the Full Stack Fundamentals program in JoinTakeoff, where we were building the backend and Authentication. Connecting to existing tools; Supabase for the database and Clerk for authentication, and accounts page. The app was a basic CRUD (Create, Read, Update, Delete) system for managing prompts. And you could copy out text into your clipboard.
~Process
Build the basic interface first.
Then setup the database with Supabase
Then build CRUD functionality.
Then Auth with Clerk
Tech Stack Overview built with Cursor
Frontend
What: React framework for building full-stack web apps.
Why: Provides server-side rendering, file-based routing, API routes, and great developer experience.
What: Utility-first CSS framework.
Why: Enables rapid, consistent, and responsive UI development with minimal custom CSS.
What: Beautiful, accessible React components built with Radix UI and Tailwind.
Why: Provides a set of customizable, production-ready UI components that match your design system.
What: Animation library for React.
Why: Adds smooth, interactive animations to your UI with simple APIs.
Backend
What: Open-source relational database.
Why: Reliable, powerful, and widely used for structured data storage.
What: Backend-as-a-Service built on PostgreSQL.
Why: Provides instant APIs, authentication, and real-time features on top of Postgres, making backend setup fast and easy.
Drizzle ORM: So I don't mess things up.
What: TypeScript ORM for SQL databases.
Why: Type-safe, modern, and easy-to-use ORM for writing and running database queries and migrations.
Authentication
What: Authentication and user management for React/Next.js Free for up to 10,000 monthly active users.
Why: Provides secure, customizable sign-in, sign-up, and user profile flows with minimal setup.
This modern tech stack was taught to me on Jointakeoff .
The SEO, and national parks apps originated from the replit 101 vibe coding course.
Again, all of the courses I'm doing are listed here: Link
Share this post