I VIBECODED a REACT APP in Jac (NO JAVASCRIPT)!!

Описание: Michael builds a powerful React frontend with AI faster than ever using Jac-Client.

This video demonstrates how to "vibe code" a React frontend for a smart expense tracker application using Jac-Client, focusing on styling and user interface (UI) design (0:36).

The video covers the following:

Connecting Frontend and Backend: The video starts by referencing a previous session where the backend was connected to the frontend using the "spawn" keyword (1:25-1:40).
Vibe Coding the UI: The core of this video is about generating the React frontend's styling and layout using an AI agent based on a prompt that defines the design system (primary blue, yellow accent), core features, and desired layout (2:04-2:47).
Agent's Work and Initial Errors: The AI agent successfully generates the styling for buttons, colors, cards, containers, and grids (4:36-4:50). However, upon serving the application, several JSX syntax errors are encountered (5:36-5:48).
Debugging with the Agent: The presenter copies the error messages and asks the AI agent to fix the JSX syntax issues, which the agent successfully resolves (6:05-7:02).
Frontend Demonstration: The video then showcases the functional UI of the smart expense tracker, featuring a dashboard, total expenses, category breakdown, and three methods for adding expenses (manual, text, image) (7:17-8:01).
Testing and Bug Fixing: A manual expense entry is demonstrated. A bug is identified where the explicitly selected category ("food") is recorded as "other" (9:26-9:33). The presenter identifies and fixes the issue related to the upper method in the category matching logic (10:22-10:48).
Refactoring: Separating Frontend and Backend: The video concludes by demonstrating how to separate the frontend code (previously in the CL block) into a dedicated .cl.jac file, allowing for better organization of the application's architecture (11:55-13:06).
Updating Libraries: The presenter also updates the required libraries to ensure compatibility and stability (13:33-14:04).

Read more about this project on his blog at   / i-taught-my-expense-tracker-to-think-how-i...  

GitHub repository: https://github.com/MichaelAshley2000/...

#jac #coding #programming #expensetracker