Welcome to BoG Web 👋

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.

Sapper

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.

Contributors

👤 Ben "Over-engineered" Holmes

• Twitter: @bholmesdev
• Github: @Holben888

👤 Rishov Sarkar

• Twitter: @arkanemoose
• Github: @ArkaneMoose

👤 Max Karpawich

• Website: karpawich.me
• Github: @karpawich

Show your support

Give a ⭐️ if this project helped you!