DSA Portal Build Summary — TheSprinters

What We Set Out to Do

Our original proposal identified three major problems with the current dsasd.org:

Current dsasd.org Problems

9+ menu items with nested dropdowns
Members navigate 3-4 pages to find basic info
FAQ has only 5 static questions, no search
News section shows 2 static cards
No AI assistance for common questions
Login page is a generic WordPress form
Newsletter only accessible via PDF download
Mobile nav is hard to use

Our Redesigned Portal

7 flat nav links with smooth scroll
Everything on 1 single page with inline panels
FAQ has 9+ questions with search + category filters
News section shows 3 image cards with tags
AI chatbot powered by Claude API
Custom sheriff-specific login (badge, rank, station)
Newsletter preview cards with expandable content
Mobile-responsive with hamburger menu

Feature 1: Interactive Member Dashboard

"One Dashboard. Every Resource. Zero Clicks Wasted."

Dashboard with quick-access resource tiles

Store section with real DSA HQ photos

What we built:

💳

Quick-Access Resource Tiles

8 tiles (Benefits, Legal, Wellness, Forms, Events, Store, Newsletters, PAC) that expand inline detail panels below them — no page redirects

🔎

Autocomplete Search Bar

Type 2+ characters and get instant results that scroll to the section and open the relevant detail panel automatically

📰

Newsletter Preview Cards

Past Silver Star issues displayed as clickable cards with expandable content previews showing article titles

📅

Events with RSVP

Upcoming events listed with date badges, locations, and functional RSVP buttons that update instantly on click

How clicks were minimized:

Action	dsasd.org (Before)	Our Portal (After)
Find benefits info	Menu → Benefits → Open Enrollment (3 clicks)	Click "Benefits" tile → inline panel (1 click)
Read newsletter	Menu → Silver Star → PDF download (3 clicks)	Click "Newsletters" tile → preview cards (1 click)
RSVP for event	Menu → Events → Calendar → Event page (4 clicks)	Scroll to Events → click RSVP (1 click)
Search for info	Find tiny search icon → new page (2 clicks)	Type in header search → auto-scroll (0 clicks)
Check legal rights	Menu → Member Resources → Legal page (3 clicks)	Click "Legal Defense" tile (1 click)

Feature 2: AI-Powered Smart FAQ Hub

"Find Answers Instantly — Or Chat With Us"

🤖

Claude AI Chatbot

Floating chat widget powered by Claude API. Trained on DSA knowledge: membership, benefits, legal defense, events, store, stations, PAC, and more

🔍

Searchable FAQ

9 pre-written Q&As with instant search filtering as you type. Category tags let you filter by topic

How the chatbot works:

User types a question in the chat widget
Frontend sends the message + last 10 messages to POST /api/sheriff/chat
Backend builds a Claude API request with a comprehensive system prompt containing DSA knowledge
Claude responds with a helpful, professional answer
Conversation history is maintained for context

Chatbot knowledge covers:

Organization info, headquarters, contact details
Membership eligibility, dues, enrollment
Benefits (medical, dental, vision, life insurance)
Legal defense fund, Weingarten rights, critical incident protocol
Wellness programs, peer support, CISM team
All 12 stations + detention facilities
Events calendar, golf tournament, family picnic
DSA Store merchandise, PAC endorsements
Contract/MOU information, grievance procedures

Feature 3: Sheriff-Specific Authentication

Old dsasd.org Login

Generic WordPress login form
Username + password only
No sheriff-specific fields
Shared user table with all site users
Basic session cookies

Our Portal Login

Custom modal with Log In / Sign Up tabs
Sheriff-specific fields: Badge #, Rank, Station
Separate sheriff_users database table
Separate jwt_sheriff JWT token cookie
Admin panel for viewing all members
User chip in header shows name + badge on hover

Signup fields we added:

Field	Purpose
Badge / Sheriff ID	Unique identifier (e.g., SD-1234)
Rank	Deputy, Corporal, Sergeant, Lieutenant, Captain
Station	Dropdown of all 12 SD County stations
Phone	Contact number for the member

Feature 4: Interactive Events Calendar

