Tangy is building your next step
Shaping the lesson around what you want to make.
Tangy is building your next step
Shaping the lesson around what you want to make.
Computer Science
In this hands‑on journey you’ll explore the real Ego‑Lite code base, set up the macOS browser, run simple agent tasks, and finally weave those capabilities into the React full‑stack app you’re already building. Every step builds on the HTML, CSS, and React basics you already own, so you’ll never get stuck on fundamentals you’ve mastered.
Repository Orientation
2 lessonsLearn the layout of the Ego‑Lite repo, locate the files that power the ego‑browser skill, and understand how the pieces fit together.
Local Installation & Skill Setup
2 lessonsGet the Ego‑Lite app running on your Mac and add the ego‑browser skill so agents can use it.
Running Basic Ego‑Browser Tasks
2 lessonsUse the CLI to drive simple automation tasks and see the agent’s output.
Integrating Ego‑Lite into Your React Full‑Stack App
2 lessonsConnect the backend of your existing React project to ego‑browser and expose a front‑end control.
Public lesson
Predict
What will happen?
Take a moment to guess where the entry point for an Electron app usually lives. When you’re ready, type the name of the file you think starts the main process.
Tasks
Open a terminal in the folder where you keep your projects and run the clone command.
Run the following command: git clone https://github.com/your-org/ego-lite.git
Tasks
When the command finishes, list the top‑level entries to see what arrived.
Run the following command: ls ego-lite
You should see at least a README.md, a skills directory, and some Electron‑related folders.
Tasks
Launch VS Code right into the cloned folder so you can explore visually.
Run the following commands: cd ego-lite and code .
Tasks
In the editor’s Explorer pane, click on README.md. Scroll to the first line and verify it begins with a markdown heading (#).
If you can see a brief description of the project, you’ve confirmed you’re looking at the right file.
Tasks
Now locate the browser‑related code.
In the Explorer, expand the skills folder and then the ego-browser subfolder. Open the file that lists the exported functions (it will usually be index.js or browser.js).
Tasks
Take a quick glance to confirm it contains a export statement or a set of React components.
If you can see those exports, you know you’re in the right place.
The main Electron process lives in a separate folder—typically called main, electron, or src/main. Search for the file that creates the application window.
Tasks
Use VS Code’s search (⌘/Ctrl + Shift + F) for the string app.whenReady(.
Tasks
Open the file that the search returns first. Look for a line like: app.whenReady().then(createWindow);
Seeing that line tells you you’ve found the entry point of the Electron process.
Tasks
To prove you can point to each major directory and explain its purpose, create a short markdown file in the repository root.
Create a file with the following content: `# Project Overview
Tasks
Replace [main‑process folder] with the actual folder name you discovered (main, electron, etc.). Save the file as DIR_OVERVIEW.md.
Tasks
Display its contents to confirm you wrote it correctly: cat DIR_OVERVIEW.md
If the output matches the structure above and mentions the correct folder names, you’ve completed the navigation drill and can now describe the purpose of each top‑level directory.
4 modules · 8 lessons
Repository Orientation
Local Installation & Skill Setup
Running Basic Ego‑Browser Tasks
Integrating Ego‑Lite into Your React Full‑Stack App
Learn by building your own version.
Remix this public project to open the workspace, follow the guided build, and let the AI mentor teach you through the work instead of doing it for you.