Wasp Tutorial Jam #1

Vince CangerVince Canger
4 min read

Introduction

The Wasp Tutorial Jam is a contest where participants are required to create a tutorial about building a fullstack React/Node app with Wasp.

Wait, What’s Wasp?

First of all, it’s sad that you’ve never heard of Wasp.

https://media0.giphy.com/media/kr5PszPQawIRq/giphy.gif?cid=7941fdc6gwgjf866b0akslgciedh53jf9narttadkglvvcp0&ep=v1_gifs_search&rid=giphy.gif&ct=g

Wasp is a unique fullstack framework for building React/NodeJS/Prisma/Tanstack Query apps.

Because it’s based on a compiler, you write a simple config file, and Wasp can take care of generating the skeleton of your app for you (and regenerating when the config file changes). You can read more about Wasp here

Rules

The rules are simple. The tutorial must:

  • Use Wasp.
  • Be written in English.
  • Be original content and not copied from any existing sources.
  • Be a written tutorial posted to a social blogging platform like dev.to or hashnode.dev, or a YouTube video tutorial
  • Contain the hashtag #buildwithwasp
  • Submitted by pasting the link in the #tutorialjam channel on our Discord Server

    AND

  • The tutorial can focus on any topic and be any length (short or long) just as long as it uses Wasp’s fullstack capabilities.

https://media1.giphy.com/media/iB4PoTVka0Xnul7UaC/giphy.gif?cid=7941fdc67jeepog7whrdmkbux0c6kxzb8eyhqwpjcd1tunvp&ep=v1_gifs_search&rid=giphy.gif&ct=g

Judging Criteria

The judging criteria for the Tutorial Jam will be based on:

  • Clarity and conciseness of the tutorial.
  • Creativity and originality of the tutorial.
  • Effectiveness of the tutorial in helping the reader understand and use Wasp to create a fullstack web app or demonstrate a web development topic.

Templates & Tutorial Examples

We have a whole repo of starter templates that you can use with Wasp by installing wasp and running wasp new in the command line. The interactive prompt will ask you what template you’d like to start with:

[1] basic (default)
    Simple starter template with a single page.
[2] todo-ts
    Simple but well-rounded Wasp app implemented with Typescript & full-stack type safety.
[3] saas
    Everything a SaaS needs! Comes with Google auth, ChatGPT API, Tailwind, & Stripe payments.
[4] embeddings
    Comes with code for generating vector embeddings and performing vector similarity search.
[5] WaspAI
    An AI powered code scaffolder. Tell it what kind of app you want and get a scaffolded fullstack app

In addition, here are some ideas to help you get inspired. You could build a simple fullstack app with Wasp in order to explain some key concepts:

  • Wasp’s New AI-Generated App Feature: build any fullstack app using Wasp’s new AI-generated App feature and explain the process.
    • What worked? What didn’t? What are some prompt engineering tips? What did you have to do to get the app in a desired final state?
  • Full-Stack Type Safety: Using Wasp’s low-on-boilerplate fullstack typesaftey, you could dive deep into types on both frontend and backend.
    • How does Wasp’s fullstack typesafety compare to tRPC and/or the T3 stack?
  • Data Management: With complete control and easy implementation of data models, you could explore the concepts of databases, data management and relational data in a simplified environment.
    • What are some tips and tricks for working with Prisma and relational DBs?
  • Understanding Fullstack Web Development: Wasp being a fullstack tool truly shines a light on how front-end and back-end connect in web development. It’s a great tool for understanding how queries, actions, and other operations in back-end can be utilized in front-end components.
    • How does the HTTP protocol work in detail?

Or you could write a tutorial that explains how to build:

  • A vector-powered AI app: Leverage Wasp’s truly fullstack, serverful architecture to build a personalised tool powered by embeddings and vector stores.
  • Realtime Chat or Polling App: Any realtime app could take advantage of Wasp’s easy-to-use websockets features. The tutorial could explain handling real-time data, and other basic back-end concepts.
  • Online Shop: An e-commerce platform model with features like user registration, product display, a shopping cart, and a check-out process, using Wasp’s easy to configure authorization, and database management.

Prizes

The winners of the Wasp Tutorial Jam will receive the following prizes:

  • First Place: Wasp-colored mechanical keyboard, and your tutorial and info featured on all our blogs (Wasp official website, dev.to, and hashnode)
  • Second Place: 3 months access to PluralSight courses (tons of Software Development courses, tutorials and lessons!) or a $75 Amazon giftcard, and your tutorial featured on all our blogs
  • Third Place: Wasp Swag and a feature of your tutorial and info on our social media channels.

prize keyboard

Submission Deadline

All submissions must be received by Sunday, July 16th 11:59 p.m. CET. Winners will be announced the following week.

Questions?

Head on over to our Discord Server and ask away :)

Good luck!

22
Subscribe to my newsletter

Read articles from Vince Canger directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Vince Canger
Vince Canger