This project exemplarily shows the principle of the JAMstack with the beauty of trees 🌲 🌳 🌴
See Live Version: https://jamstack-trees.netlify.com/
Definition of JAMstack:
"Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup." Source: https://jamstack.org/
It is a small site combining content handling (statically rendered and served) and an ecommerce connection (dynamically during runtime).
So you can manage and update static content (here awesome tree images) with Contentful, see the result here: https://jamstack-trees.netlify.com/explore.
You can also (fake) plant a tree by doing a payment via Stripe, see the dynamic ecommerce section here: https://jamstack-trees.netlify.com/plant.
Used tools and services: Github, Gatsby, React, Contentful, GraphQL, Stripe, Netlify ...
- Clone this repository:
git clone git@github.com:kristinbaumann/jamstack-trees.git
- Go into the directory and install node modules:
yarn install
- To start developing locally, run
gatsby develop
. Your site is onhttp://localhost:8000
The project is built on top of Gatsby's default starter. You can find more documentation here: https://github.com/gatsbyjs/gatsby-starter-default