Code MochiCourse archive

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