Design & Data Visualization Inspiration
References that blend storytelling, interaction, and clean data design.
Interactive Preview · SEA 2019 (Sample)
Higher well-beingLower
GDP
Support
Health
Freedom
Tip: drag the slider or tap ◀ ▶ to switch countries. Tap a legend chip to highlight a metric. Long-press / hover a bar for a tooltip. Mobile-friendly, no libraries.
Build the Data
Auth — Simple Login (Vanilla JS)
Front-end only example: validates email + password, then stores a fake session in localStorage. Swap this later for Supabase or Firebase.
Build this Login (Step-by-Step)
- Markup: Add a form with
email + password inputs and a submit button (see the demo form above).
- Validate: In JS, prevent default submit, check email regex & password length, and show inline messages.
- Session (demo): If valid, create a small object like
{ user:{email}, token, ts } and store it in localStorage as demo_session.
- Replace with real auth (pick one):
- Supabase Auth: enable Email or Magic Links in the dashboard, then use
@supabase/supabase-js to signInWithOtp or signInWithPassword.
- Firebase Auth: initialize the SDK, choose providers (Email/Google), then call
signInWithEmailAndPassword or sendSignInLinkToEmail.
- Protect pages: On load, read your session (or Supabase/Firebase user). If missing, redirect to /login; if present, show the app. Always enforce rules on your server too.
- Log out: Clear session storage (or call the provider’s
signOut()), then navigate to home.