STEM Gharbiya site banner

STEM Gharbiya site

5 devlogs
28h 36m 22s

STEM Gharbiya is a website providing information about the school, including academics, activities, alumni, team applications, and contact forms.

Frontend stack: Astro 5, Tailwind CSS 4, astro-icon + Iconify

Backend stack: Cloudflare Work


STEM Gharbiya is a website providing information about the school, including academics, activities, alumni, team applications, and contact forms.

Frontend stack: Astro 5, Tailwind CSS 4, astro-icon + Iconify

Backend stack: Cloudflare Workers, Hono (TypeScript), Cloudflare D1 (SQLite), Zod, Resend email

Features: multi-page site, reusable components, dynamic routes, PWA support, sitemap generation, Cloudflare Turnstile for forms, form validation, duplicate prevention, bot protection, structured database storage, easy deployment and local development with Wrangler

This project uses AI

Used GitHub Copilot to assist with styling, repetitive tasks, and reviewing portions of my code, as well as helping refine README files, commit and PR summaries, and SEO-related work.

Demo Repository

Loading README...

Saif (A8K)

Shipped this project!

Hours: 28.61
Cookies: đŸȘ 256
Multiplier: 8.94 cookies/hr

I built the STEM Gharbiya website with my mate Amr.
It provides information about the school and for those who want to apply, including a contact form for help and a join dev team form.
It also has PWA support and responsive images.

I learnt about GitHub Actions, Husky (with lint-staged), Turnstile, linting, and formatting in code, and gained more experience with Hono and Astro.

I am really proud of this: https://pagespeed.web.dev/analysis/https-stemgh-org/zy5mg8z1wk?form_factor=mobile

Saif (A8K)

Work on the STEM Gharbiya website continued with a series of updates aimed at improving content, navigation, API integration, and code quality.

The alumni and team data structures were enhanced with social media integration, additional fields, sorting logic, and improved schema validation. Former members are now displayed alongside the current development team on the join page (PR #61).

Navigation received significant updates, including portal rendering, active-state highlighting, keyboard and pointer interactions, and ARIA improvements. The About section hero now includes smooth transitions for a more engaging user experience (PR #75). Links to unfinished pages were removed to prevent broken navigation, and the active mobile nav link was shaded to match desktop behavior (PR #78, PR #79).

Forms and API integration were refined by switching the frontend to use astro:env/client for API_BASE_URL and Turnstile keys, improving security and maintainability (PR #81). The site API worker was renamed to ‘site-api’ for clarity (PR #80).

To enforce code quality and maintain consistency, Husky pre-commit hooks, lint-staged, ESLint, and Prettier were fully configured. CI workflows were added for linting, formatting, and commit message verification, with commitlint rules documented to enforce conventional commits (PR #69, PR #70, PR #71, PR #72, PR #82, PR #83). Missing staff images were corrected as part of these updates (PR #70).

Additionally, site URLs and email addresses were updated to the official domain stemgh.org (PR #68), ensuring full production readiness.

With these changes, STEM Gharbiya has transitioned fully into production at stemgh.org, combining improved content management, interactive navigation, secure forms, and robust code quality enforcement.

Attachment
Attachment
0
Saif (A8K)

This phase focused on refining PWA support, improving asset organization, and optimizing image handling across the site.

Work began with a refactor of the PWA manifest configuration to consolidate icon definitions and improve maintainability (PR #56). Building on that, additional PWA assets were introduced, including new 192×192 and 512×512 icons, optimized logo images, and layout updates to better support manifest integration and consistent branding (PR #57).

Asset organization was further improved by renaming dorm facility images to remove spaces and updating import paths. This ensured more reliable asset handling and cleaner naming conventions across the project (PR #58).

The PWA manifest was then enhanced with updated icon definitions and improved glob patterns for asset caching, strengthening offline support and service worker behavior (PR #59).

Finally, image handling was improved by introducing image layout configuration. This enables Astro to automatically generate responsive images, improving performance and ensuring images render efficiently across different screen sizes (PR #60).

Overall, these updates strengthened progressive web app functionality, improved asset reliability, and enhanced performance and maintainability across the project.

Note: stemgharbiya.surge.sh was used from testing the production behavior of the site but it isn’t the production url.

Attachment
Attachment
Attachment
Attachment
0
Saif (A8K)

This phase focused on stability, documentation, structure, and progressive enhancement.

On February 23, the Team page was improved by adding status support for members, displaying former members, and linking the Join page to the current development team (PR #46). In parallel, frontend–workers integration was strengthened with a typed Hono client, unified form logic, shared error handling utilities, and a more reliable Turnstile reset flow (PR #45).

Documentation was overhauled on February 24. The main README and workers README were aligned with the current architecture, including updated environment variables, setup instructions, validation requirements, and deployment guidance (PR #48). Rate limiting documentation was updated to use Cloudflare’s Rate Limiting binding, and the local development port was corrected (PR #47).

On February 28, bundling was optimized by switching the frontend to direct fetch calls, preventing the workers’ Hono dependency from being bundled client-side (PR #53). A main About page was also introduced as a structured hub with summary content, hero section, and navigation links to related pages (PR #51).

Finally, March 3 focused on polish and progressive web app improvements. Theme handling was enhanced to respect saved and system preferences, with automatic dark mode detection and light/dark favicons (PR #54). A full PWA manifest with app details and shortcuts was added, along with proper asset integration and theme color configuration in the layout (PR #55).

Overall, this iteration improved performance, documentation clarity, structural consistency, theming behavior, and PWA completeness, moving the project closer to production-grade quality.

Attachment
Attachment
0
Saif (A8K)

This update focused on consistency and frontend–backend improvements.

The About section was refactored by consolidating headers, removing per-page hero sections, and restyling Staff cards for better alignment with the design system (PR #44). This reduced duplication and improved visual consistency across pages.

On the infrastructure side, a typed Hono client was added to strengthen frontend–workers integration (PR #45). Form logic was unified across the site, and a Turnstile reset issue was fixed to improve reliability during resubmissions.

These changes improved structure, type safety, and overall user experience.

Attachment
0
Saif (A8K)

Work on the STEM Gharbiya website began on February 5 with the initial commit, establishing the foundation of the project. The Astro structure was set up, Tailwind CSS integrated, and global layout and theming refined for scalability. Dynamic meta tags and centralized site configuration were added early (PR #2), followed by PWA support, sitemap generation, and robots.txt integration (PR #3), ensuring strong SEO and architectural fundamentals.

On February 12, the homepage was enhanced with reusable components, layout refactoring, and Astro Icons integration (PR #16), improving structure and visual consistency.

Mid-February focused on backend infrastructure. The join repository was integrated under the workers directory (PR #25), and a full join system was implemented using Hono with D1 persistence, Turnstile protection, Resend email integration, and a connected frontend page (PR #28). This transitioned the site from static to backend-enabled.

Forms were unified through a reusable FormLayout and shared validation utilities, with clearer API validation errors (PR #30, #32).

On February 18, site structure and content were refined. The admission page was reorganized (PR #33), footer and contact configuration improved (PR #34), and an Alumni page with dynamic year filtering was introduced (PR #35).

February 22 marked a major expansion: a Team page (PR #37), improved footer navigation (PR #38), an Activities page with shared social utilities (PR #41), structured data and IndexNow integration for stronger SEO (PR #42), and ClientRouter with Astro lifecycle migration enabling smooth view transitions (PR #43).

In about two weeks, the project evolved into a scalable, SEO-optimized platform with backend APIs, structured content, improved accessibility, and modern navigation.

Attachment
Attachment
Attachment
Attachment
Attachment
Attachment
Attachment
0