"See Every Event at a Glance — Click a Date, RSVP Instantly"

📅

Month-View Calendar Grid

Full interactive calendar with month navigation (prev/next/today buttons), day cells that highlight dates with events, and a today indicator

📌

Day Detail Panel

Click any date to see event cards with title, time, location, and optional event images (golf tournament flyer, memorial photo)

🎯

Event Badges + RSVP

Dates with events show a count badge. Each event card has a functional RSVP button that toggles between "RSVP" and "Going"

🛠

Smart Auto-Navigation

Calendar auto-opens to the month of the next upcoming event and auto-selects the first event date so members immediately see what's next

How the calendar works:

Event data is stored as a JavaScript array with title, date, time, location, and optional image fields
A Map (eventMap) indexes events by date key (YYYY-MM-DD) for instant lookup
renderCalendar() builds a 7-column CSS Grid of day buttons, marking today, out-of-month days, and event days with badges
Clicking a day calls selectDate() which updates the detail panel with event cards for that date
Month navigation (shiftCalendarMonth) re-renders the grid and auto-selects the first event in the new month
"Today" button jumps back to the current month and highlights today's date

Tech stack used:

Component	Technology	Purpose
Calendar grid	CSS Grid (7 columns) + Vanilla JS	Responsive month layout with day cells
Event data	JavaScript Map	O(1) lookup of events by date key
Date handling	Native Date API	Month math, day-of-week offsets, formatting
Day detail panel	Dynamic HTML rendering	Event cards with images and RSVP buttons
Navigation	Event listeners on prev/next/today buttons	Month shifting and today jump
RSVP toggle	Inline onclick handler	Visual feedback on button click

SRP functions powering the calendar:

buildEventMap() — indexes events by date into a Map for fast lookup
getInitialCalendarMonth() — finds the month of the next upcoming event to auto-navigate
renderCalendar() — builds the month grid with day buttons, badges, and highlights
renderDayDetail() — populates the detail panel with event cards for a selected date
selectDate() — updates selection state and triggers re-render
shiftCalendarMonth() — navigates forward/backward by one month
goToToday() — jumps to the current month and selects today

Real DSA Images Integrated

We sourced 11 images directly from dsasd.org's media library to preserve the organization's visual identity.

Official DSA badge + star logo

DSA Store Relaunch flyer

Memorial Golf Tournament flyer

Board & staff portrait

Line of Duty memorial

Silver Star newsletter

DSA Store interior at HQ

Members at the golf tournament

Tech Stack

Flask + Python

Backend API server

SQLAlchemy

ORM & database

SQLite

Local dev database

JWT Auth

Token-based sessions

Claude API

AI chatbot (Anthropic)

Jekyll

Static site generator

Vanilla JS

No framework needed

CSS Grid

Responsive layouts

Backend API Endpoints:

Method	Endpoint	Purpose
`POST`	`/api/sheriff/authenticate`	Login → returns JWT cookie
`DELETE`	`/api/sheriff/authenticate`	Logout → expires cookie
`GET`	`/api/sheriff/id`	Get current user from token
`POST`	`/api/sheriff/user`	Create new sheriff (signup)
`GET`	`/api/sheriff/user`	List all sheriffs (admin only)
`PUT`	`/api/sheriff/user`	Update sheriff profile
`DELETE`	`/api/sheriff/user`	Delete sheriff (admin only)
`POST`	`/api/sheriff/chat`	AI chatbot → Claude API

Key Files:

File	Purpose
`cap_back/model/sheriff.py`	Sheriff SQLAlchemy model with `sheriff_users` table
`cap_back/api/sheriff.py`	Auth + CRUD endpoints with SRP helpers
`cap_back/api/sheriff_chat.py`	Claude API integration with SRP functions
`cap_front/navigation/sheriff/index.md`	Full single-page portal UI

Code Quality: SRP Refactoring

We applied the Single Responsibility Principle across all three codebases. See our detailed SRP Refactoring Blog for code comparisons.

