PsicoLab / PsychLab

A free, bilingual (PT/EN) psychology website: interactive self-knowledge tests, evidence-based tools, and games about the mind, built as a static site with an optional, end-to-end encrypted account layer for saving and syncing your own results across devices.

Live site: erikaabrown.github.io

PsicoLab is an educational/recreational project. Nothing here is a clinical diagnosis or a substitute for a mental health professional.

Features

• 10 psychological tests: Big Five personality, Attachment style, Emotional Intelligence, Perceived Stress, Rosenberg Self-Esteem, Resilience, PANAS (positive/negative affect), Self-Compassion, Assertiveness, Dispositional Gratitude.
• 13 tools: mood diary, thought record (CBT), breathing exercise, guided meditation, gratitude journal, habit tracker, sleep diary, worry box, progressive muscle relaxation, coping cards, achievement log, a guided self-compassion break, and a patterns/insights panel that surfaces trends across your own logged data.
• 13 games: Stroop test, reaction time, emotion recognition, cognitive bias quiz, prisoner's dilemma, choose-your-path adventure, digit span, myth-or-fact quiz, N-back, a cognitive-distortion spotting game, a wheel-of-emotions vocabulary game, an inner-critic reframing game, and an assertive-communication scenario game.
• Learn section: a 60+ term glossary, a history-of-psychology timeline, and a daily-refreshed page of psychology articles (see Articles pipeline).
• Custom illustrated artwork throughout: a hand-drawn tree emblem as the site's hero image, header logo, and favicon, plus a matching custom icon for every single test, tool, game, and Learn page, used both as a page heading icon and as a large, low-opacity background watermark on its homepage card.
• Optional account, end-to-end encrypted:
  • Every tool's data is encrypted client-side (AES-GCM) with a random data encryption key (DEK) that never leaves the browser unencrypted.
  • Recovery codes: the DEK is wrapped twice, once with a key derived from the password and once with a key derived from a one-time recovery code, so a forgotten password doesn't mean lost data.
  • Professional sharing: an account can connect to a professional (e.g. a psychologist) via a short code and choose exactly which categories to share. Sharing uses pairwise ECDH (P-256) key exchange, so the server only ever stores ciphertext and public keys, never a shared secret or plaintext.
  • An admin-gated panel grants professional status and manages users.
• Bilingual (PT/EN) and light/dark theme, both persisted locally.
• Security hardening: progressive account lockout, timing-safe login/recovery lookups, a signup honeypot, an IP tarpit/blocklist for scanner traffic, and a Content-Security-Policy on every page.

Tech stack

• Frontend: static HTML/CSS/vanilla JavaScript. No framework, no build step, no dependencies to install; this is intentional, so it deploys as-is on GitHub Pages.
• Backend (optional, only needed for the account/sync features): a Cloudflare Worker + D1 (SQLite) database, both on Cloudflare's free tier. See cloudflare/README.md for the full setup walkthrough.
• Crypto: the Web Crypto API (AES-GCM for data encryption, ECDH P-256 for pairwise key exchange, PBKDF2 for password-based key derivation), no external crypto library.

Project structure

index.html              Homepage: hero, test/tool/game cards
account.html            Sign up / sign in, profile, sync, professional connections
professional.html       Dashboard for professional accounts (connected patients)
admin.html              Admin-only panel (search users, grant professional status)

tests/                  The 7 psychological tests
tools/                  The 10 self-help tools
games/                  The 10 games
learn/                  Glossary, timeline, articles

css/style.css           Shared design system (light/dark themes)
js/app.js               Shared i18n, theme, header/footer, small helpers
js/sync.js              Account/sync client: crypto, API calls, encrypted local cache

img/                    Site artwork (hero/logo/favicon, plus a custom icon per test/tool/game/Learn page)
data/articles.json      Cached articles feed, refreshed daily (see below)
scripts/fetch-articles.js   Script that regenerates data/articles.json
.github/workflows/      Daily articles refresh + Cloudflare deploy

cloudflare/             Worker source, D1 schema, migrations, backend setup guide

Running locally

No build step and no dependencies. Any static file server works:

python3 -m http.server 8765
# then open http://localhost:8765/index.html

The account/sync features need the Cloudflare backend running (see below); everything else, every test, tool, game, and the Learn section, works fully offline against localStorage.

Backend setup

The account layer is entirely optional. To enable it, follow the step-by-step (dashboard-only, no CLI) guide in cloudflare/README.md: create a D1 database, deploy the Worker, wire up the bindings, and point js/sync.js's API_BASE at your Worker's URL.

Articles pipeline

scripts/fetch-articles.js pulls and summarizes psychology articles into data/articles.json, rendered by learn/articles.html. A scheduled GitHub Action (.github/workflows/update-articles.yml) re-runs it daily and commits any changes.

License

Licensed under CC BY-NC-SA 4.0 (Attribution-NonCommercial-ShareAlike). You're free to share and adapt this project with credit, as long as it's non-commercial and any derivative is shared under the same license. See LICENSE for the full terms.