/csk-003

Apache License 2.0Apache-2.0

Cardano Starter Kit #003

Note: This starter kit is a work in progress. Got ideas? A different way to say things? Be in touch!

All CSK #003 videos are currently hosted on YouTube

Where Does Blockchain Fit in the Development Stack?

At Gimbalabs, our mission is to mobilize everyone in the Cardano community by creating tools and real-world use cases that ignite the public imagination and facilitate blockchain adoption. We envision a world where as many people as possible are empowered to solve problems using the Cardano platform.

We believe that Cardano has the potential to redistribute power and access to opportunity in new ways -- and that there is no guarantee that this will happen. These outcomes are ideals that will come to life only through the efforts of people. These outcomes are more likely if more people understand, and can build with, the tools that Goguen and Voltaire, Marlowe and Plutus, Atala and Ergo will provide. A lot of what we build will be integrated with existing technology. For example, we're still going to be using web-based apps -- we'll just be able to do new things with them.

What sorts of things? A blockchain is not magic, it's just a protocol for transmitting trust. This starter kit begins with an overview of how blockchain fits in a development stack (don't worry, we'll spend a few minutes defining "development stack" too). Then, in order to help prepare you to build with Cardano, this starter kit provides a context for web development in 2020, along with suggestions for how to continue learning.

Not everyone has to be a full-time developer, but what if we could ensure that at the very least, everybody knows one? This starter kit is an experiment in mobilizing people to get started building web-based apps. If successful, this starter kit will help to demystify app development a bit, and give you context for what "front end" web development means.

Intended Audience

You should use this Cardano Starter Kit if

  • You're brand new to web development and need a place to start
  • You have ideas for businesses and Dapps to be built on Cardano, and you're trying to get an idea of what that might entail

Learning Targets

  • I understand the role of a blockchain protocol in a development stack.
  • I can describe the role of HTML, CSS, and JavaScript in web development.
  • I can use GitHub Pages to publish a basic web page.
  • I can set up a development environment on my computer.
  • I can create a web app that calls on and displays external data based on user input.

Outcomes

At the end of this Cardano Starter Kit, you will

  • Know enough about development to understand what you need when you have an idea that you want to build.
  • Be on your journey toward learning more about building web apps.

Video Links

Part 1 | Part 2 | Part 3 | Part 4


Part 1: Introduction

Accompanying video

Read More: Internet Protocols

A Layered Dive into Cardano's protocols:


Part 2: Party Like It's 1999

To prepare to build a modern app, let's go back in time to build a basic web page using HTML, CSS and JavaScript.

  1. If you're brand new to GitHub, take a look at CSK #001
  2. Follow along with this video
  3. As shown in the video, you'll copy the template repository CSK #003a to your GitHub account

Part 3: Now We're Cooking

Accompanying video on YouTube

When you're getting started, you might find that preparing to make software is harder than writing the code itself. Let's take a whirlwind tour of how to set up an environment where we can build something.

The tools we'll use are choices, and we could choose others (except perhaps for Node.js). In Parts 3 and 4 of this CSK, I'm choosing tools that are popular and accessible. If you're wondering what else is out there, follow that curiosity! Soon, you'll be replacing your Netflix diet with reading documentation and watching tutorial videos on all the different options.

  1. Learn by doing: today we will use the command line
  2. Real developer skills: searching, copying + pasting, and asking the right questions.
  3. Install Visual Studio Code
  4. In Visual Studio Code, clone the CSK #003a repo from GitHub and view the HTML files
  5. On the command line, check versions of Node, npm and git
  6. Install Node, or read the Visual Studio Code tutorial on Node
  7. Running JavaScript files using Node

Extensions:

How you can help:


Part 4: Building an Interactive App with React, Bootstrap, and Axios

Now that your development environment is ready, let's build an app.


Keep Learning

  • What questions did this starter kit raise for you? What do you want to build next? Join Gimbalabs on Discord to continue the conversation.
  • Learn more about building Dapps with the Reach Tutorial