My PoC setup
Tools I use to test things fast
Hey everyone, I’ve been tinkering a lot with AI in the last few weeks, and I’m cooking up some really cool stuff 😁
While working on my projects, I wanted to share my setup to test out new technologies and concepts as quickly as possible.
Disclaimer: AI was used for image generation and to help rephrase a few sentences.
What I avoid in a PoC
Before we start, let’s talk about a few time wasters I tend to avoid when dealing with a PoC:
UX/UI: Even if I talk about it here, UX/UI is my biggest time waster when working on PoCs and is often the last thing I want to work on. Also, as a maker, a good UI is worthless if the feature doesn’t work.
Design systems: there are dozens out there. You can find my (current) favorite one below, so I don’t waste time writing mine.
Validation: I know what I can and can’t do with my code. No need to lock it down at first.
Global state management: Whenever I’ve used a state management library while working on a PoC, I lose myself in it instead of focusing on features. So now, I stay pure React and use custom providers as much as possible. I even wrote some code I re-use across projects to infer type safety.
Dev environment
While I was used to setting up local projects for developing PoC, I now use Replit as much as possible for a few key reasons:
Browser-based IDE: I can work on my code from anywhere (there is even a mobile app) as long as I have a good-enough internet connection.
Env variable handling: This allows me to easily manage protected environment variables without using extra tools.
Cmd+Enter to run and get an HTTPS URL: I can inspect and share my dev URL in a matter of minutes. It’s also really helpful when I need to test and develop webhook endpoints.
Repl templates: When looking for a base setup to get started with development in a new language or library, I just select a Repl template, and I’m ready to run the code instantly.
Integrates completion / formaters: All my usual tools (typescript, prettier, eslint) are available as soon as I install the required dependencies.
Ghostwriter: I enjoy working without Github Copilot, and I was positively surprised when trying out Replit’s Ghostwriter. On top of auto-complete, it’s available within a chat window and as a contextualized command when selecting code.
Collaborative programming: For experimental development, it’s way faster than any git-based workflow.
Regarding pricing, there is a free tier. But I recommend paying the 20$ a month subscription to access private Repls, Ghostwritter, a boosted server, and the ability to keep your dev server up. And no, in case you’re wondering, I didn’t get anything from Replit for this article.
When necessary, I switch to a traditional local git-based setup for projects. However, I've noticed that Replit takes me further every time without having to do so.
Data storage
Few applications are complete without some kind of data storage. I’m a huge PostgreSQL fan because it can do almost everything other databases do:
Relational storage
Key-value storage
On event functions
And many more I don’t even know of
So it shouldn’t be a surprise that my go-to service to get a project running is Supabase.
Perfect free tier for tinkering
High-level configuration through UI
Low-level configuration through SQL scripts
Authentication + Row level security when needed
Webhooks
And a Firebase-like JS SDK with the ability to generate Typescript typings.
Stack
I’m still on the edge between a Javascript or Python environment for LLM development. But as I feel that UX/UI will be king for LLM integration, and because I’m most familiar with it, I’m sticking to JS only right now.
Here is the stack I’m currently using out of order:
NextJS: This React framework handles 80% of my use case. I can write an API or server server-side rendered pages, which allows me to easily combine UX/UI and data.
ViteJS: Sometimes, building a SPA is required. In that case, I instantly switch to Vite for bundling.
Tailwind + DaisyUI: I still hate raw Tailwind with a passion (just look at the code tab of this example), but I always found it the easiest way to get started with styling. Fortunately, DaisyUI was the component library to win me over. It’s still pure CSS and comes packed with themes and components to make my life easier with just a few readable class names.
Typescript: Type safety and auto-completion is king. Thanks to it, I develop way faster without looking up API specs as often as I used to.
Prettier: Format on save. Enough said.
ESLint: It’s baked in with NextJS, so I use it, but it tends to slow me down for no good reason when starting up and experimenting, so sometimes I wait a bit before enabling it.
Jest/Vitest: When working on a PoC, I only use it if I plan on going TDD on a particular function.
Luxon: Functional date manipulation. No more date mutation.
Lodash: Structures manipulation. Utils for objects, arrays, …
Axios: Easy data fetching for 3rd party APIs
TanStack-Query: easy query management with hooks. Combines well with Axios and other async-based APIs.
I probably missed a few and will update this article accordingly if I remember them. In case you have any recommendations for me to upgrade my PoC stack, I’m all for it, and the comments are always open.
So thanks for reading through. If you found this article helpful, I would greatly appreciate it if you could share it with others. See you next time 😉