AI Web Development & Indie Hacking Bootcamp

Builds a practical vocabulary for web development by tracking unfamiliar phrases in a running notes file and using free AI tools to fill gaps while avoiding overload.

Build a registration form for username, email, and password, enforce server-side validation: username 3–12 chars, alphanumeric; valid email; password 12+ chars; sanitize inputs and show errors or a thank-you.

Learn how to permanently store registration data in an SQLite database, hash passwords before saving, and enforce unique usernames and emails using prepared statements and basic validation.

Implement login with username and password, manage sessions and cookies to remember users, redirect back home after login, and add logout with a secure cookie approach.

Master git as a universal version control system to track changes, commit work, reset to a saved state, and manage features with branches and merges.

Design and seed a multi-table critter database with adjectives, nouns, verbs, and locations, enforce login on create critter, and implement the create new critter workflow.

Create a new critter form linked to adjectives, nouns, verbs, and locations, with a critters table containing foreign keys and author id; show 'my critters' on the home page.

Demonstrate securing a create form by enforcing server-side validation for nouns, verbs, adjectives, and locations, and strengthen cookies with http only and same-site strict settings to guard logins.

Create the includes/certificates folder and place the curl certificates file in your local WP project to enable secure communication with external AI image services during local development.

Develop AI-generated images for critters by integrating the Replicate API with PHP code, learning to send prompts and handle responses.

Protect API keys by moving sensitive values to a separate .env file outside the project, load them with an env loader, and reference them in code to test safely.

Save critter images permanently by storing them on the server and updating the critters table with a reference; use a public critter images folder with 32-character .webp filenames.

Explore scalable cloud storage by moving from local hard drive to AWS S3 as your app grows, balancing cost and reliability.

Design your app with Tailwind CSS to render a four-image grid, subtle header, and centered content, while installing Tailwind and generating output CSS for AI-assisted styling.

Set up home page header and footer, create lib/header.php and lib/footer.php, use tailwind, and implement php redirects to prevent directory listings while keeping login-aware header and footer showing current year.

Create a single critter page loaded by an id parameter and display the critter image. Add is_favorite and is_archived toggles with tailwind, and ensure only the author can modify.

Create on-page filters for critters by adjective, noun, verb, location, and status (favorited or archived). Bookmarkable results flow through url parameters, with tailwind styling and default hiding of archived critters.

Add a remix button that pre-populates create critter with the selected critter's values via URL parameters, show random defaults when none are provided, and ensure author-only access.

Introduce a dynamic credits system by adding a credits column to the users table, show a credits badge in the header, and deduct a credit when creating a critter.

Read the logged-in user’s credits from the users table; deduct one credit on critter creation, hide the form, and show a zero credits remaining message when zero.

Explore integrating Paddle for payments in a sandbox, create two products (20 credits for $3 and 50 credits for $5), and test the overlay checkout.

Learn to verify Paddle transaction webhooks by configuring a webhook destination in sandbox, testing transactions, and validating Paddle signatures.

Add a custom data field with the user id to paddle purchases, test with hook deck, and secure the secret key in an env file to credit the correct user.

Learn how to test a webhook-driven credits system with paddle, verify signatures, load env vars, and temporarily expose a local app using ngrok to simulate purchases.

Identify phishing risks and implement tokenized, time-bound tickets to secure Paddle checkout and user credits, using env secrets and server verification.

Improve ux after purchase by redirecting to a processing page with a tailwind loading icon, while credits update via a transactions table and polling /api/purchase every three seconds.

Enhance the single critter screen with dynamic quick filter links for noun, adjective, verb, and location, plus an 'other critters with this recipe' thumbnail gallery linking to each detail page.

Add pagination to the home page to show eight critters per page, with links below the critters and above the filters. Tailwind styling and URL parameter sanitization ensure secure navigation.

Create a marketing home page for visitors not signed in using tailwind, showcasing Critter Loop with AI-generated critters, four example images from the media folder, and sign-up prompts.

Create a logo for Critter Loop using AI prompts, ensure a transparent background, place it in header and footer, crop and export with Remove.bg and Pixlr, and size with Tailwind.

Launch the app on the public web using sandbox mode, cap global daily critter creations at 30, and track creation times to control costs while testers try it.

Apply a .htaccess rule to protect lib files, style signup and login with tailwind, and implement four-second delay before credential checks to guard against concurrent create-critter requests tied to credits.

Perform a security audit with an AI agent to identify vulnerabilities across the codebase, including prepared statements and escaping dynamic output.

Practice going live from a local WordPress project by verifying database tables exist and are seeded, and moving env files with the env loader for deployment.

Launch your live website by choosing a web host and uploading files to a real domain. Learn to use DreamHost, create a subdomain, and publish via a browser file manager.

Explore next steps after building your first app, emphasizing clean, maintainable code, choosing between Laravel or PHP structure, and adding real-time interactivity with JavaScript, HTML, or React, while staying motivated.