Tutorial Introduction

In this tutorial you will learn the basics of how to build a web application using the STRUDEL Task Flow templates. By the end you will have your own customized version of the Explore Data Task Flow running in a web browser on your computer.

Who is this tutorial for?

This tutorial is for anyone who wants to build a web user interface for their scientific software by starting with a STRUDEL Task Flow. It will deal with tools such as the command line, JavaScript, TypeScript, React, HTML, and CSS. Some experience with these tools will be important to follow along with the tutorial.

Have feedback?

If you encounter any issues along the way or have feedback about how we can improve this tutorial, we would love to hear from you. Check out the tutorial's feedback thread on our GitHub Discussions page.

Jump In

1. Set Up Your Development Environment

   Install all the prerequisite and core software that powers the STRUDEL Kit.

2. Create a Base App with STRUDEL

   Get familiar with the STRUDEL CLI and generate the base scaffolding for a React app that uses the STRUDEL Design System.

3. Add a Task Flow to Your App

   Learn how to add Task Flows into your app and build your own custom configurations.

4. Customize Your Task Flow

   Familiarize yourself with the Task Flow code and learn how to make changes that are important to your use case.

5. Customize Your App

   Make the app your own by changing the theme, adding styles, and adding custom sections.

6. Customize the Home Page

   Build out a home page for your application.

7. Continue Learning

   Discover resources to help you continue developing applications with STRUDEL.