Course info

The following reference materials were provided as context. Use them as guidance only -- always prefer the latest, most current information over any potentially outdated content in these files. --- Reference: 🧪 Lovable labs with Plan lab.pdf --- Page 0 LAB 1 -- Build Your First Screen Module 1: Foundations Objective Create your first screen in Lovable using a structured prompt, then refine it using iterative improvements. Step-by-Step Directions 1. Open Lovable and Start a New Project • Go to the Lovable interface at https://lovable.dev/ 2. Write Your First Prompt In the prompt box, type a clear, structured instruction such as: “Create a welcome screen with a large title, a short subtitle, and a Get Started button centered on the screen.” 1 3. Review the Generated Screen Look for: • Title placement • Button alignment • Spacing • Readability 4. Refine the Screen Using Iterative Prompts Try prompts like: • “Increase spacing between the title and subtitle.” • “Make the button full width.” • “Check if everything is centered everything vertically.” • “Change the blue (or black or whatever color it is) lettering to yellow ( unless it’s already yellow then pick a different color).” 5. Add a Second Component “Add an image above the title and center it.” 6. Change image size • “Make the hero image (it’s called a hero image) larger for more visual impact.” @ 2026 Copyright Bob Branchek Associates, LLC 2 7. Click on Code 8. Final Review Check: • Alignment • Spacing • Visual clarity • Button behavior • Image @ 2026 Copyright Bob Branchek Associates, LLC 3 LAB 2 -- Build a Structured Screen Module 2: Objective Enter a series of prompts to design a complete, well-structured screen. Step-by-Step Directions 1. Define the Screen You Want to Build 2. Write a Prompt that includes the following specifications: “This is a profile screen. Use a centered card layout. Include name, email, and profile photo. Add an Edit Profile button that navigates to an edit screen. Use consistent spacing and center alignment.” 3. Generate the Screen 4. Inspect the Output Check: • Did Lovable follow each of your specifications.? • Are all elements present? • Is the layout correct? 5. Refine the Screen Use small, targeted prompts: • “Increase spacing inside the card.” • “Make the profile photo oval (If it’s already oval make it round or a different shape.” • “Move the Edit Profile button below the card.” • “Add more fields to the Edit Profile screen like phone number, bio, and location.” • Try to change and save any of the information on the Profile card and save your changes • Are your changes preserved? @ 2026 Copyright Bob Branchek Associates, LLC 4 LAB 3 -- Build Your First Multi-Screen App Module 3: Building Your First Complete Multi-Screen Application Objective Create a multi-screen app with navigation and a clear user flow. Step-by-Step Directions 1. Define Your User Flow Choose a simple 3-4 screen flow, such as: • Home -> Add Item -> Item List • Dashboard -> Details -> Edit 2. Write a Multi-Screen Prompt Example: “Create a 3-screen task manager with Home, Add Task, and Task List screens. Add navigation between all screens.” 3. Generate the App Run the prompt and wait for Lovable to create: • Screens • Navigation • Components 4. Inspect Each Screen Check: • Titles • Layout • Buttons • Spacing @ 2026 Copyright Bob Branchek Associates, LLC 5 5. Test Navigation Click through: • Home -> Add Task • Add Task -> Task List • Task List -> Home Fix issues with prompts like: • “Fix navigation from Add Task to Task List.” -NOTE: Lovable may tell you that it’s already navigating correctly. Add four tasks such as “Mow the lawn” with a description such “lawn should be the height of 3 inches”, and specify a priority if that option is available. Move a task from Active to Done if that option is available. 6. Final Review Ensure: • Screens are consistent • Navigation is smooth • User flow is logical @ 2026 Copyright Bob Branchek Associates, LLC 6 LAB 4a -- Add Advanced Functionality working with your Task List Multi-Screen App Module 4: Advanced Features Objective Add forms, validation, data storage, dynamic lists, and modals. Step-by-Step Directions 1. Create a new Form Prompt: “Add a form with fields for title and description.” 2. Add Validation Prompt: • “Add validation” • “Make the character limit 10 for the title and 15 for the description” • Test this by entering 10 or less characters for the title and 15 or less characters for the description • Test it again by adding more than 10 characters for the title and more than 15 for the description • Does you get an error if your enter more the character limit or does it prevent you from entering more characters than the limit? • Test if both the title and description are required • Test if you get an error message if the title or the description or both are missing 3. Save Data to Supabase Prompt: “Save the form data to Supabase when the user taps Save.” • Select Enable the Cloud or Allow if it does not ask you to Enable the Cloud • Select Allow to let anyone read the items (You are clicking on Allow a second time) Prompt: “Show saved items.” @ 2026 Copyright Bob Branchek Associates, LLC 7 • It shows the saved item (the task) in the planner window • Click on Cloud then Database then tasks • You can view the rows in the database table that were added • We won’t attempt to add rows except through our form • Click on Cloud again to go back to the Preview Prompt: “Add delete functionality” • Click on Allow to enable deleting items • Click on the trash can on a task to delete it and test it • Add a confirmation dialog before deleting a task to prevent accidental deletions • Try deleting a task again Prompt: “Add edit functionality” • Select Allow to enable editing if you are prompted • Test it by selecting the pen next to the trash can and change the title or description or both Prompt: “Add Search functionality” • In the box above the list of items enter the Title and click on the magnifying glass to search for the item • The Search bar is probably in the list of all tasks Prompt: “Add sorting options” • In the new box to the right of Search items sort the items by Newest, Oldest, A-Z, Z-A, Priority, Title • You could get different search criteria unless you specify what Seach options you want included 4. Final Review Check: • Form works • Data saves • List updates @ 2026 Copyright Bob Branchek Associates, LLC 8 LAB 4b -- Add Advanced Functionality - Your already created Profile app Open the app that you created in module 2 with the form. Optional: If you deleted it earlier enter the prompts: “This is a profile screen. Use a centered card layout. Include name, email, phone number, bio, location, and profile photo. Add an Edit Profile button that navigates to an edit screen. Use consistent spacing and center alignment.” 1. Enhance the Form • “Select Add form validation and then return in the Chat box when the text “Add form validation with error messages for required fields and valid email/phone formats.” • If the Add form Validation isn’t available enter: “Add form validation with error messages for required fields and valid email/phone formats.” • Then remove the @ in the email or enter a new one without a @ and click try to Save Changes. • Select Show all fields on the profile card then return in the Chat box when the text “Add phone, location, and bio on the main profile card as well.” • They may already be available because we added them earlier so it may make changes to their display. • Select Data Persistence (if it’s available) and then return in the Chat box when the text “Store profile data persistently using Lovable Cloud so changes are saved across sessions.” • If The Data Persistence option isn’t available enter: “Store profile data persistently using Lovable Cloud so changes are saved across sessions.” • If you’re offered the following select the radio button Per-user with auth @ 2026 Copyright Bob Branchek Associates, LLC 9 • Test the sign up process and add an email and password and test the login after creating the account • In the recent version of Lovable it can automatically send a confirmation email to you entered email so use a valid email • Account but NOT YOUR REAL PASSWORD as the entered is stored in Lovable’s database (Supabase) • Test the login once you’ve confirmed it • Request a sign out and test it • It may tell you that’s there is a sign out in the upper right-hand corner • Enter “Style it differently and mark it sign out” @ 2026 Copyright Bob Branchek Associates, LLC 10 • Test the sign out by signing out and then back in again and see if your information is preserved 2. Access the Database • Click on the Cloud icon and then select Database and then click on profiles to show the rows in the table • You could click on Export CSV to download the rows into a file that you could view in a spreadsheet such as Excel 7. Final Review Ensure: • Screens are consistent • Navigation is smooth • User flow is logical @ 2026 Copyright Bob Branchek Associates, LLC 11 LAB 5 -- Polish Your App Open up you first app that you created in module 1 and add the following prompts: If you deleted it or can’t find it enter the following prompt: “Create a welcome screen with a large title, a short subtitle, and a Get Started button centered on the screen. Make the button full width. Add an image above the title and center it.” 1. Substitute the image • Click on the plus sign + on the top of your screen and select Design and then Visual Edits • • or select Visual Edits just below your chat box • Click on Visual Edits @ 2026 Copyright Bob Branchek Associates, LLC 12 • Select the hero image on the form (the image that we created earlier) • Move your cursor on top of the image in the Design screen on the left pane • Click on add image url and enter: (You need to move your cursor to the selected image that comes up in the Plan pane) @ 2026 Copyright Bob Branchek Associates, LLC 13 • You new image should be in your screen • Select Plan the Save (You may also need to select Back to Chat) • Enter “Add floating animation” • Enter “Add glow effect” or select Add glow effect if the option is available • The pulsing is very subtle after 1.2 seconds so look carefully) • Enter “Make the glow effect more prominent” • Enter “Add dark mode toggle if your background is white not black” • Enter “Add background particles” • Enter “Mouse interaction to particles” • The particles will move away when the mouse is near them. 2. Improve Spacing Prompt: “Increase spacing between all sections using a consistent 16px spacing system.” 3. Improve Alignment Prompt: “Align all text and components to a clean left grid.” 4. Improve Typography Prompt: • “Increase title size.” • “Use medium weight for subtitles.” 5. Improve Color Usage Prompt: “Use a single primary color for actions and neutral colors for backgrounds.” 6. Add Micro-Interactions Prompt: • “Add hover states to buttons.” • Move your mouse over the Get Started button to see the hover animation. • “Add a success animation after saving.” • If you get the following Question select Clicking “Get Started’ then Submit @ 2026 Copyright Bob Branchek Associates, LLC 14 7. Final Review Check: • Visual hierarchy • Readability • Consistency LAB 6 -- Publish & Share Your App Module 6: Publishing Objective Prepare your app for publishing, generate a shareable link, and test it like a real user. We could pick any of your apps for this as the process would be the same. The following 3 steps would apply to nearly any app. Let’s use the app from Lab 5 with the Advanced visualizations. Step-by-Step Directions 1. Test Every Screen @ 2026 Copyright Bob Branchek Associates, LLC 15 Check: • Navigation • Actions • Data • Layout 2. Fix Issues Prompt: • “Fix spacing on all screens.” • “Fix navigation from Home to Add Item.” • “Remove placeholder text.” 3. Clean Up Visuals Prompt: “Improve alignment and spacing across all screens.” 4. Generate a Shareable Link - Publish it Use Lovable’s Publish feature. @ 2026 Copyright Bob Branchek Associates, LLC 16 5. Test the Link Open it on: • Desktop • Mobile • Tablet 6. Unpublish To unpublish your app, go to Project Settings (click the project name in the top left -> "Settings") and look for the option to unpublish under the Domains section. From Settings you can also: • Rename the project • Transfer it to another workspace • Hide the Lovable badge LAB 7 -- Weather Application Module 8: Additional Applications Objective Create a weather application that will show 3 days of weather for an entered zip code. Step-by-Step Directions 1. Initial prompts Prompt: “Create a weather application that accepts a zip code and shows the weather for the next 3 days.” Enter a zip code and your forecast should be shown Prompt: Enter “Is this the actual weather data or is it simulated” @ 2026 Copyright Bob Branchek Associates, LLC 17 Lovable may return information such as: It's simulated data. The src/lib/weatherData.ts file uses a deterministic mock engine that generates consistent weather based on a numeric seed derived from the zip code--no real API is called. Would you like me to connect it to a real weather API (like OpenWeatherMap) to fetch live data? Prompt: Enter Yes Goto the url: https://home.openweathermap.org/users/sign_up And sign up for a free API key which will copy into Lovable as a secret You may need to wait for your key to be active 1. Wait ~2 hours for your key to activate, then try again Prompt: Change the api to Open-Meteo API • Click on Add hourly forecasts • Click on Add favorite locations • Set up an account and log in to save a location • Select Add hourly temperatures • Select Add weather Alerts • Fix the add alerts if necessary • Add push notifications check this may not want to enable • Add dark mode toggle • Add 7-day forecast • Add weather maps @ 2026 Copyright Bob Branchek Associates, LLC 18 LAB 8 -- News Summaries Module 8: Additional Applications Objective Create a news application that will show news summaries on a list of topics. Step-by-Step Directions Initial Prompt “Create a news summary application which allows you to show news summaries on the following topics: sports, technology, business, leisure, science. Each summary will provide a link to a url of the article or articles from which the summary was created. Allow the user to enable the news summary to be read aloud.” “Is this simulated or real news” Lovable will return: This is simulated/mock data - I created sample news articles in src/data/mockNews.ts to demonstrate the UI. To get real news, we'd need to connect to a live API. Would you like me to: 1. Use Perplexity API - AI-powered search that fetches and summarizes real news 2. Use a traditional News API - Like NewsAPI.org for headlines Both require enabling Lovable Cloud for secure API key handling. “Use a free news API to enable real news” Select Enable Cloud. Cloud is enabled. Now I'll use GNews API which is free (100 requests/day, no credit card). I need to add the API key secret first. Open up gnews.io in your browser and click on GET API Key @ 2026 Copyright Bob Branchek Associates, LLC 19 Sign up for your free account with you Google Gmail account if you have one or use another username and password. Copy the API key under Add Secret in Lovable Try each of the categories of news, open the full article for one of each of the news stories for each category and click on the arrow button to have the summary of a article read to you. Make sure that the sound is turned on for the computer tht you’re working from to hear the summary. @ 2026 Copyright Bob Branchek Associates, LLC 20 LAB 9 -- Lovable Plan Lab 1. In your browser open up the url: https://copilot.microsoft.com/. In the list box select Smart if it’s not selected which is the Large Language Model GPT-5.1. Enter the following prompt: Show me example of a plan for Lovable using plan mode for a weather app that will allow me to enter a zip code or use my current location, show the weather for 7 days, use real not simulated data using a free weather API, shows weather alerts, and include a weather map. It’ll create a detailed plan for Lovable that you can copy into Lovable similar to the following plan: Create a weather app called “ZipWeather+”. Goal: Allow the user to enter a ZIP code or use their current location to retrieve real weather data from free APIs. Show current conditions, a 7‑day forecast, weather alerts, and a weather map with radar/precipitation tiles. Data Sources: - ZIP -> Lat/Lon: https://api.zippopotam.us/us/{zip} - Weather + 7-Day Forecast (Open-Meteo): https://api.open- meteo.com/v1/forecast?latitude={lat}&longitude={lon}¤t_weather=true&daily=tempe rature_2m_max,temperature_2m_min,precipitation_probability_max,weathercode&timezon e=auto - Weather Alerts (Open-Meteo warnings): https://api.open-meteo.com/v1/warnings?latitude={lat}&longitude={lon} - Weather Map Tiles: https://tile.open-meteo.com/v1/precipitation/{z}/{x}/{y}.png Screens: 1. Home Screen - ZIP code text input - Button: “Use ZIP Code” @ 2026 Copyright Bob Branchek Associates, LLC 21 - Button: “Use My Location” - Logic: • If ZIP entered -> call ZIP API -> store lat/lon • If location used -> request GPS -> store lat/lon • Navigate to Forecast Screen 2. Forecast Screen - Show current temperature, conditions icon, wind, humidity - Show 7-day forecast cards with: • date • high/low temps • precipitation probability • weather icon based on weathercode - Buttons: • “View Weather Alerts” • “View Weather Map” - Logic: • On load, call Open-Meteo forecast endpoint using stored lat/lon 3. Alerts Screen - List of active alerts - Each alert shows: • title • severity • description • effective/expires - Logic: • Call Open-Meteo warnings endpoint • If no alerts, show “No active alerts for this area” 4. Weather Map Screen - Map component - Overlay tile layer using precipitation tiles - Toggle options: • Precipitation • Temperature • Wind - Logic: @ 2026 Copyright Bob Branchek Associates, LLC 22 • Swap tile URL based on toggle selection Data Models: - Location: { latitude: number, longitude: number, zip: string | null } - CurrentWeather: { temperature: number, windspeed: number, weathercode: number } - DailyForecast: { date: string, temp_max: number, temp_min: number, precip_prob: number, weathercode: number } - Alert: { title: string, description: string, severity: string, effective: string, expires: string } App Logic Flow: 1. User chooses ZIP or location 2. App retrieves lat/lon 3. App fetches weather, forecast, and alerts 4. User can navigate to Alerts or Weather Map Requirements: - Use real API calls (no mock data) - Bind API responses to UI components - Add navigation between screens - Request location permission when needed - Add map component with custom tile layer 2. We could be doing all this in Plan mode (replaces Chat mode) in Lovable directly but we’re doing in a Large Language Model (LLM) for several reasons. • In Lovable it’ll use credits, in Copilot AI (this version) it’s free • Once we become knowledgeable, we could write the plan in detail ourselves but we’re not there yet • We don’t have to restrict ourselves to one tool when more than one can get us better results, sometimes more easily 3. Click on Plan on the first page of Lovable and paste in the copied plan to Lovable. 4. Lovable will ask us questions before creating the app in order to refine the features of the app. 5. When you’re finished you can add additional features before you have the app created. Note: The last time I ran it (yesterday), it showed the temperature in Celsius, (-6) so I added a toggle to go from Celsius to Fahrenheit. @ 2026 Copyright Bob Branchek Associates, LLC 23 LAB 10 -- NVIDIA DGX Spark Reseller Optional Lab Objective Create a reseller application to resell the new Nvidia DGX Spark mini super computer. Step-by-Step Directions Open the application url or QR code (if available) provided by your instructor. Try all the features of the application including the video, and display the specifications, features, and performance. Create an application similar to it but it does not have to be identical. If you have time, enable one of the following: the Contact Sales, Request Quote, or Schedule Demo features. LAB 11 -- Gutenberg Project Reader Optional Lab Objective Create a reader application for e-books available on the Gutenberg website. This a very ambitious application and you may not have either enough time or account credits to complete it during the class. However, completing only part of it would be helpful in understanding the use of Lovable to develop application. Step-by-Step Directions @ 2026 Copyright Bob Branchek Associates, LLC 24 Open the application url or QR code (if available) provided by your instructor. Try all the features of the application including signing up for an account, logging in and out, searching for books by title and author, generating a book synopsis, locating a chapter and reading a chapter or the book synopsis. Create an application similar to it but it does not have to be identical. @ 2026 Copyright Bob Branchek Associates, LLC --- Reference: chapter 2 all complete.pptx --- MVP AND PRD MVP (Minimum Viable Product) An MVP is the simplest version of a product that includes only the essential features needed to satisfy early users and gather real‑world feedback. It helps teams validate ideas quickly without wasting time or money on full builds. Reduces risk by testing assumptions early Speeds up time‑to‑market Helps teams learn what users actually want Enables iterative improvement based on real data PRD (Product Requirements Document) A PRD is a document that defines what a product should do -- its purpose, features, behavior, and release criteria. It aligns stakeholders and guides development teams. It’s used in both waterfall and agile environments, though in agile it tends to be lighter and more flexible. Product overview and goals Target users Features and functionality User stories or use cases Constraints and assumptions Success metrics and release criteria --- Reference: chapter 4 all complete.pptx --- Database Concepts Thinking in Tables and Rows W NotebaokLM Users Table 123 alice@test.com 10:00 AM Tasks Table 987 Buy Milk False 123 Foreign Key Relationship a Tables: Structured storage (like spreadsheets). Columns: Attributes (text, boolean, timestamp, uuid). Relationships: The mechanism that allows an app to know "Who owns what" by linking IDs.