wasp/web/blog/2023-06-30-tutorial-jam.md
vincanger b6bb8b70cc
[BLOG] -- twitter agent fixes and tutorial jam (#1302)
* fix twitter tutorial

* add tutorial jam post
2023-06-30 17:22:12 +02:00

6.3 KiB
Raw Blame History

title authors image tags
Tutorial Jam #1 - Teach Others & Win Prizes!
vinny
/img/tutorial-jam/tutorial-jam-banner.png
launch-week
product-update

import Link from '@docusaurus/Link'; import useBaseUrl from '@docusaurus/useBaseUrl';

import InBlogCta from './components/InBlogCta'; import WaspIntro from './_wasp-intro.md'; import ImgWithCaption from './components/ImgWithCaption'

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, Whats Wasp?

First of all, its sad that youve 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 its 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 Wasps 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 youd 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:

  • Wasps New AI-Generated App Feature: build any fullstack app using Wasps new AI-generated App feature and explain the process.
    • What worked? What didnt? 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 Wasps low-on-boilerplate fullstack typesaftey, you could dive deep into types on both frontend and backend.
    • How does Wasps 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. Its 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 Wasps 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 Wasps 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 Wasps 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.

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!