Frontend: 14 monolithic JS functions → 30+ focused helpers (e.g., apiRequest(), showLoggedInUI(), sanitizeHTML())
Backend API: JWT decode duplicated 4x → 1 shared decode_sheriff_token(); cookie logic 2x → 1 set_sheriff_cookie()
Chatbot API: 1 monolithic handler → 5 single-purpose functions (validate_chat_request, build_message_history, call_claude_api, parse_claude_response)

Work Split

Akhil

Backend API architecture
Sheriff model & database schema
JWT authentication system
Claude API chatbot integration
SRP refactoring (backend)
API endpoint design

Neil

UI/UX design & layout
Single-page architecture
Search bar with autocomplete
Login/signup modal design
Real DSA image integration
SRP refactoring (frontend JS)

Moiz

Events calendar & RSVP
FAQ search & category filters
Newsletter preview cards
Admin panel & member table
Mobile responsive design
Blog writeups & documentation

All Sections Built

Section	Features	Click Reduction
Hero	DSA logo, stats (4,229 members / 70+ years / 12 stations / 24/7), CTA buttons	Landing → immediate context
Resources Dashboard	8 tiles with inline expandable detail panels	3-4 clicks → 1 click
News	3 cards with images, category tags, dates	Static page → scrollable feed
Events Calendar	Interactive month-view calendar, day detail panel, event cards with images, RSVP buttons, auto-navigation to next event	Calendar page → click-a-date inline
About	4 cards: Mission, Stations, Leadership, History with images	About page → scrollable section
Store	8 product cards + real store photos + relaunch flyer	Store page → inline grid
FAQ	9 Q&As, search filter, category tags, AI chatbot	5 static Q&As → searchable + AI
Contact	Staff photos, address/phone/email cards	Contact page → inline section
Newsletter	Silver Star preview cards with expandable issue contents	PDF download → inline preview
Admin Panel	Member table (admin only), toggled from user dropdown	N/A (new feature)

What's Next

Feature	Status	Planned Tech
Push notifications for new newsletters	Planned	Service Workers, Web Push API
Personalized dashboard per member	Planned	JWT claims + conditional rendering
Document center with file downloads	Planned	Flask file serving, S3 storage
Integration with dsasd.org WordPress API	Planned	WordPress REST API, data sync
Accessibility audit (WCAG 2.1 AA)	Planned	Keyboard nav, ARIA labels, contrast

Planned ML Integration

We plan to add machine learning features to make the portal smarter and more personalized for DSA members.

🧠

Smart Content Recommendations

Track which resource tiles, FAQ topics, and newsletter issues each member interacts with, then use collaborative filtering to surface the most relevant content on their dashboard

📈

FAQ Auto-Categorization

Use NLP text classification (scikit-learn / TF-IDF) to automatically tag and route new member questions to the correct FAQ category or staff contact

👥

Member Engagement Scoring

Build a logistic regression model that predicts which members are at risk of disengaging based on login frequency, RSVP history, and resource usage patterns

💬

Chatbot Intent Detection

Train a lightweight intent classifier to detect question categories before sending to Claude API — enabling faster responses for common queries and reducing API costs

ML Implementation Plan:

ML Feature	Model / Approach	Data Source	Stack
Content recommendations	Collaborative filtering (item-based)	User click/interaction logs	Python, scikit-learn, Flask API
FAQ auto-categorization	TF-IDF + Naive Bayes classifier	Existing FAQ Q&As + chatbot history	scikit-learn, NLTK
Engagement scoring	Logistic regression	Login timestamps, RSVP data, page views	pandas, scikit-learn
Chatbot intent detection	Text classifier (SVM / logistic)	Labeled chatbot conversation logs	scikit-learn, Flask middleware

How it connects to the existing portal:

Data collection — Log user interactions (tile clicks, searches, RSVPs, chat questions) to a new analytics table in the SQLite database
Model training — Run offline training scripts in Python using scikit-learn on the collected interaction data
Serving predictions — Add new Flask API endpoints (e.g., /api/sheriff/recommendations, /api/sheriff/engagement) that return ML predictions
Frontend integration — Dashboard tiles reorder based on recommendation scores; at-risk members get flagged in the admin panel