NMTSA [Website]

NMTSA’s new site is a modern, accessible hub with a gated learning library.Visitors immediately see who NMTSA serves, what results look like, and how to donate or get training.

Comment

Inspiration

Families, clinicians, and donors were getting lost on a long, inconsistent site. Content updates required a developer, and basic login flows lacked modern safeguards. We wanted a clear path to answers, a non-technical way to publish content, and security that holds up under scrutiny—all deployable in a hackathon timeline.

What it does

  1. Website UI (React): A clean /about hub with five, with no drop downs which help the user to navigate through broader categories which concerns them.
  2. CMS Admin (React): Admins log in via the website and are auto-redirected to /admin to edit content without code.
  3. Chatbot: Answers common questions and deep-links to the correct page/section, with link whitelisting to our domain. 4.Java Backend (Spring Boot + MongoDB): Auth, content APIs, OTP signup, role detection (USER vs ADMIN), health checks.
  4. Security: Argon2id password hashing (auto-upgrades legacy bcrypt), login rate limiting, HttpOnly cookies, strict CORS.

How we built it

  1. Frontend: React + Vite (separate apps for Website and Admin), client-side routing, CSS modules, anchor routing to hub sections.
  2. Backend: Java 21, Spring Boot 3.5.x, Spring Data MongoDB. Endpoints for /auth/, /admin/, and public content.
  3. Auth flow: OTP signup → store user (role = USER), admin role via DB flag; login returns HttpOnly cookie; UI redirects ADMIN to /admin.
  4. Security hardening: Argon2id with tuned parameters, DelegatingPasswordEncoder (auto-rehash), per-email+IP rate limits, exact-origin CORS, security headers.
  5. Chatbot: Intent/keyword routing first; optional grounded LLM fallback; link whitelist; refusal policy for medical/personal advice.

Challenges we ran into

  1. Role-based cross-app routing: Seamless redirect from website login to the admin UI for admins, while users land in /portal.
  2. CORS with credentials: Enabling cookies across 5173/5174 without wildcards and keeping preflights clean.
  3. Content modeling: Designing page sections flexible enough for editors but simple to render on the site.
  4. Security tuning under time: Picking Argon2id parameters that add meaningful resistance (≈300–500 ms verify) without harming UX.

Accomplishments that we're proud of

  1. A usable MVP that’s easy to understand: 5 clear doors on /about, fewer clicks to answers.
  2. Secure-by-default authentication: Argon2id, rate limiting, HttpOnly cookies, strict CORS.
  3. No-code editing via the Admin portal—content changes go live in minutes, not release cycles.
  4. Grounded chatbot that reliably sends people to the right page (no wild links, no unsafe answers).

What we learned

  1. Good IA (information architecture) beats features—five doors simplified everything.
  2. Argon2id + rate limiting is a pragmatic upgrade path; DelegatingPasswordEncoder makes hash upgrades painless.
  3. Keeping website/admin/chatbot separate but aligned lets teams ship and iterate faster.

What's next for NMTSA [Website]

  1. Password reset with signed one-time tokens (email).
  2. Media uploads & preview in Admin (S3/Cloudinary).
  3. Analytics & search: Track chatbot CTR to hub sections; add site search.
  4. i18n: Multilingual content (e.g., Spanish).
  5. Chatbot: richer FAQ ingestion and multilingual intents.

Built With

Share this project:

Updates