captainchemist / next-chop

Learn to build a Serverless Recipe Sharing React app with Next.js and GraphQL.

Next Chop

Update 06/21/2020

This repo has been deprecated in favor of Version 2.0 of this repo which has support for GraphCMS 2.0 and the migration of Zeit to Vercel. Please access the current version of this repo here:

https://github.com/CaptainChemist/next-chop-v2

Frontend Serverless with React and GraphQL

In this repo we build a serverless recipe sharing application in React using Next.js. This is the code that we build in the Frontend Serverless with React and GraphQL course at Codemochi.

Overview

Check out the staging branch to see a step by step guide for building this application from the ground up. Each step is a commit which makes it easy to tell exactly what changed from step to step. The master branch has two commits- the initial commit which only has a README.md file, and a merge from the staging branch after we have built the whole application.

If you just want the finished product, you can clone this repo and the master branch will have the finished version if you pull the latest.

How to use this Project

If you just want to run the app, check out the latest on the master branch and then create a .env file in the root of your file. It should have the following variables:

.env

GRAPHCMSID=your-graphcms-id
GRAPHCMSURL=https://api-yourregion.graphcms.com/v1
APIURL=https://www.filestackapi.com/api/store/S3
APIKEY=your-graphcms-api-key
PROJECTID=your-graphcms-projectid
BRANCH=master
CDNBASE=https://cdn.filestackcontent.com/
domain=your-domain.auth0.com
clientId=your-auth0-clientid
clientSecret=your-auth0-clientSecret
scope='openid profile'
redirectUri=https://localhost:3000/api/callback
postLogoutRedirectUri=https://localhost:3000/
cookieSecret='one-two-three-secret-four-secret-dont-share-it-ever'
BACKEND_URL=https://localhost:3000/api/graphql
GRAPHCMSTOKEN=your.graphcms.token

You can get these variables by creating an account with GraphCMS and Auth0 and we cover where to get those from and how they get loaded into this project by Next.js in steps 10 and 19, respectively.

You can start the app locally by running npm start.

To serverlessly deploy make sure that you have now and dotenv-cli installed globally and run npm run secrets:add followed by now in your command line. Be sure to update any of your urls from localhost:3000 to the address of your actual website.

Benefits

• Auth0 for User Authentication and Authorization
• Expressive data fetching with Apollo Hooks
• SEO Optimized with Next.js
• Beautiful GraphCMS backend
• Automatic code pipeline and deployment with Zeit Now

Detailed list of steps that we go through

This application is complex, but in the Frontend Serverless with React and GraphQL course we go through how to build this up over 10 hours of video so that you know where all of this code is coming from.

1. Create the Next.js Base
2. Add Styled Components
3. Add Ant Design
4. Add Main Layout
5. Add Global Style
6. Add MainHead Component
7. Add Layout
8. Add MainFooter
9. Add MainNavbar
10. Add GraphCMS
11. Add Apollo
12. Add GraphQL Request Files
13. Add GraphQLCodeGen
14. Add RecipesList
15. Add Alerts
16. Add RecipeListItem
17. Add Recipe Page
18. Add OneRecipe
19. Add Auth0
20. Add Auth0 Api
21. Add useFetchUser Hook
22. Add Login / Logout
23. Add My Recipes Page
24. Add Like Button
25. Add Favorites Page
26. Add Create Page
27. Add Create Recipe Form
28. Add Form Input
29. Add Form TextArea
30. Add Form Dropdown
31. Add Form Ingredient
32. Add Delete Ingredient Button
33. Uncontrolled vs. Controlled Components
34. Add Form Submit Mutation
35. Add Picture Uploader
36. Add Update Recipe Page
37. Add Update Recipe Form
38. Add Update Recipe Mutation
39. Update Recipe Image
40. Add Delete Recipe Button
41. Add Protected GraphQL Proxy
42. Lock down GraphCMS Endpoint
43. Add Check for Banned Mutations
44. Add User Verify Check
45. Add User Verify Permissions Check
46. Add Invalid User Redirect
47. Deploy Using Zeit Now

Questions? Problems? Hit me up at @codemochi on twitter or open up an issue on this Github repo and I'll get to it ASAP!

next-chop's Issues

Page routing does not work as intended

<Link href={`/${parentRoute}/${id}`}>
          <div>{images ? <GraphImg image={images} /> : null}</div>
 </Link>

Shouldnt it be <a> tag instead of <div> tag inside a <Link> tag to give that SPA feel .
for example :

import Link from 'next/link';

export default function Index() {
  return (
    <div>
      <Link href="/about">
        <a>About Page</a>
      </Link>
      <p>Hello Next.js</p>
    </div>
  );
}