Must be 3โ20 chars. Letters, numbers, underscores, hyphens only. No offensive terms.
Complete your profile
Almost there โ pick an avatar and tell people a bit about yourself. You can change any of this later from your profile settings.
This is the name others see. Change it anytime in Settings.
0/300
Shows on your profile so others know your taste at a glance.
Admin Access
Enter the admin access code to proceed.
Admin Access
Restricted to site administrators only.
or
Admin Google Access
Enter the authorized admin Gmail to continue.
Submission
Pending
User
Active
Report
Tell us what's going on. Reports are only visible to admins.
Choose a reaction
Site Settings
Preview layout & theme preferences.
Preview layout
By default the site automatically matches your screen โ phone gets the Mobile UI, computer gets the Desktop UI. Force a specific layout here if you want to preview another size.
Theme
Use the sun/moon switch in the header to toggle Light, Dark, or System theme.
Customize Web/App
Make AfterLight more fun with custom themes and designs.
Notifications
Get notified when someone messages you, or when a song you submitted is reviewed.
Customize App Icon
AfterLight
โMusic is the silence between the notes.โโMusic is the silence between the notes.โ
Soft. Deep.
Songs that found me in the dark
A nerd's archive of niche indie, alternative & pop โ with liner notes, meanings, and the exact moods they belong to. No algorithms. Just obsession.
06
07
03
After Light
โ click play to spin โ
// Fresh ink
Recently Added
// Filter by mood
The Archive
06 entries
Not a blog. An obsession.
AfterLight:404Archive is a personal site by JK โ a place to document the songs that don't chart, don't trend, but live rent-free in your head for years.
Every entry includes the full story: what the song is about, what it actually means, a key lyric breakdown, and the precise mood it belongs to. Think liner notes for the internet age.
Songs are added slowly, intentionally. No algorithms. No hot takes. Just a nerd with a playlist and too many feelings about chord progressions.
Indie ยท Alt ยท Pop
Whenever
JK
Extreme
STEP 01 / 03
Submit Your Song
Found a song that lives rent-free in your head? Share it with the archive.
Sign up or log in to submit a song to the archive.
Sign up or log in to join the conversation.
โ
# Global Chat
0 online
PinnedWelcome to Global Chat! Be respectful and keep it about music.
Replying to :
Chats
Connect and discuss archival discoveries.
Sign up or log in to connect with other listeners.
Connect
Social Hub
Talk in the curated rooms, or build your archive network by adding friends and messaging them directly.
โ
Join a Chat Room
Global and genre-specific rooms โ discuss the analog era with everyone.
โ
Find Friends
Build your network. Search by username and connect privately.
Your Network Activity
Friends
Manage your connections. Discover fellow archivists and expand your musical network.
Friend Requests
Pending (sent)
No pending requests. Tap the pen above to add someone.
โ
Profile
โ
@โ
Joined
โ
Time on site
โ
Your code
โ
Friends
Saved Songs
Edit profile
?
Choose from the profile pictures uploaded by the site owner.
@โ
Joinedโ
Time on siteโ
0/300
Changing this updates the set of profile pictures you can choose from above.
Danger Zone
Permanently delete your account, profile, and saved data. This can't be undone.
Delete Account
Are you sure you want to delete your account? Your profile, saved songs, messages, and account access will be permanently removed.
Are You Sure?
โ This action is permanent. Deleting your account cannot be reversed โ your profile, saved songs, messages, and friends will all be gone for good.
Your Messages
Select a conversation from the sidebar to start chatting, or compose a new message.
@friend
0 messages
Replying to :
??
@user
#000-000
โ
Songs uploaded
Share a song
Send a track from the archive to your friend as a recommendation.
Send a GIF
To your friend
Powered by Giphy
Send to a friend
Sending โ as a DM
#
#topic
0 messages
Replying to :
Chats
Create a Room
Start a new chat room around a song or artist.
Room Name
Description
Category
Privacy
Control Center
Admin Dashboard
โช00Songs Live
โ00Registered Users
โ00Pending Submissions
โ00Chat Rooms
Content
โSite Settings
โชManage Songs
๏ผAdd New Song
โคGenres
โMoods
โQuotes
Community
โUsers
โฃAvatars
โSubmissions
๐ฉReports
โChat System
๐กSafety & Bots
๐งEmail (OTP)
System
โLive Stats
โฆDatabase
Site Settings
Warm amber
Dusty violet
Admin Access Code
This is the code someone enters (after clicking the logo 5 times) before they even see the admin login form.
It's a light front-door lock, not a strong secret โ like the rest of this site's auth, it's checked in the
browser, so treat it as a deterrent for casual visitors rather than a real security boundary. The real gate
is your admin email + password below. The code is stored as a hash, not plain text, and the field below is
always blank โ it never shows the current code back to you (or anyone else).
Admin Login Credentials
This is the real admin email + password used on the login screen. Changing it here updates it for every
browser (once Supabase is connected โ otherwise it only applies to this browser). The password is stored
as a hash, never in plain text, and these fields stay blank on load.
๐ Owner Account
Link one chat/user account (by @username) as the site Owner. That account gets a gold profile
frame, a crown badge, an OWNER tag everywhere its name appears, and the power to ban/unban any
user directly from their public profile card โ no need to open this dashboard. Only one owner
account at a time.
Current owner: none set
Manage Songs
Add New Song
Registered Users
Profile Pictures
Upload the profile pictures users are allowed to choose from, tagged by gender. Users can only pick from images uploaded here โ no outside images.
JPG or PNG. Will be auto-cropped to a square and resized.
Users only see avatars tagged for their own gender, plus anything marked Unisex.
Manage Genres
Add, edit, or remove genre tags used across the archive.
Manage Moods
Moods power the filter bar and the colored tags on every song. Add, rename, recolor, or remove them.
Quotes of the Day
One quote is shown on the homepage each day (rotates automatically). Add many at once โ one quote per line. Optional attribution after a pipe: quote text | Author
Saved quotes
Pending Submissions
User Reports
Reports filed by users on other users or chat messages. Only visible here โ the reporter and reported user never see this list.
Chat System
Full control over the chat system โ toggle it on or off, manage rooms, and moderate messages.
Chat system enabled
Turn this off to hide chat site-wide (nav links disappear, page blocked).
AI moderation
Screens every chat/room/DM message for harassment, hate, sexual content, violence, self-harm, and grooming signals before it posts. Requires the moderate-message Edge Function + an OpenAI key โ see Database tab.
GIF Search (Giphy)
Powers the GIF button in DMs and chat rooms. This is a public client key, not a secret โ same spirit as the Supabase key on the Database tab. If you save while connected to Supabase, it syncs to every visitor's browser through site_settings; otherwise it's saved to this browser only.
Free at developers.giphy.com โ sign up, click "Create an API Key," choose "API" (not "SDK"), and it hands you a key instantly. Beta keys get 100 calls/hour, which is plenty here. Takes about 2 minutes.
All Rooms
Email (OTP)
Paste your EmailJS details here and signup verification codes will be emailed for real, instead of just appearing on-screen. All three values below are meant to be public (same spirit as the Supabase key on the Database tab) โ EmailJS has no separate "secret" key for this. If you save while connected to Supabase, these sync to every visitor's browser through site_settings; otherwise they're saved to this browser only.
EmailJS dashboard โ Account โ General โ "Public Key".
EmailJS dashboard โ Email Templates โ your template โ "Template ID". The template body must use {{to_email}}, {{to_name}} and {{passcode}} as its variables.
2. Email Services โ Add New Service โ connect Gmail/Outlook/any inbox you control โ copy the Service ID.
3. Email Templates โ Create New Template using the to_email / to_name / passcode variables above โ copy the Template ID.
4. Account โ General โ copy the Public Key.
Paste all three above and click Save. Until they're filled in (here or in config.js), signup falls back to showing the code on-screen so it's never blocked.
Safety & Bots
In one sentence: your site has two separate defences.
Turnstile stops bots at the signup form.
AI Moderation screens what real people type in chat.
They're independent โ you can run one, both, or neither. Everything below is off by default and
the site works fine without any of it; turn them on when you're ready to go public.
Current status
Loadingโฆ
Part 1 โ Turnstile (stops bot signups)
Free, unlimited, no account limits. Takes about 10 minutes. Do the steps in order โ
leave the switch in step 5 off until steps 1โ4 are done,
or signups will start failing for everyone.
1
Create a Turnstile widget
Go to dash.cloudflare.com โ Turnstile
and click Add widget.
Set Domain to your live site's domain (the one Cloudflare Pages gave you, e.g. afterlight404.pages.dev)
and Widget mode to Managed. Click Create.
2
Paste the Site Key here
Cloudflare now shows you two keys. Copy the Site Key
(starts with 0x4AAAAโฆ) into the box below and press Save.
This one is public and safe to put here.
3
Keep the Secret Key somewhere safe
Copy the Secret Key too, but
do not paste it into this page or anywhere in your GitHub repo.
Anyone who views your site's source could read it. It only ever goes into Supabase, in step 4.
4
Deploy the checking function to Supabase
A static site can't verify a Turnstile token by itself โ that has to happen on a server that
holds the secret. Copy the code below, then in a terminal in your project folder run:
supabase functions new verify-turnstile โณ paste the copied code into the file it creates supabase secrets set TURNSTILE_SECRET_KEY=your_secret_key supabase functions deploy verify-turnstile
5
Turn it on
Only now flip this switch. The signup form will start showing the check and will refuse
to submit until Cloudflare confirms the visitor is human.
If something's wrong, turn it back off โ signups keep working without it.
Turnstile enabled
Strict mode
Decides what happens when the bot check itself is broken โ function not deployed,
Supabase down, network fault. Off (recommended):
let the signup through and log it, so a server fault can't take your whole site offline
for new users. The honeypot, rate limits and row-level security all still apply.
On: block the signup. Safer against bots
during an outage, but if you deploy this wrong nobody can register at all.
A genuine "you are a bot" verdict from Cloudflare blocks either way.
Code for step 4 โ verify-turnstile
// supabase/functions/verify-turnstile/index.ts
// Deno Edge Function โ verifies a Turnstile token server-side, where the
// secret key can actually stay secret.
import { serve } from "https://deno.land/std@0.203.0/http/server.ts";
serve(async (req) => {
const { token, remoteip } = await req.json();
const secret = Deno.env.get("TURNSTILE_SECRET_KEY");
const body = new URLSearchParams();
body.set("secret", secret ?? "");
body.set("response", token ?? "");
if (remoteip) body.set("remoteip", remoteip);
const cfRes = await fetch(
"https://challenges.cloudflare.com/turnstile/v0/siteverify",
{ method: "POST", body }
);
const outcome = await cfRes.json();
return new Response(JSON.stringify({ success: !!outcome.success }), {
headers: { "Content-Type": "application/json" },
status: 200,
});
});
Part 2 โ Word Filter (screens chat messages)
Checks every chat and DM message against the word list below before it posts โ no OpenAI key, no external
API call. Already deployed and live. Set each word to either mask
(swaps the letters for ##### and still posts the message) or block
(the message doesn't post at all). Add words any time โ no redeploy needed.
Loadingโฆ
Live Stats
Local mode โ connect Supabase (Database tab) for site-wide live stats across every visitor, not just this device.
Right Now
๐ข0Online Now
โ0Signed In
โ0Guests Browsing
Growth & Activity
โ0Total Accounts
๏ผ0New Today
โ0Chat Messages
โ โPossible Bot Signups
"Possible Bot Signups" flags accounts created in rapid bursts โ 3 or more signups within 10 seconds of each other. It's a heuristic based on timing patterns, not a certainty a real script wrote them. Always check the Users tab before deleting anything it flags.
Who's Online
No live presence data yet.
Database Connection
By default this site stores everything in your browser only โ songs, moods, chat messages, ratings. Nobody else sees your changes. Connect a free Supabase project to make all of that shared and permanent across every visitor.
โช Not connected โ running in local mode
Songs, moods, and chat are saved only on this device.
Setup Guide
1. Go to supabase.com โ create a free account โ "New Project"
2. Once created, go to Project Settings โ API
3. Copy the Project URL and the anon public key into the fields above
4. In Supabase: Authentication โ Sign In / Providers โ Anonymous โ toggle it on. This is what lets each visitor's browser get a real, invisible identity the database can check writes against โ no email or password involved, and visitors never see it.
5. Run the setup SQL (below) once in your Supabase project's SQL Editor to create the required tables
6. Click Connect โ your site will now sync data for every visitor. You'll be asked for your admin password once more; this sets up a real, authenticated Supabase account behind your admin login, which is what's actually allowed to add/edit/delete songs, moods, genres, and admin settings in the database (everyone else gets read-only access to those). If that step doesn't complete right away โ e.g. your Supabase project requires email confirmation โ finish it via the confirmation email or in Supabase โ Authentication โ Users, then click "Sync Now" above.
7. Chat messages, DMs, friend requests, and user profiles are now tied to each visitor's real (if anonymous) session โ nobody holding only your public anon key can write as someone else, or read another person's DMs or friend requests, from outside the app.
8. The new Live Stats tab (in the sidebar) shows who's on the site right now, plus account/message growth โ it uses Supabase Realtime, which is on by default for new projects, so there's nothing extra to set up.
Real Google Sign-In Setup (optional)
The "Continue/Sign in with Google" buttons work as a simple alias picker until you do this setup โ after that, they use real Google accounts. This needs Supabase connected above and the site hosted at a real https:// address (Google won't redirect back to a local file).
1. Host this file somewhere with a real URL โ e.g. drag it into netlify.com/drop, or use GitHub Pages / Vercel.
2. In console.cloud.google.com, create a project โ APIs & Services โ OAuth consent screen (External, add your app name + support email).
3. Go to Credentials โ Create Credentials โ OAuth Client ID, type "Web application".
4. Under Authorized redirect URIs, add: https://YOUR-PROJECT-REF.supabase.co/auth/v1/callback (find YOUR-PROJECT-REF in your Supabase project URL above).
5. Copy the generated Client ID + Client Secret.
6. In your Supabase dashboard: Authentication โ Providers โ Google โ enable it โ paste the Client ID + Secret โ Save.
7. Still in Supabase: Authentication โ URL Configuration โ set Site URL to your hosted URL from step 1, and add it under Redirect URLs too.
8. Reload the live site and try "Continue with Google" โ it should now show the real Google account picker. For admin, make sure the Google account you'll sign in with matches the Admin Email set above in Site Settings.
AfterLight uses cookies to keep you signed in, remember your preferences, and keep the
platform secure. By accepting, you agree to our
Privacy Policy and
Cookie Policy.
โ
Rejecting non-essential cookies means things like staying signed in and saving your
favorites may not work properly. Essential cookies will still run so AfterLight can
function and stay secure.
Sign up or log in to connect with other listeners.