Goal: Understand how to move around your computer using the terminal so your projects stay organized and you don’t end up with files scattered everywhere.

What the terminal actually is:

The terminal is just a text-based way to move around your computer. Think of your computer like a house:

• Folders = rooms
• Files = items in the rooms
• The terminal = walking through the house using commands instead of clicking

How to open the terminal:

• Windows: Press Start → type PowerShell → open it
• Mac: Open Spotlight → type Terminal → open it

1 — See where you are

pwd

This shows your current folder (“room”).

2 — List what’s inside the current folder

dir

ls

3 — Move into a folder

cd foldername

Example:

cd Documents

4 — Move up one level

cd ..

This is like walking out of the room you’re in.

5 — Create a new folder

mkdir my-project

6 — Go into that new folder

cd my-project

7 — Open the current folder in VS Code (optional but helpful)

code .

This opens the folder in Visual Studio Code if he has it installed.

Recommended folder structure to stay organized:

• Projects (main folder)
  • rv-app
  • medmix
  • my-first-webapp
  • my-mobile-app

To create this structure:

mkdir Projects
cd Projects
mkdir rv-app
mkdir medmix
mkdir my-first-webapp
mkdir my-mobile-app
      

Tip: Always know which folder you’re in before running commands. If something “doesn’t work,” 90% of the time it’s because you’re in the wrong folder.

Goal: Have a real web app running on the internet, backed by real code in GitHub.

Step 1 — Install GitHub Desktop

• Go to https://desktop.github.com
• Install it and sign in with your GitHub account.
• This gives you Git + a simple visual interface for commits and pushes.

Step 2 — Install Node.js

• Go to https://nodejs.org and download the LTS version.
• This installs Node + npm, which most modern tools and CLIs use.

Step 3 — Install ONE AI CLI (your choice)

• Copilot CLI (Microsoft):

npm install -g @githubnext/github-copilot-cli
github-copilot-cli auth

• Claude CLI (Anthropic):

npm install -g @anthropic-ai/cli
claude login

Either one will help you write and edit real code from the terminal.

Step 4 — Create a real project folder

mkdir my-web-app
cd my-web-app
git init

Then open GitHub Desktop → Add Existing Repository → select this folder.

Step 5 — Use AI to scaffold a real app

• With Copilot CLI:

gh copilot suggest --target javascript

• With Claude CLI:

claude code

Ask it things like:

• “Create a basic Express.js server with a /health route.”
• “Create a React app with a login page and dashboard.”

Step 6 — Deploy to Render

• Go to https://render.com and sign in with GitHub.
• Click New Web Service → choose your repo.
• Set:
  • Build command: npm install
  • Start command: npm start
• Render builds and hosts your app, and gives you a real URL.

Daily loop (real developer workflow):

• Edit code locally.
• Commit in GitHub Desktop.
• Push to GitHub.
• Render auto‑deploys.
• Test the live app.

Important: Lovable gives you a prototype. You can use it as a starting point, but you should treat it as a draft, not a finished product.

Step 1 — Export from Lovable

• In Lovable, export/download the project as a ZIP file.

Step 2 — Create a folder and extract

mkdir lovable-project
cd lovable-project
git init

• Extract the ZIP contents into this folder.
• Open GitHub Desktop → Add Existing Repository → select this folder.

Step 3 — Install dependencies

If it’s a Node/React project (most are):

npm install

Step 4 — Run it locally

npm start

If it runs in the browser, good — you now have the prototype running in a real dev environment.

Reality check: Lovable code usually has:
– No real backend
– No real data sources
– No authentication
– No production‑grade routing or infrastructure

Step 5 — Use AI CLI to replace weak parts

• Open a file (for example, App.js or routes.js).
• Use Copilot or Claude to help rewrite logic with real APIs and real structure.

“Rewrite this routing logic to use a real map API (e.g., Mapbox or Google Maps).
Add proper error handling and separate the API calls into a service file.”

