Building a Premium Kanban MVP with Next.js, Vanilla CSS, and Antigravity Gemini 3.5 Flash

Google Antigravity IDE is a standalone, next-generation development environment designed from the ground up for agentic AI software development. Forked from the open-source foundation of Visual Studio Code, it provides a familiar interface but focuses entirely on managing autonomous AI agents rather than just performing text autocomplete. It is available as a free download for macOS, Linux, and Windows

Building a clean, functional, and visually striking Minimum Viable Product (MVP) usually requires balancing development speed against code quality. In this project, the goal was to build a single-board Kanban application using modern web technologies, strict custom styling guidelines, and comprehensive automated testing.

To achieve this efficiently, I pair-programmed with the Antigravity coding assistant, leveraging the Gemini 3.5 Flash model. Here is a breakdown of how we built the application and why the experience was so successful.

The Requirements

The target was a minimalist but premium Kanban application with the following key attributes:

Framework: A modern Next.js project initialized inside a frontend subdirectory.

Layout: Exactly 5 fixed columns (Backlog, To Do, In Progress, Review, Done) with support for inline column renaming.

Features: Drag-and-drop mechanics to move cards, card creation (title and description), and card deletion.

Styling: Strictly Vanilla CSS (no utility frameworks like Tailwind) mapped to a custom color scheme featuring a Dark Navy header, Accent Yellow highlight lines, Blue Primary keys, and Purple Secondary action items.

Testing: Rigorous unit tests via Jest/React Testing Library and integration tests via Playwright E2E.

The Implementation Process

The Gemini 3.5 Flash model systematically planned and executed the implementation steps:

Scaffolding and Configuration: The model first analyzed environment tools to initialize Next.js in non-interactive mode. It stripped default styling imports, set up custom font loaders (Outfit via Google Fonts), and declared strict TypeScript interfaces for the state model.

Vanilla CSS Styling: Designing custom scrollbars, transitions, and hover states using standard CSS properties. The model set up modular classes in globals.css that resulted in a gorgeous, cohesive card interface.

Core Logic & State Management: Integrating @hello-pangea/dnd for smooth card transitions. The model implemented client-side state handling to prevent Next.js hydration issues, and configured local storage synchronization so progress is kept between page reloads.

Rigorous Testing and Verification

What set this development flow apart was the model's approach to automated validation:

Unit Testing: It created a Jest suite mocking layout measurements for @hello-pangea/dnd, verifying column title updates, card creation, and card deletion.

E2E Testing: It configured Playwright to execute integration scenarios. The model resolved a common E2E testing challenge with drag-and-drop by replacing standard locator utilities with coordinate-stepped page.mouse movements, ensuring the drag-start thresholds were properly triggered in Chromium.

All 4 unit tests and 5 E2E integration tests passed successfully on the first run after testing corrections.

https://github.com/singneha/kanban/tree/main

My Experience Using Antigravity Gemini 3.5 Flash

Using Antigravity powered by Gemini 3.5 Flash (High) made this implementation seamless. Key highlights of the developer experience include:

Proactive Planning: Before writing code, the assistant generated a comprehensive implementation_plan.md and task.md checklist, ensuring we were aligned on dependencies and visual styling beforehand.

High Precision: The code written was clean, fully typed, and adhered strictly to the requested architecture.

Autonomy: The assistant automatically managed environment setups, ran dependency installations, configured browser drivers, and launched tests, minimizing context-switching for me.

Troubleshooting Capability: When the initial Playwright assertion struggled with drag-and-drop hooks, the model diagnosed the browser-trigger mechanics and replaced them with precise mouse events to fix it immediately.

Conclusion

The result is a production-ready Kanban MVP with robust test coverage, styled beautifully to the exact branding requirements, and running locally on a hot-reloading Next.js dev server. Working with Antigravity Gemini 3.5 Flash has demonstrated that AI-driven pair programming can deliver reliable, well-tested code without sacrificing custom design principles.