---
title: CS Platform Setup
tags: CoderSchool
---

# CS Platform

## Getting started

**Documentation**:
- Prisma: https://www.prisma.io/docs/
- Graphql:
- https://graphql.org/learn/
- [GraphQL vs REST](https://www.apollographql.com/blog/graphql/basics/graphql-vs-rest/)
- [The anatomy of a graphql query](https://www.apollographql.com/blog/graphql/basics/the-anatomy-of-a-graphql-query/)
- [GraphQL in NestJS](https://docs.nestjs.com/graphql/quick-start)
-
- Urql: https://formidable.com/open-source/urql/docs/
- Relay Pagination:
- https://relay.dev/docs/guided-tour/list-data/pagination/
- https://github.com/devoxa/prisma-relay-cursor-connection

**Repository**: `[e-mail]:coderschool/cs-platform.git`

### Setup VSCode
Add to user setting JSON:

"[typescriptreact]": {
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": true
	}
}

Prisma format: `Opt + Shift + F`
Setup in User Settings:

![[Pasted image 20220808163054.png]]
### Start on local:

# Install dependencies
yarn install
npm i -g prisma

# Migrate db
cd package/server
prisma migrate dev

# Start server
cd package/server
yarn start:dev

# Start client
cd package/web
yarn dev

Open `http://localhost:3000` (don't use `127.0.0.1`)

GraphQL: `http://localhost:4000/graphql`

PostgreSQL:
- Open Docker Desktop and click on pgadmin or `localhost:5050`
- Password admin: `admin` (from `packages/server/docker-compose-dev.yml`)
- Create server: Host `postgres_container` (refer to the container_name), Port `5432`, username/password: `postgres`/`postgres`
- Open Query Tool: `SELECT * FROM public."User"`
- Edit the column roles to `{ADMIN}` (Or go to `devtools.module.ts` and uncomment line 13 `await this.authService.seedPlatformSuperUsers()`)

>Fixing GraphQL validation error in `.gql` files: `Cmd+Shift+P`, choose `Apollo reload schema`

Testing: Run from `packages/server/`
- `yarn test -u`
- Test a service specificly: `yarn test -t NAME_OF_THE_SERVICE`
- Test with detail logs: `yarn test -u`

Before pushing code:
- Pass all test
- Pass lint: `/ $ yarn lint`

## Tricks

### Sort lines

Select the code you wish to sort in Visual Studio Code. Then hit the key combination `Cmd+Shift+P`. Next type sort and choose **Sort Lines Ascending** or choose the **Descending** option. Now the lines you've previously selected will be sorted by the option you chose.

### Create new component
- Create `.tsx` component then use `rfc` to create the code snippet.
- Create `index.ts` then use `erfc` to create the code snippet.
- Create page: `erfclz`
- After add `.gql` => `/packages/web> yarn codegen --watch`
- ?? need to run this before `yarn add -EDW undici@5.5.1 cross-undici-fetch sync-fetch --no-lockfile`

Github
- Assign to issue
- Create branch from the issue
- Fetch origin new branch -> checkout new branch (script on github)

## Frontend

- Start with `routes.tsx`
- Containers contains `Outlet` and are setup in `routes/`
- `RootContainer` handles `/` and navigate user.
- `MeetingContainer` is for the video sdk `meeting/:meetingId`
- `WorkspaceContainer` contains management routes
- `MentorContainer` is for mentor views
- In `RootContainer`, depends on the use role, the app will split to
- `/workplace`: for staff and admin
- `/mentor`: for mentor GUI
- `/learner`: for learner GUI
- Also handling `isLoading` and signing out if `!user`
- In `WorkspaceContainer`:
- Control sidebar open/close
- Control Notification Provider
- `WorkspaceRoute` defines which route will be handled by which component in `app/workspace/`
-