SEE EVERY DROP
TAKE FULL CONTROL

SMART WATER PLATFORM — Student instructions
Access GitHub · Clone · Open in VS Code · Modify with Copilot

You will work with a prepared water-management application. First, copy it from GitHub to your computer, open it in VS Code, and try a small visual change using Copilot. You do not need to create a new app.

1. Before you begin

The GitHub repository is public. You do not need a GitHub account, invitation, or individual permission to view, clone, or download the code. GitHub sign-in may still be needed to use Copilot.

• Install Git. On Windows, Git includes Git Bash.
• Install Visual Studio Code.
• In VS Code, install the GitHub Copilot / Copilot Chat extension if available to you, and sign in when prompted. If you do not have Copilot access, ask your teacher about an alternative AI coding assistant.
• Public repository: SmartWaterPlatform on GitHub.

2. Clone the repository — choose ONE method

Method A: Inside VS Code (recommended)

1. Open the public SmartWaterPlatform repository on GitHub. Click Code → HTTPS and copy the repository URL.
2. Open VS Code. Press Ctrl+Shift+P and choose Git: Clone (or Clone Repository).
3. Paste the copied HTTPS URL. GitHub sign-in is not required to clone this public repository.
4. Choose a permanent location on your computer (such as Documents). When cloning finishes, select Open to open the SmartWaterPlatform folder.

Clone only once. Later, reopen the same folder in VS Code using File → Open Folder.

Method B: Using Git Bash (alternative)

Open Git Bash and run the commands below. No GitHub sign-in is required to clone the public repository.

cd ~/Documents
git clone https://github.com/smart-water-EDU/SmartWaterPlatform.git
cd SmartWaterPlatform

Then, in VS Code select File → Open Folder and open the newly cloned SmartWaterPlatform folder. If Documents is in OneDrive or another location, use File Explorer to choose a suitable folder and open Git Bash there instead.

3. Run and explore the existing application

1. In the VS Code Explorer, locate index.html in the project root.
2. Open the SmartWaterPlatform folder in File Explorer and double-click index.html. It opens in Chrome, Edge or another modern browser.
3. Explore the Monitoring, Management and Predictive Maintenance tabs. Select a floor or building module to see how the interface works.
4. Leave the browser open. After editing code, save in VS Code and refresh the browser (Ctrl+R) to view your changes.

Important: This version is a static browser app. No npm install, npm start, localhost, Node.js, or executable setup is needed for ordinary use and CSS/JavaScript editing. Its water data and application logic are included in the repository.

4. Make a safe first change with Copilot

1. In VS Code, open the Copilot Chat panel (or the Chat icon) and make sure it can read your project folder.
2. Start with the read-only prompt below to understand the code before changing it.
3. Choose ONE small styling experiment. Ask Copilot to describe the proposed change first, and approve only CSS edits.
4. Review the changed files in the Source Control panel. Save the CSS file, refresh index.html in your browser, and check the result.

Prompt 1 — Understand the project (no edits)

“Read README.md and inspect the project structure. Briefly explain which files control the visual style and how I can preview changes in the browser. Do not modify any files.”

Prompt 2 — Change one color (CSS only)

“Make a small visual-only change: slightly soften the background color of the dashboard cards toward blue-gray. Change CSS only (look in styles/). Do not edit HTML, JavaScript, data files, charts, layout dimensions, labels or application logic. Tell me which CSS selectors you plan to change before making edits.”

Prompt 3 — Improve a hover state (CSS only)

“Identify the CSS rule for the main tab buttons. Make the hover color a little clearer without changing button size, position or behavior. Edit CSS only. Do not modify scripts/ or data/. Explain the exact change.”

Prompt 4 — Undo or compare

“Show me how to inspect the current file changes in VS Code Source Control and how to revert only the styling changes I made. Do not run destructive commands or modify any files without my approval.”

5. Keep your work safe

• The original data and calculations are in data/ and scripts/. For your first experiment, only change CSS under styles/.
• Do not rename or delete index.html, README.md, or project folders. Do not ask Copilot to rebuild or redesign the whole application.
• Check VS Code Source Control or run git status to see the changed files; use git diff to inspect exactly what changed.
• If the change is not good, use Undo (Ctrl+Z) or Source Control → Discard Changes on the specific CSS file. Discarding removes uncommitted edits in that file, so check first.
• The public repository is for obtaining the starter application. Keep your edits locally; do not push practice changes to main. The teacher will explain how to submit your work separately.

6. Optional: Update your copy before another session

If the teacher updates the public repository, first save or safely back up your local changes. Pulling can conflict with edited files. Ask for help if needed. Then open the VS Code terminal in the project root and run:

git pull origin main

If Git reports a conflict, do not force-push or delete files. Ask the teacher or Copilot to explain how to resolve it safely.

Build new features as small, testable modules. Keep educational assumptions visible and preserve the simulated baseline while evaluating alternative scenarios.

Suggested extensions

1. Tenant change-of-use scenarios. Calculate proposed hourly demand from unit area, consumption profile, opening schedule, occupancy and customer fullness. Compare it with a separate copy of the existing baseline.
2. Rainwater collection. Add rainfall inputs, roof catchment and runoff assumptions, first-flush diversion, filtration, tank storage, overflow and non-potable demand allocation.
3. Sewage heat recovery. Model sewage flow and temperature, exchanger performance, heat demand, recovered energy, added pumping energy and maintenance constraints.
4. Water balance and sensor quality. Add pressure or water-quality signals, meter uncertainty, missing data and sensor-offset scenarios, with explanations of how these affect alarms.
5. Demand and pump control. Compare simple schedules or pressure rules with predictive methods in simulation. Keep all pump actions virtual; this application has no real equipment control.
6. Data and usability. Add import validation, scenario export, clearer units, keyboard support and focused tests for calculations and totals.