wasp/web/blog/2023-06-30-tutorial-jam.md

114 lines
6.3 KiB
Markdown
Raw Normal View History

---
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!