About xBird
This is a community, build-in-public experiment where we take an existing React “sBird” app from Sarah’s Astro website and try to reproduce the functionality in Astro using XElement.
sBird, and this site, was built by Sarah and XElement is the creation of Fuzzy and Jonathan Neal.
The repository is on GitHub and we will be live-coding in the Astro Discord where we’ll provide a link to a shared workspace on Gitpod so we can all be in the code remotely, together!
About This Site
sBird - The original sBird app written in React.
XElement - A “kitchen sink” demonstration of just some of the wild and wonderful interactive things you can accomplish in Astro with XElement!
xBird - The current, published state of the work-in-progress
About Astro
Astro is a static site generator that focuses on shipping less JavaScript to the client.
JavaScript is run at build time to produce static HTML pages, so client-side site interactivity is achieved by adding <script>s or JavaScript framework components (React, Vue, Svelte, Solid, Preact) that can be individually “hydrated” on an as-needed basis.
About XElement
XElement is an Astro-native solution to providing interactive web elements!
XElement allows you to create dynamic HTML elements with interactivity (e.g. animations, transitions, event listeners) natively in an Astro page or component… without the need for writing and importing a component in one of the JavaScript frameworks Astro supports.
Project README
Rewriting a React App in XElement in Astro!
Join @sarah11918 and @aFuzzyBear as we slowly but surely recreate sBird as… xBird! Live in the Astro Discord
aFuzzyBear will stream his screen in the Astro Discord live chat channel, and Sarah will open and share a Gitpod Shared Workspace, so everyone who wants to do more than just watch the stream can be live in the code at the same time!
Branches:
If you’d like to play along at home, you can choose:
start - starting point, nothing but a blank page for xBird
demo - current working branch
publish - verion deployed on Netlify at xBird
Video Playlist of our sessions
Resources
Astro
This is a demonstration of building in an Astro website. XElement is exclusively for Astro.
XElement
eBird API
Please note: to develop this project locally, you will need an eBird API Key. In live remote sessions, Sarah’s API key will be available to the project.
Gitpod
You will need a free Gitpod account if you want to join the remote workspace and access the code in your web browser.