Build a Full-Stack Food Ordering Application
Tags: nextjs, typescript, graphql, react
Published: 2022-10-21 12:06:41

In this 20 bite-sized video series, you will learn how to build a full-stack application that allows your friends to order pizzas. 🍕

You will use the following technologies to build it:
* Hasura Cloud
* Next.js
* Vercel
* TailwindCSS and DaisyUI
* GraphQL Code Generator
* URQL
* GitHub CI/CD

By the end of the series, you will have a production application with CI/CD and user login.

The series consists of 20 videos:
1. [Intro to creating a full-stack food ordering app with Hasura and NextJs](https://www.youtube.com/watch?v=ndf34ZQ3gsg&list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG&index=1)
2. [Create a local Hasura project w/ tracking metadata & deploy to Hasura Cloud with GitHub Integration
](https://www.youtube.com/watch?v=WwvzAeTESaE&list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG&index=2)
3. [Add frontend framework NextJS and deploy to Vercel with Github and the Hasura-Vercel integration](https://www.youtube.com/watch?v=svcj-B3lVHA&list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG&index=3)
4. [Fetching data from Hasura into Nextjs, local and cloud](https://www.youtube.com/watch?v=Rx6Mt2ZTQ2s&list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG&index=4)
5. [Using GraphQL client URQL to fetch data from Hasura](https://www.youtube.com/watch?v=bqR3af-XJXQ&list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG&index=5)
6. [Using GraphQL Code-Generator to generate types from our Hasura API](https://www.youtube.com/watch?v=haFFBXM45S8&list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG&index=6)
7. [Adding TailwindCSS to our Hasura-NextJS app
](https://www.youtube.com/watch?v=2czdmH4rWP0&list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG&index=7)
8. [Adding “do-not-edit” labels to Hasura Cloud](https://www.youtube.com/watch?v=CmYU-1eq9x4&list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG&index=8)
9. [Using Hasura for server state and Zustand for local state in NextJS](https://www.youtube.com/watch?v=81LkSiJVJcQ&list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG&index=9)
10. [Creating authentication action handlers for Hasura with NextJS](https://www.youtube.com/watch?v=ObxRjcwLaa8&list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG&index=10)
11. [Adding NextJS action handlers to the Hasura API](https://www.youtube.com/watch?v=VYwe29-ynVM&list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG&index=11)
12. [Managing permissions in Hasura for good data disclosure policy](https://www.youtube.com/watch?v=wV8WD56qMXQ&list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG&index=12)
13. [Calling our Hasura action from the front-end](https://www.youtube.com/watch?v=rxu6BXkHGKc&list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG&index=13)
14. [Deploying to Hasura Cloud with the Hasura CLI and an introduction to Hasura metadata squash](https://www.youtube.com/watch?v=oyfFO2hwEvY&list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG&index=14)
15. [Creating Pizzas and working with generated URQL React hooks from the Hasura API](https://www.youtube.com/watch?v=g8N8M_gSTmw&list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG&index=15)
16. [Adding enums to Hasura](https://www.youtube.com/watch?v=wV-MQBLcu6s&list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG&index=16)
17. [Working with GraphQL Fragments in Hasura](https://www.youtube.com/watch?v=8gQrKsBPQlg&list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG&index=17)
18. [Adding realtime GraphQL subscriptions from the Hasura API](https://www.youtube.com/watch?v=Po_Fb4N8ifU&list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG&index=18)
19. [Advanced permissions with role based tables](https://www.youtube.com/watch?v=aqiOAkkp0m8&list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG&index=19)
20. [Closing up the backyard pizza project beginner’s guide](https://www.youtube.com/watch?v=tpzNqzHW1c8&list=PLTRTpHrUcSB8elpwJKDIQNfNlqpPTNHGG&index=20)

{% youtube ndf34ZQ3gsg %}