10xac / skillandjobinsights

Skill graph wiht React Starter Kit and ForceGraph2D

This project was bootstrapped with React Starter Kit.

Directory Structure

├──.github — GitHub configuration including CI/CD workflows
├──.vscode — VSCode settings including code snippets, recommended extensions etc.
├──common — common (shared) React components
├──core — core modules and utility functions
├──dialogs — React components implementing modal dialogs
├──fragments — common (shared) Relay fragments
├──hooks — React hooks such as useLocation(), useCurrentUser(), etc.
├──icons — custom icon React components
├──menu — React components implementing popup menus
├──public — static assets such as robots.txt, index.html etc.
├──routes — application routes and page (screen) components
├──scripts — automation scripts such as yarn deploy
├──theme — application theme - colors, fonts, paddings, etc.
├──workers — Cloudflare Worker scripts (reverse proxy, SSR)
├──config — client-side application settings per environment
└──index.ts — application entry point

Tech Stack

• React, Relay, Emotion, Material UI v5
• TypeScript, Babel, ESLint, Prettier, Jest, Yarn v2 with PnP, Webpack v5

Requirements

• Node.js v14 or newer, Yarn package manager
• VS Code editor with recommended extensions

Getting Started

• Clone the repo
  git clone -o seed -b main --single-branch https://github.com/kriasoft/react-starter-kit.git
• Install project dependencies — yarn install
• Launch the app — yarn start, it will become available at http://localhost:3000

IMPORTANT: Ensure that VSCode is using the workspace versions of TypeScript and ESLint.

Scripts

• yarn start — Launches the app in development mode on http://localhost:3000
• yarn update-schema — Update GraphQL API schema by running an introspection query
• yarn relay — Updates GraphQL fragments used in the code
• yarn build — Compiles and bundles the app for deployment
• yarn lint — Validate code using ESLint
• yarn tsc — Validate code using TypeScript compiler
• yarn test — Run unit tests with Jest, Supertest
• yarn deploy — Deploys the app to Cloudflare

How to Deploy

Ensure that client-side application settings for test (QA) and prod (production) environments are up-to-date found in the config.ts file, as well as Cloudflare account credentials found in the .env file:

# Cloudflare
# https://dash.cloudflare.com/
# https://developers.cloudflare.com/api/tokens/create
CLOUDFLARE_ACCOUNT_ID=
CLOUDFLARE_ZONE_ID=
CLOUDFLARE_API_TOKEN=

Compile and deploy the app by running:

$ yarn build
$ yarn deploy [--env #0]

Where --env argument is the target environment, e.g. yarn deploy --env=prod.

How to Update

• yarn set version latest — Bump Yarn to the latest version
• yarn upgrade-interactive — Update Node.js modules (dependencies)
• yarn pnpify --sdk vscode — Update TypeScript, ESLint, and Prettier settings in VSCode