Giter Site home page Giter Site logo

Climatescape

Discover the organizations solving climate change

This is the source code behind climatescape.org, an open database of organizations leading the fight against climate change.

Developer Setup

Note: you need to be invited to our Airtable project to run this project locally. The process is really simple and we accept anyone who's interested in helping out. Simply fill out the Climatescape Contributor Application.

  1. Follow these steps to get the project installed on your local dev machine.
    $ git clone https://github.com/climatescape/climatescape.org.git
    $ cd climatescape.org/site
    $ npm install
  2. Copy your Airtable API key from this page: Airtable account
  3. Create a .env.development file at the root of the project replacing YOUR_KEY_HERE by the key you copied in the previous step:
    $ cp .env.sample .env.development
  4. Run the project like so:
    $ npm run develop

Bonus:

Want to preview changes on other devices?

Use the host option

$ npm run develop -- -H 0.0.0.0

Then, at the end of the command Gatsby will show you:
On Your Network: http://192.168.0.XX:8000/ You can now use this IP address / port to access your local environment from your phone. 👌

Bulding

Before submitting your Pull Request you should test that the project builds.

With Gatsby, some code can work on development mode but requires some adaptation for the build. For example when using window that is not accessible in SSR (Server-Side Rendering) mode.

To build the project locally:

  1. Create a .env.production file at the root of the project replacing YOUR_KEY_HERE by the key you copied in the previous step:

    $ cp .env.development .env.production
    # OR
    $ cp .env.sample .env.production
  2. Build the project using the npm run build command.

  3. You can then run the website using the serve public command.

    Note: if you do not have the serve command you can install it using the npm install -g serve command

Architecture

Our site is built with Gatsby, a static site generator that uses React and GraphQL under the hood. Static site generators are used to create static websites (i.e. plain HTML/CSS/JS) from dynamic data at build time. Compare this to a traditional dynamic website that uses a runtime (PHP, Ruby, Python, etc) to generate pages on-demand.

In place of a custom backend, we use Airtable as our content management system and API layer. This allows us to iterate on our data schema and admin workflows extremely quickly, without having to write any code. We use a plugin called gatsby-source-airtable to expose our data to Gatsby's GraphQL layer.

We deploy to Netlify, a simple low-cost static web host. Deploys happen any time code is pushed to GitHub, whether to master or another branch. Additionally, we use Zapier to deploy once per day in order to publish new content even when code changes aren't happening.

Good Here's Projects

forem icon forem

For empowering community 🌱

goodhere icon goodhere

Good Here helps you discover social impact startups, connect with the social impact community, and find social impact funding.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.