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

114 lines
6.3 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: 'Tutorial Jam #1 - Teach Others & Win Prizes!'
authors: [vinny]
image: /img/tutorial-jam/tutorial-jam-banner.png
tags: [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'
<ImgWithCaption
source="img/tutorial-jam/tutorial-jam-banner.png"
/>
## 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://wasp-lang.dev).
![https://media0.giphy.com/media/kr5PszPQawIRq/giphy.gif?cid=7941fdc6gwgjf866b0akslgciedh53jf9narttadkglvvcp0&ep=v1_gifs_search&rid=giphy.gif&ct=g](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](https://wasp-lang.dev)
## 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](http://dev.to) or [hashnode.dev](http://hashnode.dev), or a YouTube video tutorial
- Contain the hashtag `#buildwithwasp`
- Submitted by pasting the link in the #tutorialjam channel on our [Discord Server](https://discord.gg/rzdnErX)
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](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](https://wasp-lang.dev/docs/quick-start) and running `wasp new` in the command line. The interactive prompt will ask you what template youd like to start with:
```bash
[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](https://www.caseking.de/ducky-one-3-yellow-mini-gaming-tastatur-rgb-led-mx-red-us-gata-1745.html?sPartner=999&gclid=Cj0KCQjw1_SkBhDwARIsANbGpFtYpC2-jFuJ94A6VF6oDFLEZQUya3Ky7P9Ih-nU_Zb9NsDjNhmITbIaAtBMEALw_wcB), and your tutorial and info featured on all our blogs (Wasp official website, dev.to, and hashnode)
- Second Place: 3 months access to [PluralSight](https://www.pluralsight.com/) 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.
<ImgWithCaption
source="img/tutorial-jam/keyboard.png"
/>
## 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](https://discord.gg/rzdnErX) and ask away :)
Good luck!