___ ___ ___ ___ ___
/\ \ ___ /\ \ /\ \ /\ \ /\ \
/::\ \ /\ \ \:\ \ \:\ \ /::\ \ /::\ \
/:/\:\ \ \:\ \ \:\ \ \:\ \ /:/\:\ \ /:/\:\ \
/::\~\:\ \ /::\__\ /::\ \ /::\ \ /::\~\:\ \ /::\~\:\ \
/:/\:\ \:\__\ __/:/\/__/ /:/\:\__\ /:/\:\__\ /:/\:\ \:\__\ /:/\:\ \:\__\
\/__\:\/:/ / /\/:/ / /:/ \/__/ /:/ \/__/ \:\~\:\ \/__/ \/_|::\/:/ /
\::/ / \::/__/ /:/ / /:/ / \:\ \:\__\ |:|::/ /
\/__/ \:\__\ \/__/ \/__/ \:\ \/__/ |:|\/__/
\/__/ \:\__\ |:| |
\/__/ \|__|
___ ___ ___ ___ ___ ___
/\ \ /\ \ /\ \ /\ \ /\ \ /\ \
/::\ \ /::\ \ \:\ \ \:\ \ /::\ \ /::\ \
/:/\:\ \ /:/\:\ \ \:\ \ \:\ \ /:/\:\ \ /:/\:\ \
/::\~\:\ \ /::\~\:\ \ /::\ \ /::\ \ /::\~\:\ \ /::\~\:\ \
/:/\:\ \:\__\ /:/\:\ \:\__\ /:/\:\__\ /:/\:\__\ /:/\:\ \:\__\ /:/\:\ \:\__\
\/__\:\/:/ / \/__\:\/:/ / /:/ \/__/ /:/ \/__/ \:\~\:\ \/__/ \/_|::\/:/ /
\::/ / \::/ / /:/ / /:/ / \:\ \:\__\ |:|::/ /
\/__/ /:/ / \/__/ \/__/ \:\ \/__/ |:|\/__/
/:/ / \:\__\ |:| |
\/__/ \/__/ \|__|
👋🏼 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
- 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.
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!
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.
module.exports = {
schema: {
<YOUR_SCHEMA_URL_HERE>:
{
headers: {
Authorization:
<YOUR_AUTH_CODE_HERE>
},
},
},
};
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.
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.