PlaceHires Web Client

Build status

Production

Staging

Developing

Prerequisites

• Environmental Variables:
  • You'll need correct variables defined in .env.development file
  • You'll also need NPM_TOKEN exported (~/.bashrc or whatever you use). This token should be your PAT with read:packages permission. See how to create a token here: https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token
• Server: navigate to backend repository

Starting development

$ npm install
$ npm start

To view GraphQL schema and docs, go to http://localhost:3999/graphql

Project Structure

• src: contains the source code written in Typescript.
  • apollo: contains Apollo Client related files, including client configuration, queries and operations
  • assets: contains media files
  • cms: contains CMS related files. See https://www.netlifycms.org/docs/intro/ for more details
  • components: contains non-page (reusable) react components
  • constants: contains shared constants.
  • gatsby-theme-material-ui-top-layout: contains Gatsby theme for Material UI with global layout wrapper
  • generated: contains generated files (do not edit them manually).
  • hocs: contains higher order components
  • hooks: contains react hooks
  • layout: contains general page layout components
  • markdown-pages: contains markdown files with data that map into template components in templates folder to become static pages that Gatsby renders. These are also the files that are edited by the CMS
  • pages: contains react page components that are rendered by Gatsby. app.tsx is the entry point for client-only routes
  • private-pages: contains private pages that are only accessible to authenticated users. These should be imported in pages/app.tsx file
  • services: contains services
  • stories: contains storybook stories
  • templates: contains template components that are rendered by Gatsby. They source data from markdown-pages to render static pages
  • utils: contains application utilities.
• static: contains static files controlled by Netlify CMS

Developing Components

Styling solution

We use tss-react as a replacement of @mui/styles after migrating from mui v4 to v5

Storybook

Isolate reusable components, and develop them using StoryBook. To run StoryBook, use the following command: If npm run build has never been done, do:

$ npm run build
$ npm run storybook

else:

$ npm run storybook

Components (and utils) that can be reused in admin-client also can should be developed in a separate package: https://github.com/placehires/react-component-library.

You can read the guide in the introduction.

You can also view the latest live storybook here: https://develop--5fb6ab18c615ca0021de7851.chromatic.com

Controlling Date

If you want to a set a specific date for the storybook (i.e. make new Date() or Date.now() return a specific date), to keep the UI the same for stories that are based on current date, you can use params:

export default {
  title: "YourComponent",
  component: YourComponent,
  parameters: {
    date: new Date("March 10, 2021 10:00:00")
  }
} as Meta;

GraphQL

Define GraphQL fragments and operations in src/apollo directory using .graphql files. Then use the following command:

$ npm run generate [-- -w] # option for watch mode

This automatically generates types, documents, and hooks based on their name in src/generated/graphqlTypes.tsx.

For example a mutation:

mutation VerifyRecruiter($id: ID!) {
  verifyRecruiter(id: $id) {
    _id
    verified
  }
}

generates useVerifyRecruiterMutation ready for use.

CMS

We're using Netlify CMS as our CMS: https://www.netlifycms.org/docs/intro/. Directories for CMS are:

• static/admin
• src/cms
• src/templates
• src/markdown-pages