___                       ___           ___           ___           ___       
    /\  \          ___        /\  \         /\  \         /\  \         /\  \      
    /::\  \        /\  \       \:\  \        \:\  \       /::\  \       /::\  \     
  /:/\:\  \       \:\  \       \:\  \        \:\  \     /:/\:\  \     /:/\:\  \    
  /::\~\:\  \      /::\__\      /::\  \       /::\  \   /::\~\:\  \   /::\~\:\  \   
/:/\:\ \:\__\  __/:/\/__/     /:/\:\__\     /:/\:\__\ /:/\:\ \:\__\ /:/\:\ \:\__\  
\/__\:\/:/  / /\/:/  /       /:/  \/__/    /:/  \/__/ \:\~\:\ \/__/ \/_|::\/:/  /  
      \::/  /  \::/__/       /:/  /        /:/  /       \:\ \:\__\      |:|::/  /   
      \/__/    \:\__\       \/__/         \/__/         \:\ \/__/      |:|\/__/    
                \/__/                                    \:\__\        |:|  |      
                                                          \/__/         \|__|      
      ___           ___           ___           ___           ___           ___     
    /\  \         /\  \         /\  \         /\  \         /\  \         /\  \    
    /::\  \       /::\  \        \:\  \        \:\  \       /::\  \       /::\  \   
  /:/\:\  \     /:/\:\  \        \:\  \        \:\  \     /:/\:\  \     /:/\:\  \  
  /::\~\:\  \   /::\~\:\  \       /::\  \       /::\  \   /::\~\:\  \   /::\~\:\  \ 
/:/\:\ \:\__\ /:/\:\ \:\__\     /:/\:\__\     /:/\:\__\ /:/\:\ \:\__\ /:/\:\ \:\__\
\/__\:\/:/  / \/__\:\/:/  /    /:/  \/__/    /:/  \/__/ \:\~\:\ \/__/ \/_|::\/:/  /
      \::/  /       \::/  /    /:/  /        /:/  /       \:\ \:\__\      |:|::/  / 
      \/__/        /:/  /     \/__/         \/__/         \:\ \/__/      |:|\/__/  
                  /:/  /                                   \:\__\        |:|  |    
                  \/__/                                     \/__/         \|__|   

👋🏼 I made this project because I like to study while walking my dogs, but the repo can also be repurposed to create study guides for anything!

If you want to use this repo as a study guide front end eng interview questions and CS concepts, it's deployed here.

Otherwise, if you want to use this as a template to BYO study guides, make sure you follow the directions below exactly. This entire project relies on strong types and codegen, one mistake and it won't work.

Let's get at 'er

Stack

• Next.js bootstrapped with create-next-app
• TypeScript
• GraphCMS backend (headless CMS)
• GraphQL
• Linaria

This repo is also a great boilerplate project for GraphCMS projects that use TypeScript (none of which I could find myself). If you want to follow step-by-step how I set this repo up check out ✍🏼 this blog post.

How to BYO Study Guide

GraphCMS

You'll want to setup a GraphCMS account and project. They do have a free tier for personal projects.

You can clone my GraphCMS project as a template or start your own from scratch.

Create a "Questions" Schema and add the following required fields:

• Prompt (string)
• Answer (rich text)
• Tags (you'll need to create an enum and then pass that to a Dropdown)

For TypeScript's sake, you will need to enter the schema exactly as I have it above.

Create some questions using the schema, publish, and then make sure you can run the following query in the playground:

query MyQuery {
  questions {
    prompt
    tags
    id
    answer {
      html
    }
  }
}

After you've created the Tags enum, add some tags to your questions. Then go ahead and try this query in the playground:

query MyQuery($tags: [Tag!]) {
  questions(where: {tags_contains_some: $tags}) {
    prompt
    tags
    id
    answer {
      html
    }
  }
}

And add one of the tags you just created to the Query Variables footer.

If everything works, you can go ahead and start ingesting the data in this repo!

This Repo

Run yarn install to get your dependencies setup.

Grab your API key and authentication headers from GraphCMS and add them to both the graphql.config.js and codegen.yaml files.

graphql.config.js

module.exports = {
	schema: {
		<YOUR_SCHEMA_URL_HERE>:
			{
				headers: {
					Authorization:
						<YOUR_AUTH_CODE_HERE>
				},
			},
	},
};

codegen.yaml

schema: <YOUR_SCHEMA_URL_HERE>
documents: './src/queries/*.graphql'
generates:
    graphql/generated.ts:
        plugins:
            - typescript
            - typescript-operations

Run yarn codegen to generate TypeScript types from your schema. Check /graphql/generated.ts and make sure your types are there.

Go ahead and run yarn dev if you want hot reloading, otherwise yarn build and then yarn start for a more SSR experience.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.