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
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.
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.
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.
- 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
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.
- Create the Next.js Base
- Add Styled Components
- Add Ant Design
- Add Main Layout
- Add Global Style
- Add MainHead Component
- Add Layout
- Add MainFooter
- Add MainNavbar
- Add GraphCMS
- Add Apollo
- Add GraphQL Request Files
- Add GraphQLCodeGen
- Add RecipesList
- Add Alerts
- Add RecipeListItem
- Add Recipe Page
- Add OneRecipe
- Add Auth0
- Add Auth0 Api
- Add useFetchUser Hook
- Add Login / Logout
- Add My Recipes Page
- Add Like Button
- Add Favorites Page
- Add Create Page
- Add Create Recipe Form
- Add Form Input
- Add Form TextArea
- Add Form Dropdown
- Add Form Ingredient
- Add Delete Ingredient Button
- Uncontrolled vs. Controlled Components
- Add Form Submit Mutation
- Add Picture Uploader
- Add Update Recipe Page
- Add Update Recipe Form
- Add Update Recipe Mutation
- Update Recipe Image
- Add Delete Recipe Button
- Add Protected GraphQL Proxy
- Lock down GraphCMS Endpoint
- Add Check for Banned Mutations
- Add User Verify Check
- Add User Verify Permissions Check
- Add Invalid User Redirect
- 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!