Employee Dashboard

This project Is bootstrapped with Create React App and using tailwindcss for UI library. Backend is built with node.js on top of NestJS and MongoDB. Development enviornment is 64bit Windows 10.

project color theme can be changed from src/data/projectTheme.js

Available Scripts 🚁

This project usages Yarn as package manager and in the project directory, you can run:

Root scripts

Client Script	Description
start:client	Starts the development server of client
start:server	Starts the development server of server
start:all	Starts the development server of client and server both
install:server	Install server's npm packages
install:client	Install client's npm packages
install:server:client	Install server and client's npm packages
build:server	build client production
build:client	build server production
prepare	Install husky hooks after package Installs

You can Ignore some of the weird looking commands they are related to heroku or netlify, but If you have experience with these platform and CI/CD pipeline go ahead 👍

# Individual scripts

Client Script	Description	Server Script	Description
start:dev	Starts the development server	start	Starts the server
build	Production build	start:dev	Starts the server in watch mode
test	Runs unit tests	start:debug	Starts the server in debug mode
eject	React Eject	start:prod	Runs prod server, run build first
lint	Shows all the linting errors in codebase	lint	Fix all the liting errors
lint:fix	Fix all the liting errors	build	Production build

Husky hooks will lint code in client folder before commiting it.

🧐 What's inside?

A quick look at the top-level files and directories you'll see in this project.

Client

├── .vscode
├── node_modules
├── public
├── src
    ├── assets
    ├── components
    ├── container
    ├── context
    ├── pages
    ├── routes
    ├── utils
├──_redirects
├── netlify.toml
├── .eslintrc.json
├── .gitignore
├── .prettierrc
├── craco.config.js
├── package.json
├── README.md
├── tailwind.config.js
└── yarn.lock

server

├── .vscode
├── node_modules
├── dist
├── src
    ├── app
      ├── employee
      ├── salary
      ├── shared
      ├── app.module.ts
    ├── main.ts
├── nest-cli.json
├── .eslintrc.json
├── .gitignore
├── .prettierrc
├── package.json
├── README.md
├── schema.gql
├── tsconfig.build.json
├── tsconfig.json
└── yarn.lock

.vscode/: This directory contains all of the workspace setting for vscode. .husky/: All the husky configuration.

Deploy on cloud

Server graphql Server is deployed at heroku. Client is deployed on netlify. Database is at mongodb atlas.

How to deploy

• Deploy MongoDB
  • Create a new cluster at MongoDB Cluster
  • Go to cluster click on connect and follow the steps.
  • Create a user of this collection and remember username and pwd.
  • You should allow IP access from everywhere.
  • Choose connect your application and copy URI and use It in server deployment step.
  • Change URI values with your pwd and username.
• Deploy Server.
  • create a new app on heroku.
  • Install heroku CLI locally.
  • Open cmd at root of the project.
  • Init heroku repository with heroku git:remote -a YOUR_APP_NAME
  • Open server/app/app.module.ts and change mongoDB URI to your mongoDB atlas URI.
  • Run yarn build:server
  • Now push to heroku master git push heroku <branch_name>:master
  • Your server is running at the APP_URL/graphql
  • Copy app url It will be needed in client deployment.
• Deploy Client
  • Upload or Clone this repository to github
  • Open client/src/index.js
  • Change ApolloClient to projectData.graphqlServerLive
  • Go to projectData file and replace the value of graphqlServerLive with your live GraphQL server URI which you have copied in server deployment.
  • Git push to repository.
  • Use deploy on netlify button at very bottom of this file.
  • You can deploy any branch I will prefer deploying master as It have production ready code.
  • leave the netlify variables empty don't put anything.
  • This project already have a netlify config file, netlify will use this file.

Happy deploying 😄

Notes

• if husky hooks not working it can be because of husky didn't created hooks in .husky directory. To fix this run the following commands in root of this project.

yarn add -D husky

npm set-script prepare "husky install" && yarn prepare // don't worry if this not work It just add prepare script to npm Scripts which is already added.

npx husky add .husky/pre-commit "yarn lint-staged"

git commit -m "added husky and lint-stagged" // here you will notice the lint-staged checking the files with help of husky

• Client application will run at port 3000 if available otherwise it will pick any available port.
• Server will be running at port 4000. GraphQL playground is available at URL:4000/graphql
• Server usages default mongoDB port which is 27017, check server/src/app/app.module.ts for details.

💫 Deploy