Code MochiCourse archive

Course archive ยท 2020

Frontend Serverless with React and GraphQL

Build a production-style recipe application with React, Next.js, GraphQL, and GraphCMS.

Browse lessonsView source repo
Lessons
46
Video
9+ hours
Access
Public archive

Before you begin

These lessons reflect their original versions.

The written lessons and source repositories remain available, but the APIs, dependency versions, and hosting instructions may no longer work as shown.

New enrollment is closed. All recorded lessons in this course are available here without sign-in.

Syllabus

46 project steps

All lesson videos are available as part of this public archive.

  1. 00Getting StartedArchived videoPlay
  2. 01Create the Next.js baseArchived videoPlay
  3. 02Add Styled ComponentsArchived videoPlay
  4. 03Add Ant DesignArchived videoPlay
  5. 04Add main layoutArchived videoPlay
  6. 05Add global styleArchived videoPlay
  7. 06Add MainHead componentArchived videoPlay
  8. 07Add LayoutArchived videoPlay
  9. 08Add MainFooterArchived videoPlay
  10. 09Add MainNavbarArchived videoPlay
  11. 10Add GraphCMS backendArchived videoPlay
  12. 11Add WithApolloArchived videoPlay
  13. 12Add GraphQL request filesArchived videoPlay
  14. 13Add GraphQLCodeGen type generationArchived videoPlay
  15. 14Add the RecipeList ComponentArchived videoPlay
  16. 15Add loading, error, warning alertsArchived videoPlay
  17. 16Add RecipeListItem componentArchived videoPlay
  18. 17Add Recipe pageArchived videoPlay
  19. 18Add OneRecipe componentArchived videoPlay
  20. 19Deploy using VercelArchived videoPlay
  21. 20Add Auth0 libraryArchived videoPlay
  22. 21Add Auth0 Api FunctionsArchived videoPlay
  23. 22Add useFetchUser HookArchived videoPlay
  24. 23Add Login / Logout to the NavbarArchived videoPlay
  25. 24Add a MyRecipes PageArchived videoPlay
  26. 25Add a Like ButtonArchived videoPlay
  27. 26Add a Favorites PageArchived videoPlay
  28. 27Add a Create Recipe PageArchived videoPlay
  29. 28Add a Create Recipe FormArchived videoPlay
  30. 29Add a Form InputArchived videoPlay
  31. 30Add a Form TextInputArchived videoPlay
  32. 31Add Form IngredientArchived videoPlay
  33. 32Add Dropdown InputArchived videoPlay
  34. 33Controlled vs. Uncontrolled ComponentsArchived videoPlay
  35. 34Add a Delete Ingredient ButtonArchived videoPlay
  36. 35Add a Form Submit MutationArchived videoPlay
  37. 36Add Update Recipe PageArchived videoPlay
  38. 37Add Update Recipe FormArchived videoPlay
  39. 38Add Update Recipe MutationArchived videoPlay
  40. 39Add Delete Recipe ButtonArchived videoPlay
  41. 40Add GraphQL ProxyArchived videoPlay
  42. 41Lock down the GraphCMS ApiArchived videoPlay
  43. 42Add Banned Mutation CheckArchived videoPlay
  44. 43Add Verify User CheckArchived videoPlay
  45. 44Add Verify User Permissions CheckArchived videoPlay
  46. 45Add Picture UploaderArchived videoPlay