How I Met Your Frontend (and Almost Lost My Mind)

I kicked things off with a classic setup — Vite + React. Created the sacred folders: components, pages, api, utils. Hooked up Tailwind CSS, felt like a pro... but it didn’t work. After some debugging rituals, fixing tailwind.config.js, tweaking the content section, and upgrading Node.js to version 20 using n — it finally came to life. I felt like a CSS wizard. Then came the UI. I built the holy trinity of QAPIX: QuestionCard, AnswerInput, and ProgressBar. Initially went with a “question–answer” form where the input disappears after submission. But hey, this isn’t 2010 — so I rewired it into a chat format. Now we’ve got a sleek messaging UI: you type, AI responds, everything’s neatly aligned and scrolls like a dream. Next up was the logic. Our AI analyst asks questions, listens closely, digs deeper until it fills a logical block. Once that’s done — it either moves on or lets you choose what’s next. That’s the heart of QAPIX: a smart, chat-driven interrogation that’s oddly polite. Now both frontend and backend are not just alive — they’re organized. FastAPI in the back, React + Tailwind in the front, everything structured and clean. Mistral API integration is next — it’ll handle question generation with brains. The project is growing, the frontend is alive. Time for coffee.

May 2, 2025 - 07:34

How I Met Your Frontend (and Almost Lost My Mind)

I kicked things off with a classic setup — Vite + React. Created the sacred folders: components, pages, api, utils. Hooked up Tailwind CSS, felt like a pro... but it didn’t work. After some debugging rituals, fixing tailwind.config.js, tweaking the content section, and upgrading Node.js to version 20 using n — it finally came to life. I felt like a CSS wizard.

Then came the UI. I built the holy trinity of QAPIX: QuestionCard, AnswerInput, and ProgressBar. Initially went with a “question–answer” form where the input disappears after submission. But hey, this isn’t 2010 — so I rewired it into a chat format. Now we’ve got a sleek messaging UI: you type, AI responds, everything’s neatly aligned and scrolls like a dream.

Next up was the logic. Our AI analyst asks questions, listens closely, digs deeper until it fills a logical block. Once that’s done — it either moves on or lets you choose what’s next. That’s the heart of QAPIX: a smart, chat-driven interrogation that’s oddly polite.

Now both frontend and backend are not just alive — they’re organized. FastAPI in the back, React + Tailwind in the front, everything structured and clean. Mistral API integration is next — it’ll handle question generation with brains. The project is growing, the frontend is alive. Time for coffee.