gitmyhub

fireship.io

Svelte ★ 3.8k updated 11mo ago

Build and ship your app faster https://fireship.io

The full source code for the Fireship.io web development course website, combining Hugo for static content, Svelte web components for interactive elements, Tailwind for styling, and Firebase for authentication.

SvelteHugoTailwind CSSFirebaseJavaScriptnpmsetup: moderatecomplexity 3/5

This is the source code for the Fireship.io website, a course platform that teaches web development and app-building topics. The public-facing site you visit at fireship.io is built from this codebase.

The project combines several tools to produce the finished site. Hugo handles the static content, meaning blog posts, course pages, and other written material are stored as Markdown files in a content folder and converted to HTML at build time. The interactive parts of the page, such as buttons or custom widgets, are built with Svelte and compiled into web components, which are small self-contained pieces of UI that can be dropped anywhere in regular HTML or Markdown. Tailwind handles styling, and Firebase provides backend services like authentication.

If you want to fix a typo or small text error, the README says you can edit the Markdown files directly on GitHub without running anything locally. For more involved changes, you install Hugo and Node, run npm start, and the site comes up at localhost:6969 where you can preview your work.

Developers adding new interactive components create a Svelte file in the app/components directory, give it a custom HTML tag name, export it from the main entry file, and then use that tag anywhere in HTML or Markdown. One thing to know about this setup: because Svelte compiles components as web components here, styles must be written inside each component file rather than in global stylesheets.

The README is brief and focused on contributor workflow. It does not describe the course content itself or the platform's business features in detail.

Where it fits