Self-Build with AI · 6-Month Plan

Digital Signage CMS
Build Roadmap

From zero coding knowledge to a live product — using AI tools as your construction crew.

6 phases · 24 weeks · RM 2,500–3,200 total

01

Phase 1 Week 1–2

Set up your kitchen

Install tools · Create accounts · Learn the 3 golden habits

▼

Analogy

"Before you cook a restaurant-quality meal, you set up your kitchen first — buy the right pots, organise your counter space, and learn where the oven switch is. You are not cooking yet. You are just getting ready."

Day 1–3

Install Cursor IDE

Your AI code editor. Describe what you want in plain English — it writes the code. Like Microsoft Word, but for building apps.

Day 4–5

Create 3 free accounts

Supabase (your database), Vercel (your web host), GitHub (your save system). All free to start.

Day 6–7

Learn the 3 golden habits

1. Save to GitHub daily. 2. Paste full errors to Claude. 3. Build one tiny thing at a time — never everything at once.

Cursor IDE Supabase GitHub Vercel

Milestone: Laptop ready, all accounts created, first test project running live at a URL.

02

Phase 2 Week 3–6

Build the control room

Web dashboard · Login · Upload media · Build playlists · Schedule

▼

Analogy

"This is the TV station's broadcast control room — where a producer picks which videos to air and sets the schedule. You are building that room as a website only you and your clients can log into."

Week 3

Login screen

Go to Bolt.new. Type: "Build a login and register page using Supabase auth." It generates the whole page. Paste into Cursor and deploy.

Week 4

Media upload page

Ask Cursor: "Add a drag-and-drop upload page for images and videos. Store in Supabase storage. Show a grid of all files." Your media library.

Week 5

Playlist builder

Ask Cursor: "Add a playlist page — pick media, drag into order, set duration per item." Like building a YouTube playlist for your screen.

Week 6

Schedule screen

Ask Cursor: "Add a schedule page — pick a playlist, set start/end date and time, assign to a screen." Like a TV programme guide.

Cursor IDE Bolt.new Supabase Claude (debug)

Milestone: Working website — log in, upload files, build a playlist, set a schedule. All in the browser.

03

Phase 3 Week 7–10

Build the set-top box

Android app · Pairing code · Video playback · Offline cache

▼

Analogy

"The dashboard is the TV station. The Android app is the set-top box behind your display. Its only job is to receive the signal and play whatever it's told — on a loop, all day, without anyone touching it."

Week 7

Install Android Studio

Free tool to build Android apps. Has built-in AI (Gemini) that works like Cursor. Create a blank project, run it on a virtual phone first.

Week 8

Pairing code screen

Ask Gemini AI: "Show a 6-digit code on screen. Poll Supabase every 3 seconds to check if it's been paired." First screen your TV will ever show.

Week 9

Video + image player

Ask Gemini AI: "Fetch the active playlist from Supabase and loop through each item — video with ExoPlayer, images for 10 seconds each."

Week 10

Offline download cache

Ask Gemini AI: "Download all playlist files to internal storage. Play from local files, not the internet." Screen keeps working when WiFi drops.

Android Studio Gemini AI Supabase Claude (explain errors)

Milestone: Android APK installed on a Fire Stick or TV box. Pairs with dashboard. Plays your playlist on a real physical screen.

04

Phase 4 Week 11–14

Make it talk in real time

Instant content updates · Device status · Remote control

▼

Analogy

"Right now your station and set-top box send letters to each other. This phase gives them a phone line — the moment you press Publish on your dashboard, the screen changes within seconds. Like switching a live broadcast."

Week 11–12

Real-time channel

Supabase has a free Realtime feature built in. Ask Cursor: "When I publish a schedule, notify the Android app instantly via Supabase Realtime." No extra server needed.

Week 13

Device status page

Ask Cursor: "Show all paired screens — green dot if online in last 5 minutes, red if not. Show what content is currently playing." Your mission control.

Week 14

Remote reboot button

Ask Cursor: "Add a Reboot button per device." Saves you driving to the location when a screen freezes. One click fixes it from anywhere.

Supabase Realtime Cursor IDE Gemini AI

Milestone: Change content on dashboard → screen updates within 5 seconds. All screens visible live from one page.

05

Phase 5 Week 15–18

Lock the TV

Kiosk mode · Auto-start on boot · Screen on/off schedule

▼

Analogy

"If someone presses the home button on your screen, they could exit the app. Kiosk mode is like putting a locked glass case around the TV — visitors can see it, but nobody can change the channel or browse the menu."

Week 15

Auto-start on power

Ask Gemini AI: "Make the app launch automatically every time the device is switched on or rebooted." Power cuts no longer kill your screens.

Week 16

Kiosk lock mode

Ask Gemini AI: "Prevent users from exiting the app, pressing Home, or pulling the notification bar." One special command run once per device activates this.

Week 17–18

Screen on/off schedule

Ask Cursor: "Let admin set a daily on-time and off-time per device. Turn screen on at 8am, off at 10pm." Saves power, extends screen lifespan.

Android Studio + Gemini Cursor IDE v0.dev (UI polish)

Milestone: Screens boot themselves, lock themselves, turn on/off on schedule. Fully hands-free operation.

06

Phase 6 Week 19–24

Open for business

First client · Live widgets · Analytics · Monthly billing

▼

Analogy

"You have built a functioning restaurant. It is not Michelin-starred yet — but the kitchen works, the menu is real, and you can serve your first customer. That customer's feedback tells you exactly what to build next."

Week 19–20

First real deployment

Find a café, clinic, or office willing to test free for 1 month. Install one screen. Real-world problems you never imagined will appear — that is valuable data.

Week 21–22

Live widgets

Add clock, weather, and prayer time widgets (big in Malaysia). Ask Cursor to pull from OpenWeatherMap and Aladhan free APIs. Clients love these.

Week 23

Analytics

Ask Cursor: "Log every time content plays. Show a table of play counts per screen per day." Proof of value for your clients.

Week 24

Monthly billing

Set up BillPlz or Stripe. Charge RM 50–150 per screen per month. You are now a SaaS business with recurring income.

Cursor IDE Claude (new features) BillPlz / Stripe OpenWeatherMap API

Milestone: Live paying client. Real screens deployed. Monthly recurring income begins.

Your AI team — who does what

CL

Claude

Your architect. Plans the system, explains every error in plain English, answers every "why" question.

Architect

CS

Cursor IDE

Your builder. Writes all web and backend code inside your project from plain English descriptions.

Builder

GE

Gemini in Android Studio

Your Android specialist. Writes all Kotlin app code when you describe what you need.

Android Dev

BT

Bolt.new / v0.dev

Your designer. Generates entire UI screens from a text description in under 60 seconds.

Designer

SB

Supabase

Your database + file storage + real-time engine. Managed service — no server setup needed.

Database

GH

GitHub + Vercel

Your save system + web host. Push code → site updates automatically. Both free to start.

Host + Save

Total build cost

RM 2,500

self-build with AI · 6 months

vs. hiring a developer

RM 40k+

agency / freelance

AI tools monthly

RM 188

Cursor + Claude Pro

Revenue per screen

RM 150

per screen / month