aretecode / modern-stack-web-portfolio

Monorepo for https://github.com/aretecode/modern-stack-portfolio-graphql & https://github.com/aretecode/modern-stack-portfolio-react
https://jameswiens.dev
MIT License
10 stars 0 forks source link
apollo apollo-client apollo-link-state apollo-server firebase graphql graphql-client graphql-server indexdb jest monorepo nextjs now portfolio react redis storybook styled-components submodule typescript

Modern Stack Portfolio

Known Vulnerabilities

Monorepo for

Deploy

  1. Deploy to now Graphql
  2. Deploy to now React

Development

Cloning

clone the mono-repo modern-stack-web-portfolio

git clone --recursive git@github.com:aretecode/modern-stack-web-portfolio.git
cd modern-stack-web-portfolio
git submodule foreach git checkout master

if you are facing with clone, you may not have SSH key configured with your GitHub account, follow these steps to configure yours in a few seconds. Once installed, do the cloning step again.

the submodule checkout master command is because each submodule is pointed to a specific commit, so running this command will point them to master, after which they can be used the same way any other repo is used (pulling, merging, committing...)

Yarn Install

Run the following command to install all the packages

yarn install

There are two sub-modules in the stack. We are using yarn workspaces, so no need to run yarn install multiple times in each modules, running at the top level is enough.

Run the build

Tip: for ease of use, open two terminal windows

1. client:

cd packages/client
yarn dev

Then, open http://localhost:3000

2. graphql:

cd packages/graphql
yarn dev

Then, open http://localhost:4000/graphql

Setup the data

After you running the build, you won't see any data.

To see the content, we need to set it ourselves:

  1. open http://localhost:4000/graphql

  1. use the following query
mutation SetResume($basics: BasicsInputType, $work: [WorkInputType]) {
  setResume(basics: $basics, work: $work) {
    responseMessage
  }
}

  1. open the Query Variables

  1. add your JSON to the Query Variables. Example data can be found in this gist

  2. click the play/(>) button to run it

  3. refresh the client

  4. profit???