AsiaWorks Direktori

A business directory for graduates of AsiaWorks training. Graduates list their businesses, the public searches and browses them, and graduates find each other to work together. The interface is in Bahasa Indonesia.

Built as one Next.js app (React, TypeScript, Tailwind) that talks straight to Supabase from the browser. There is no server code of our own: every permission is enforced inside Postgres, so the app stays small and light.

Route	What it is
/	Home: banner, shortcuts, search with map and list, browse by industry or city, latest Peluang, perks, events
/bisnis/[id]	A business page
/peluang	Partner requests posted by graduates
/acara	Events with RSVP, collaboration stories, "offer to host"
/lulusan	Meet Graduates: every live business as a card
/daftar	Sign-up in three short steps
/masuk	Member login
/akun	Member dashboard: Peluang, Bisnis, Koneksi, Akun
/staff	Staff login and console

The banner on the home page is one slider, newest first. Only staff put a banner up, from the console: an announcement, or an ad for one business (members cannot submit ads). It moves on every five seconds until someone slides it by hand. A banner with a picture shows only the picture, so its message belongs in the picture: 1200 × 400 fits (wide screens trim a little off the top and bottom). A banner without one shows its title and text on a brand backdrop.

Run it locally

Needs Node 20+ and Docker.

npm install
cp .env.example .env.local   # then put in the local values shown below
npm run db:up                # local Supabase: Postgres, Auth, REST, Storage on http://localhost:54321
npm run db:apply             # tables, rules and functions
npm run seed                 # optional: demo businesses, events, members
npm run dev                  # http://localhost:3000

Local values for .env.local: the URL is http://localhost:54321, and the two keys are the x-anon-key and x-service-key lines at the top of supabase/local/docker-compose.yml (Supabase's public demo keys, local only).

After seeding, every demo account uses the password asiaworks123:

• Staff: [email protected] (sign in at /staff)
• Member: [email protected] (sign in at /masuk)

npm run db:reset wipes the local database and applies the schema again.

Put it on hosted Supabase

1. Create a new Supabase project. Use a project of its own: the schema creates tables such as profiles and events.

2. Open the SQL Editor, paste all of supabase/migrations/20261001000000_init.sql, run it once.

3. Authentication settings:

   • Turn off "Confirm email", or connect your own SMTP. Supabase's built-in mail only sends a few messages per hour, and staff verify every graduate by hand anyway.
   • Set the Site URL to your domain and allow https://your-domain/masuk and https://your-domain/daftar as redirect URLs (used by "Lupa kata sandi" and email confirmation).

4. Set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY where the site is hosted.

5. Make the first staff account: sign up at /daftar (the first step is enough), then run this in the SQL Editor and sign in at /staff:

   update public.profiles set role = 'staff'
   where id = (select id from auth.users where email = '[email protected]');
   

A project that already has the schema. The migration file always holds the whole, current schema, for a new project. When the schema changes after a project was set up, the change is also in supabase/upgrades/, one file per change, named by date. Paste the files that are newer than your project into the SQL Editor, oldest first. Each is safe to run twice and deletes nothing.

Check the rules on the hosted project. Put the project's URL, anon key and service role key in a file of its own (for example .env.hosted, same three names as .env.local; keep it private) and run node --env-file=.env.hosted scripts/check.mjs. It signs up its own test accounts, proves each rule through the API and removes everything it made. One step is skipped there, because it reads the database directly.

Deleted pictures on hosted Supabase. A deleted picture is gone from storage at once. Supabase's CDN can go on answering at the picture's direct address for up to a minute, and the browser of someone who already opened it keeps its own copy for up to an hour.

Add it to an existing Next.js site

The whole feature is one folder, app/(aw). It is a route group, so it adds the routes above without changing any existing one, and it brings its own layout (fonts, session, header, bottom bar).

The host site needs the Next.js App Router and Tailwind CSS 4.

1. Copy app/(aw) into the site's app folder.
2. In the site's global stylesheet, after @import "tailwindcss";, add @import "./(aw)/_lib/theme.css";. The file only adds tokens and utilities with their own names. It does not reset Tailwind's defaults. A site that does not build with Tailwind 4 yet installs it first (npm i -D tailwindcss @tailwindcss/postcss, plus the PostCSS plugin as in this project's postcss.config.mjs).
3. Install what it uses: npm i @supabase/supabase-js leaflet lucide-react and npm i -D @types/leaflet.
4. Add the two NEXT_PUBLIC_SUPABASE_* variables and run the SQL file on the Supabase project.

Things to know when merging:

This is the beginning of the README. Read the rest at the original. Read the full README ↗