The ETFA
Full-stack association website built with Next.js 16, React 19, Tailwind CSS 4, and MongoDB (Mongoose). Public visitors get a bilingual experience (English and Uyghur via next-intl): home hero, news, press releases, announcements, member leagues, Freedom Cup coverage, image gallery, about copy, contact, and a donate flow with PayPal (EUR presets and server-side order capture). JWT auth (httpOnly cookie) with bcrypt covers admin login, logout, password reset, and email verification flows; Nodemailer sends transactional mail (for example contact-form handling and admin security messages). Firebase is used for media workflows (for example gallery image handling in admin). The admin panel uses Quill for rich content, Recharts for analytics (content engagement / click summaries), and sections for news, press, announcements, Freedom Cup archive, gallery, inbound emails, user management (roles such as system owner / superadmin / admin), and profile updates. A Shop area exists only as a minimal placeholder and is not wired into the live home page. Real-world usage (who does what, and why it matters) Public supporters and diaspora community They land on localized pages to read official news, press, and announcements, see members and competition highlights like the Freedom Cup, browse the gallery, and use contact or donate to reach the organization or fund its work—similar to how a national or diaspora sports body publishes updates and accepts support online. Content and communications staff (admins) They sign into the admin area to create and edit structured content (rich text where needed), maintain the gallery (with image tooling tied to Firebase), curate Freedom Cup archive material, and monitor inbound messages saved from the site—like running a lightweight CMS instead of a separate WordPress install. Leadership / operations They rely on analytics charts for a quick sense of which content gets attention, use email flows for account and security steps, and use management to control who can access the panel—mirroring how a real org limits publishing and admin access to trusted roles rather than open self-service signup for the public. Finance / fundraising (via PayPal) Supporters choose amounts on the donate page and complete payment through PayPal; the app verifies capture via a dedicated API route, which is the pattern you would extend to persist donations or send receipts if you connect it to your back office.
