/Employee-Management-Dashboard

An employee dashboard built with ReactJS, nestJS, MongoDB.

Primary LanguageTypeScript

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.

Netlify Status


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

Deploy to Netlify