mirror of
https://github.com/wasp-lang/wasp.git
synced 2024-12-01 19:26:28 +03:00
114 lines
6.3 KiB
Markdown
114 lines
6.3 KiB
Markdown
|
---
|
|||
|
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, What’s Wasp?
|
|||
|
|
|||
|
First of all, it’s sad that you’ve 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 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](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 Wasp’s 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 you’d 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:
|
|||
|
|
|||
|
- **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](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!
|