Step 6 — Deploy this migrated project to Render

• Push the repo to GitHub.
• On Render, create a new Web Service from that repo.
• Use the same build/start commands as above.

Bottom line: Lovable gives you a head start on UI and structure. The real work is turning that into a proper app with real data, a real backend, and real deployment.

Goal: Build real Android apps that run on phones, not just in a browser.

Step 1 — Install Android Studio

• Go to https://developer.android.com/studio.
• Download and install Android Studio.
• During setup, let it install the SDK and emulator.

Step 2 — Create a new Android project

• Open Android Studio → New Project.
• Choose a template like Empty Activity.
• Language: Kotlin (recommended) or Java.

Step 3 — Run on emulator or device

• Set up an Android Virtual Device (AVD) in Android Studio.
• Or plug in a real Android phone with USB debugging enabled.
• Click the Run ▶ button to install and run the app.

Step 4 — Use AI CLI to help with Android code

• Keep your Android project in a Git repo (same as web).
• Use Copilot or Claude CLI to help write Kotlin/Java code.

“Generate a Kotlin Activity that shows a list of items using RecyclerView,
with a click handler that opens a detail screen.”

Step 5 — Connect Android app to your web backend

• Use your web app (from the earlier steps) as the backend API.
• From Android, call your API using HTTP (Retrofit, OkHttp, etc.).
• This way, web + Android share the same backend logic.

Important: A Lovable web prototype is not an Android app. You can reuse ideas, flows, and API design, but the Android app must be built in Android Studio with real native code or a cross‑platform framework.

Goal: Build real iOS apps that run on iPhone/iPad and can be shipped to the App Store.

Step 1 — Install Xcode (Mac only)

• On a Mac, open the App Store and search for Xcode.
• Install it (it’s large, so it may take a while).

Step 2 — Create a new iOS project

• Open Xcode → Create a new project.
• Choose App under iOS.
• Use Swift and SwiftUI (recommended) or UIKit.

Step 3 — Run on simulator or device

• Use the built‑in iOS Simulator (iPhone 15, etc.).
• Or plug in a real iPhone and trust the Mac.
• Click Run ▶ to build and run the app.

Step 4 — Use AI CLI to help with Swift/SwiftUI

• Keep the iOS project in a Git repo.
• Use Copilot or Claude CLI to help write Swift code.

“Generate a SwiftUI view with a list of items, a search bar at the top,
and a detail view when an item is tapped.”

Step 5 — Connect iOS app to your web backend

• Use the same backend API you built for the web app.
• Call it from iOS using URLSession or a networking library.
• Now web, Android, and iOS can all share the same backend.

Important: A Lovable web app is not an iOS app. You can reuse the idea, the screens, and the API design, but the iOS app must be built in Xcode with Swift/SwiftUI or a cross‑platform framework.

Goal: Use one codebase to target both Android and iOS, instead of building everything twice.

Option 1 — React Native with Expo (good balance of power + simplicity)

• Install Expo CLI:

npm install -g expo-cli

• Create a new app:

expo init my-mobile-app
cd my-mobile-app
npm start

• Use the Expo Go app on your phone to scan the QR code and run the app.
• This works on both Android and iOS from the same codebase.

Option 2 — Flutter (Dart, also cross‑platform)

• Install Flutter from https://flutter.dev.
• Create a new project with flutter create.
• Run on Android and iOS with the same codebase.

How this ties back to your web/backend work

• Your web app backend (Express, etc.) becomes the central API.
• React Native / Flutter apps call that same API.
• Now you have:
  • Web app
  • Android app
  • iOS app
  • All sharing one backend and one source of truth.

Big picture: Lovable can help you sketch the idea. The real stack is:
– Web backend (Node/Express) on Render
– Web frontend (React) on Render
– Mobile apps (React Native/Expo or Flutter) calling that backend
– GitHub as the source of truth for all code