Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Welcome to BoG Web πŸ‘‹

Twitter: bholmesdev

The official landing site for Bits of Good πŸš€

Tech stack breakdown

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.

Our frontend framework: SvelteJS

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!

Our site content: Contentful

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!

Install Dependencies

yarn install

Set up Contentful content model

For external contributors or contributors that don't have access to Bits of Good's Contentful API key, you can run the seed-contentful script to seed a data export into your own Contentful account

Script Usage: yarn seed-contentful

This command will ask you for a space ID, and access tokens for the Contentful Management and Delivery API. It will import the data export into your Contentful space and create a local .env with environment variables to retrieve data from Contentful.

Start up the site

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!

Run the tests

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

πŸ‘€ Rishov Sarkar

πŸ‘€ Max Karpawich

Show your support

Give a ⭐️ if this project helped you!


Our website, built from the ground up with Svelte + Sapper to connect nonprofits, students, and everyone else in between with Bits of Good πŸš€




Code of conduct





No releases published