Explore how front end and back end connect via API contracts, with front end the user-visible 20% and back end the 80% brain.

Explore the front end trio—HTML for structure, CSS for styling, and JavaScript for interactivity—through practical toy examples that demonstrate how each component shapes web pages.

Explore HTML basics with interactive canvas examples from W3 schools, and see how HTML, CSS, and JavaScript create styled, dynamic web pages.

Explore the back end by linking front end actions to an application server, the API, services, and databases that store carts, payments, and orders.

Explore how an API connects the front end and back end, defining inputs and outputs, while distinguishing services from API and showing how databases and service diagrams support interactions.

Track the waiter taking the order, the order system generating an order ID, and the chef and assistants preparing dishes, handling exceptions and allergens, then billing and updating payment status.

Learn how an api acts as a contract between services, defining requests and responses. Illustrate with ice cream, pizza, cab booking, bank checks to reveal api contracts and errors.

Explore relational databases with defined schemas, and document databases like MongoDB that nest orders to reduce duplication. Compare columnar databases such as Cassandra that partition data by columns for efficiency.

Analyze a real taxi app service diagram, including registration with OTP, profile data, and external integrations like Google login and payments through Stripe or Razorpay.

Examine the taxi app service diagram for drivers, detailing lightweight user registration versus driver onboarding with licenses and vehicle documents, plus a review and rating system linked to trips.

Discover how an API serves as a communication between services, detailing an API address, endpoints, and parameters, and explain how the API contract governs requests and responses.

Explore notification api types, showing email, messaging (WhatsApp, Telegram), sms, and voice notifications, each needing sender and recipient details, message content, templates, and contact validation.

Analyze how a PRD is reviewed by an LLM, refined by feedback, and transformed into a cab rentals website prototype with home, about, services, fleet, and contact sections.

Explores debugging a cab rentals project by drafting and reviewing PRD, refining prompts, and guiding an AI to deliver a React-based website prototype with home, about, services, fleet, and contact.

Debug with ai prompts to fix client names, logos, navigation, and visual assets, while iterating plans and implementations to improve the app experience. Observe ai suggestions and iterative implementation.

Learn to save contact form submissions to a database with Supabase, create an admin dashboard, and track status using a simple email whitelist for admin authentication.

Understand the sign-up before sign-in flow and the initial admin assignment in a super base authentication system. Test forgot password and reset email workflows within an ai-built admin portal.

Learn how to manage Supabase projects by pausing inactive databases for resource savings, restoring data within 90 days, and navigating authentication and admin dashboards.

Learn how to implement admin authentication with an email whitelist, signup and verification, initial admin setup, and a secure admin dashboard with access control.

Recap the ai-driven build of an interactive website from competitor analysis and prd creation to iterative debugging with small prompts, plus a contact form and admin portal.

Learn how to build a personal professional website using AI tools, compare emergent, lovable, Replit, and Bolt, and craft a PRD with LinkedIn data to generate qualified leads.

reviewed a personal website walkthrough, highlighting the hero banner, services and pricing in INR, contact options, media and speaking engagements, and suggested usability improvements.

Connect your entire workspace to GitHub to save code and pull the codebase into Bolt or other tools for deployment, with data saved automatically.

Add a photo gallery to the gap year service section by collecting images, prompting AI to place and caption them, and balance the two-column layout for a cleaner, larger gallery.

Add media gallery images and podcasts to a personal website, using AI to generate headers, descriptions, and tags from visuals. Explore how the page links to podcasts and Spotify episodes.

Experiment demonstrates successful WhatsApp and email integrations on a personal website, opening chats and emails with pre-filled contact details and section-specific templates after about three hours of fine-tuning.

See how AI self-debugging prompts, analyzes, and confirms image additions across the media gallery and category pages, using prompts, tags, and screenshots to verify updates and refine results.

Assess the high cost of vibe coding tools, noting 107 credits worth 1600 INR (~$120) with half spent, and watch for high credit costs with lovable, Replit, and Bolt.

Learn how to fork out a new conversation and summarize prior work to keep the context window compact, reducing token usage while building a personal website.

Deploy a personal website to a public endpoint via GitHub pages, navigate billing and a 30-day enterprise trial, and explore Copilot and Advanced Security.

Enable GitHub pages by selecting the main source and saving; resolve why a private repository's site shows a public endpoint not loading on GitHub.io, despite possible custom domain steps.

Learn to deploy a React frontend to GitHub Pages with a GitHub Actions workflow, resolve routing and HTML issues, downgrade package versions, and achieve a successful deployment.

Using ChatGPT-assisted guidance, deploy a React-based personal website with Vercel by linking a private GitHub repo, troubleshooting access and framework detection, and weighing production deployment options.