Alongside the Nuvio port, I built myfl.uk, a directory of PS5 homebrew resources. It brings project links, categories and release information into one place, with a beginner’s guide and FAQs.
The directory uses React and TypeScript, built with Vite and styled with Tailwind CSS. I wanted the initial page to contain useful content immediately, while keeping search and filters interactive.
Rendering the page before JavaScript runs
The build renders the React tree into HTML. Visitors receive the directory content in the first response, and React hydrates it for filtering and other interaction.
Using the same components for the build-time render and browser avoids maintaining a separate static version of the page. The production build also generates the sitemap and metadata.
This makes the directory readable before the client bundle runs and gives crawlers the page content directly. Each page has a canonical URL, and the sitemap contains the intended public pages.
Refreshing GitHub information
Project metadata is stored as a snapshot. A refresh script fetches public repository information and release details, then assembles the next snapshot before replacing the existing file.
If an API request fails, the script leaves the previous complete snapshot in place. The site can still build from that data. Once the requests succeed, it writes a temporary file and renames it into place, avoiding a partially written snapshot.
The snapshot records when it was fetched. Release timestamps and repository activity dates describe different events, so they remain separate fields. The page does not need to make a GitHub request every time someone opens the directory.
Checking the generated site
The project includes checks for resource and source coverage, local links, sitemap entries and structured-data consistency. It also checks the generated JavaScript against an asset-size budget.
The structured data needs to agree with the visible directory. A project added to the page but missing from its machine-readable description creates two different accounts of what the directory contains. Checking both during the build catches that mismatch before deployment.
The site runs on Cloudflare Pages. HTML and versioned assets use different cache policies, allowing updated pages to appear while reusable assets remain cached.
Keeping it useful
A directory needs working links and understandable categories. The metadata refresh helps with repository activity and releases; choosing which projects belong and explaining their requirements still needs editorial attention.
Browse the directory or read about the Nuvio PS5 port.