Welcome to the Statista Remix Workshop

In this workshop, we’ll explore Statista 4.0 and learn how its Remix stack simplifies building web applications. You’ll get hands-on experience working with Remix and Statista’s tools and components.

What You'll Learn

By the end of this workshop, you’ll:

Understand how to use the Statista Remix Stack in practice.
Learn to build and test components and pages with Atlas, Tailwind CSS, TypeScript, SSO, and Global Components.
Work with data loading, forms, and APIs.
Collaborate with others and solve practical tasks.

Our Goal

We want to give you the skills to confidently work with Remix and the Statista 4.0 ecosystem. Whether you’re new to this or have experience, this workshop will help you get started.

Let’s begin! 🎉

How It Works

Team Up

Form a group of 2–3 people to collaborate throughout the workshop.

Collaborate, Don’t Isolate

Embrace the spirit of teamwork—you're not alone! Share ideas, discuss challenges, and support each other.

If you like, designate one person as the "driver" who takes charge of the keyboard and leads the implementation. Rotate the driver role every 10–15 minutes to ensure everyone gets hands-on experience.

Reflect After Each Section

At the end of each section, take a moment to reflect on what you accomplished. Summarize key takeaways and discuss what you’ve learned.

Reach Out for Help

If you need clarification, more input, or have questions, don’t hesitate to ask a trainer. We're here to help!

Prerequisites

A terminal
A code editor (we recommend VSCode)
We recommend to install the following extensions for a greater developer experience:
- TailwindCSS
- ESLint
- Prettier
Node.js version 18/20
pnpm

How to install Node.js

First, check if Node.js is already installed by running node -v. Ensure the version is 18 or higher.

If Node.js isn’t installed, you can install it using tools like Homebrew. We also recommend using a Node.js version manager like n to switch between versions as needed.

For this workshop, make sure Node.js version 18 or 20 is installed.

How to install pnpm

We recommend using Corepack (included with Node.js) to install pnpm.

Enable corepack by running corepack enable
Install pnpm by runinng pnpm install
Run pnpm install again to ensure all packages are successfully installed.

Statista Stack Overview and Links to General Documentation

The Statista Remix Stack includes several tools and libraries to help you build efficient and scalable web applications. Here’s a quick overview of the key components:

Remix

A framework for building modern, fast web apps.

remix.run

Typescript

www.typescriptlang.org

TailwindCSS

A utility-first CSS framework for creating custom designs without leaving your HTML. We also have a custom Tailwind theme that you'll explore in the Atlas section.

tailwindcss.com