Dynamic, single-page experience for Dev Club members and admins. Features a programmable particle hero, member onboarding with admin approvals, secure login, project assignments, and event calendar management — all powered by a lightweight Node.js backend with JSON persistence.
- Frontend: Vanilla JavaScript, Tailwind CSS (CDN build), tsParticles for hero animation.
- Backend: Node.js (ESM), native HTTP server, file-based JSON datastore.
- Auth: PBKDF2 password hashing, JWT-style signed tokens (HMAC SHA-256).
-
Install prerequisites
- Node.js 18+ (no additional npm packages are required).
-
Start the server
cd server npm start- Default port:
4000. Override withPORT=5000 npm start. - Seeded test accounts:
- Admin →
admin@devclub.local/AdminPass123! - Member →
member@devclub.local/MemberPass123!
- Admin →
- Default port:
-
Open the app
- Visit
http://localhost:4000in your browser. - Tailwind and particle scripts load from public CDNs.
- Visit
-
Membership Requests
- Prospects submit the sign-up form.
- Admin dashboard lists pending approvals.
- Approving a user logs a simulated email to
server/logs/emails.log.
-
Events Lobby
- Approved members land in a personalized lobby highlighting the next event, RSVP details, and a daily breakdown.
- The dedicated events view renders a timeline; guests see a curated preview while members unlock the live feed and calendar sync.
-
Authentication
- Approved members can sign in via
/api/auth/login. - JWT tokens are stored in
localStorage; requests include bearer auth headers.
- Approved members can sign in via
-
Member Experience
- Personalized dashboard with interactive calendar, day-by-day agenda, and project boards.
- Members can self-assign to projects and share progress updates.
-
Guest Preview
- Landing page showcases club tracks, testimonials, and featured project previews for prospective members.
-
Admin Controls
- Approve or reject members.
- Create or update projects and events.
- All data is persisted to
server/data/*.json.
-
Particle Playground
- Users can tune density, speed, and color of the hero animation in real time.
- Passwords are hashed with PBKDF2 (100k iterations, SHA-512, random salt).
- Tokens expire after 8 hours; adjust
TOKEN_TTL_MSinserver/server.jsif needed. - Emails are simulated by appending messages to
server/logs/emails.log. Integrate a mail service by replacing thelogEmailhelper. - JSON files act as the datastore. For production, migrate to a database or Firestore.
- Change the server port if your environment blocks binding to
4000. - Clear state between manual tests by deleting the JSON files in
server/data/(only if you intentionally want to reset data). - Review email notifications by opening
server/logs/emails.log. - Browser devtools > Network tab is useful for observing API requests/responses.
- Swap in a persistent database (Firebase Firestore, PostgreSQL, etc.).
- Replace simulated email logging with an SMTP or transactional email service.
- Add role-based granular permissions and richer analytics in the dashboard.
- Bundle the frontend with a framework (React/Vite) if you prefer component-driven development.