The official landing site for Bits of Good 🚀
The bits of good landing page is built on some modern tooling to keep everything nice and future-proof. Let's dive into what we're using.
Everything you see is built on SvelteJS, a component-based framework that magically disappears ✨ There are countless reasons we chose this framework, as it brings a host of benefits for decreasing bundle size and load times. However, we mainly chose it because of how easy the syntax is to understand! You can read more here to learn why it's so awesome, or just dive into the docs to start experimenting yourself.
Along with Svelte, we are using Sapper to make wiring everything up a bit easier. Mainly, Sapper provides:
- Automatic client-side routing out of the box. Basically, any component in the
src/routes
directory becomes its own page you can link to using a regular old<a>
tag! - Preloading of information before loading the page. This makes it easy to fetch our website's text content and other resources before the initial page load.
- Spinning up a server to serve all our pages, complete with server-side rendering!
For basically every text field you see on the site, we're fetching it using Contentful. This is a headless CMS that allows us to host all of our images, text, markdown, etc. in one place.
This is a huge benefit for our designers, who can now just edit a textbox or upload an image to see it appear on the site!
yarn install
If you're working in development, run the following to build + run the site with live reloading goodness:
yarn dev
For production builds, run the following to build and start the site:
yarn build && yarn start
In either case, you should be able to visit localhost:3000
to see the website in action!
This site uses Cypress for thorough end-to-end testing. To start up the testing environment, you can run:
yarn test
This will start the server and open Cypress. You can (and should!) add tests in cypress/integration/spec.js
— consult the Cypress docs for more information.
👤 Ben "Over-engineered" Holmes
- Twitter: @bholmesdev
- Github: @Holben888
👤 Rishov Sarkar
- Twitter: @arkanemoose
- Github: @ArkaneMoose
Give a ⭐️ if this project helped you!