Building AI Apps Live from Cairo 🔴
Want to back the stream? The «داعم» membership on YouTube is EGP 60 a month: badges, emoji, and I answer your questions first on stream. Become a supporter
The gist
The stream centers on an extended practical experiment in refining a website with coding agents, especially hero-section motion, a dotted grid, connector lines, and a milestone progress bar. Luqman uses live previews, screenshots, and browser inspection to verify rendered results rather than trusting code alone, while investigating missing CSS keyframes, visual regressions, server or port confusion, and effects that disappear after refresh. Some motion became visible after switching to the project’s existing motion library, but other details remained under refinement; he emphasized limiting change scope and preserving good states in Git. He also explored a command center for projects with multiple agent roles and shared JSON status, while recognizing the risks of over-automation and of the management tool becoming a distraction. The choice between automated pipelines and steerable interactive sessions remained unresolved. Based on personal experience rather than a comprehensive benchmark, he compared Cursor, Warp, Antigravity, and Codex across embedded previews, terminal sandboxing, runtime control, context handoff, and usage limits. Audience questions covered WordPress versus newer platforms, Supabase and Firebase, turning a website idea into an Android app, and whether WordPress suits IPTV or OTT platforms, with an emphasis on content rights and legal risks. Unresolved issues included several interface animations, recovery of a deleted effect, YouTube API consumption, and YouTube’s inconsistent display of the live-stream duration.
108 moments from the stream
- 5:32:07
Antigravity versus Cursor for website development
Answering an audience question, he describes Antigravity as a capable, approachable environment with extensions, an embedded website preview, and a workflow for selecting page elements and working with their code. He criticizes a terminal-workflow restriction that he says appeared on February 26, and gives his personal opinion that Cursor is the better choice for this use case.
- 5:35:17
Correcting the connected-line motion logic
He explains that the animated lines should remain connected and travel from bottom to top toward the target element, instead of producing a broken snake-like effect. He continues evaluating the strong green color and checking the result in a local preview.
- 5:37:55
Starting a multi-agent frontend concept experiment
He begins a first experiment with multiple agents working together, asking frontend, research, and exploration agents to help conceptualize a polished, Apple-like interface. The passage ends while the request is still being formed, so no completed result is shown.
- 5:39:39
Researching a Timeline-Based Progress Bar
Research into building a strong website progress bar with milestones tied to different timelines, comparing CSS and suitable animation approaches before implementation.
- 5:41:55
Understanding Cursor Usage Limits
A discussion about reading Cursor’s usage dashboard: whether consumption refreshes weekly or monthly and how automatic usage may differ from explicitly selected models. The on-stream interpretation recommended using auto mode for routine work and reserving constrained usage for cases requiring a specific model.
- 5:46:23
From a Website Idea to an Android App on Google Play
A general response to a question about turning a website idea into an Android app: design and build a mobile app experience, then submit it to Google Play, noting that submission can take time.
- 5:48:28
Splitting Development Tasks Across AI Tools
A practical opinion that heavy Cursor use for backend work may consume limits quickly, so development can be split across tools and Cursor used selectively for web-interface work or tasks that suit it.
- 5:54:01
Describing a Connected-Line Animation to a Coding Tool
He describes a UI animation where separate lines start from one point, move in different directions, then continue along the connector between a command-center box and another box. He asks for the green connector to be highlighted, the timing to be coordinated, and diagrams to help clarify the requested behavior.
- 5:57:33
Comparing Two Attempt Reports Before Continuing
After unintentionally running two attempts in parallel, he decides to bring both reports into a separate session, ask for a comparison, and continue with whichever attempt appears more ready.
- 5:58:17
Clarifying Continuous Motion Rather Than a Glow Effect
He refines the animation instruction: when the two lines reach the connector between the boxes, they should continue moving until they touch the other box; a glow effect alone is not the intended behavior.
- 6:00:45
Refining UI Animation and Progress-Bar Designs with Prompts
Luqman critiques the timing and direction of an animated line connecting two interface elements, noting that his prompting and limited web-design and CSS background may affect the result. He then asks Claude to interpret a screenshot and propose several SVG designs for a milestone-based progress bar, describing the later result as much better.
- 6:08:49
Are There Better Alternatives to Supabase?
Answering a question about a website database platform, Luqman says he likes and uses Supabase. For alternatives, he suggests asking tools such as GPT, Gemini, or Claude for a comparison, without claiming that any option is universally better.
- 6:14:45
Designing a Progress Bar for a Public Website
He clarifies that the progress bar will appear to visitors on a public website rather than serve as an internal tool, so it should encourage people to follow the journey without oversharing, then asks for design variants suited to that context.
- 6:19:14
Prompting a Connected Border Animation Precisely
He describes an animation that starts at the bottom center of a box, travels in opposite directions around its border, and should then cross a thin connector into another element. He focuses the prompt on that connector because the agent kept omitting its highlight after each cycle.
- 6:21:22
When Firebase Can Help with App Development
He presents Firebase as an option that can simplify app development, while noting that free usage is limited and a developer comfortable working directly in an IDE and terminal can build independently; the platform’s main value here is easing the development experience.
- 6:23:43
Reviewing Hero Color Balance and Background Visibility
He asks for an analysis of the hero section because its layered greens feel overused, along with a review of a dotted grid intended to stay subtle in the center and become more visible toward the sides, before proposing improvements.
- 6:25:00
Starting with Auto Mode and Escalating When Needed
He tests an auto mode on hero-section changes, including the visibility of background effects, and proposes a workflow that starts there before switching to other models if it stalls or does not produce acceptable work.
- 6:31:33
Designing a Scan Line That Reveals a Dotted Grid
The scan-line effect was refined so a moving line would reveal the background dotted grid at an opacity matching the mouse-hover reveal, while different movement and pause timings were tried after the line disappeared or moved too slowly.
- 6:33:39
Why UI Refinement Takes Longer Than the Initial Build
A practical observation that building a website from scratch can be relatively quick, while refining fine details takes much more time and effort, and even a small adjustment can break part of the implementation.
- 6:41:16
Fixing an Animation Without Disrupting the Rest of the UI
Inspection showed that the implementation duplicated a dots layer and that CSS keyframes did not display the intended effect. When an alternative approach altered the section layout, hover behavior, and borders and introduced an error in a motion element, the direction was to return to the prior version and limit the change to the sweep itself.
Got a question about something in this stream?
Ask in the group