The tech stack powering my UX Assessment tool

Excited to share another update on my SaaS journey with you.

After an energizing week of progress, I've got some fascinating technical insights to share about my UX Assessment tool.

Last night was particularly interesting as I dove deep into architecture decisions and technical planning. It's been quite the adventure, wearing both designer and developer hats - working on Figma designs while simultaneously building out the technical foundation.

Fun fact: Despite not being a traditional developer, my year-long journey of coding with AI has given me the confidence to build this from scratch.

There's something incredibly empowering about turning this newfound passion into a real product that could help other designers.

PROGRESS SO FAR:

I've finalized the technical architecture for the UX Skills Assessment tool and set up the project structure.

After evaluating several options, I've settled on a modern stack that balances development speed (crucial as a solo creator) with the performance and scalability needed for AI-powered analysis.

BEHIND THE SCENES:

Something I haven't shared on social media but sharing exclusively with you:

My success so far with this project heavily relies on thorough product requirement documentation.

Before diving into implementation, I have spent considerable time crafting a detailed PRD (Product Requirement Document) using CodeGuide, which helped me avoid costly architectural mistakes.

This methodical approach proved invaluable when I discovered that my initial monolithic design wouldn't serve our scaling needs.

If you haven't discovered CodeGuide yet, I highly recommend checking it out—it's been a game changer for me. Having an idea is one thing, but being able to leverage AI to build it is another. Writing a PRD can multiply your output tenfold. While designers are accustomed to working in Figma, I predict this will change dramatically in the next 5 years. With AI support, we'll likely be expected to wear multiple hats, including building the very products we design in Figma.

Thanks to the clear requirements outlined in my PRD, I could quickly pivot to a microservice architecture for the AI analysis engine, ensuring better scalability and maintainability.

While this added 3 days to the timeline, it will prevent weeks of refactoring down the road.

DEVELOPMENT DEEP DIVE: TECHNICAL ARCHITECTURE

Here's how the technical pieces fit together:

• Frontend Architecture

  • NextJS - React 18 with TypeScript

  • Tailwind CSS for styling

  • Shadcn UI components (heavily customized)

  • Clerk for Authentication [Account management]

• Backend Architecture

  • Node.js with Express

  • TypeScript for type safety

  • SupaBase for database management

  • ORMs & Drizzle

Using SupaBase is a game-changer for solo development. It handles authentication in collaboration with Clerk, storage, and database, saving me weeks of development time on these foundational elements all done without writing a single line of code - thanks to AI.

• AI Analysis Engine

  • Python with FastAPI

  • TensorFlow and PyTorch for ML models

  • OpenCV for image processing

  • Docker for containerization

The AI engine is where the real magic happens. It will process design artifacts through several analysis pipelines:

• Visual element detection and classification

• Layout and hierarchy analysis

• Color and typography analysis

• Accessibility evaluation

• Pattern recognition for consistency checking

• Integration and Deployment

  • GitHub Actions for CI/CD and version control

  • Vercel for frontend hosting

This setup gives me a fully automated deployment pipeline that will make iterative development much smoother.

The most challenging technical decision was how to handle the Figma integration.

I decided to use Figma's REST API rather than building a plugin initially, as this gives me more flexibility in how I process the design data.

I'll likely add a plugin in a future iteration for an even smoother workflow.

I'm curious: What's your experience with AI-assisted development tools like GitHub Copilot or Cursor AI?

Have they changed your development workflow? Reply and let me know your thoughts!

Coming tomorrow (if i’m not too tired to write): I'll share my analysis of the current UX assessment landscape and how my tool fits into the market.

Vibe Coding away, Mr John 😊

P.S. If you have experience with any part of this tech stack and have tips to share, I'd love to hear them - just hit reply!