Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dzenis-h/mars-ems

This is an Employee Management system [EMS] for Accounting and HR built using the MERN+ stack. πŸ“Š πŸ“‰ πŸ“†
https://github.com/dzenis-h/mars-ems

bootstrap4 css3 gas google-sheets-api html5 javascript jquery lodash mlab mongodb mongoose nodejs oauth2 react-router reactjs redux redux-form redux-thunk rest-api sailsjs

Last synced: about 2 hours ago
JSON representation

This is an Employee Management system [EMS] for Accounting and HR built using the MERN+ stack. πŸ“Š πŸ“‰ πŸ“†

Awesome Lists containing this project

README

        

##
![GitHub repo size](https://img.shields.io/github/repo-size/dzenis-h/Mars-EMS)
![GitHub contributors](https://img.shields.io/github/contributors/dzenis-h/Mars-EMS)
![GitHub stars](https://img.shields.io/github/stars/dzenis-h/Mars-EMS?style=social)
![GitHub forks](https://img.shields.io/github/forks/dzenis-h/Mars-EMS?style=social)
[![LinkedIn Follow](https://img.shields.io/badge/-Follow-blue?style=social&logo=linkedin&link=https://www.linkedin.com/in/dzenis-h/)](https://www.linkedin.com/in/dzenis-h/)
[![GitHub Follow](https://img.shields.io/badge/-Follow-black?style=social&logo=github&link=https://github.com/dzenis-h)](https://github.com/dzenis-h)
##
# Mars-EMS

## Overview πŸ“‚

Mars-EMS is a full-stack web application that simulates an Employee Management System for, both, the accountant and HR departments. It uses Google Sheets as a database and Google OAuth 2.0 for authentication. It allows users to manage employees, their salaries, bonuses, penalties, and more. It also calculates the total payroll for each month and displays it in a dashboard. The EMS stands for an employee management system which was built to help companies reduce their time spent regarding the Accounting and HR departments.
It helps with generating salaries, penalties, bonuses, etc. Employing a new staff member is only a few clicks away or giving an end date takes one click. It contains many other features, like giving loans to employees, tracking their installments, making annual/ monthly reports, and much more. It looks and feels great thanks to great structure and design, and even though it possesses many features, the complexity is hidden from the end-user. So it always appears easy to use, no matter what functionality level you choose. It uses ReactJS (AND its entire ecosystem) on the frontend and NodeJS (SailsJS) + MongoDB/ Mongoose on the backend.

![Screenshot of Mars-EMS](https://drive.google.com/uc?export=view&id=1xNayKUTncYEUe6kOEE1QCAgVMzJaHEiM)

## Tech Stack πŸ› 

| Tech | Docs | Description |
| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| | [ReactJS](https://reactjs.org/docs/getting-started.html) | A JavaScript library for building user interfaces |
| | [Node.js](https://nodejs.org/en/docs/) | A JavaScript runtime environment that executes JavaScript code outside a web browser |
| | [Express](https://expressjs.com/en/4x/api.html) | A web application framework for Node.js |
| | [MongoDB](https://docs.mongodb.com/) | A cross-platform document-oriented database program |
| | [Bootstrap](https://getbootstrap.com/docs/5.0/getting-started/introduction/) | A popular front-end framework for building responsive web pages |
| | [Redux](https://redux.js.org/introduction/getting-started) | A state management library for JavaScript applications |
| | [OAuth2](https://oauth.net/2/) | An open standard for access delegation |
| | [React Router](https://reactrouter.com/web/guides/quick-start) | A collection of navigational components for React applications |
| | [CSS3](https://developer.mozilla.org/en-US/docs/Web/CSS) | A style sheet language for describing the presentation of web pages |
| | [Redux Forms](https://redux-form.com/8.3.0/docs/gettingstarted.md/) | A library for managing form state in Redux applications |
| | [Redux Thunk](https://github.com/reduxjs/redux-thunk) | A middleware for writing async logic that interacts with the Redux store |
| | [Google Sheets API](https://developers.google.com/sheets/api) | An API for reading and writing data to Google Sheets |
| | [Sails.JS](https://sailsjs.com/documentation/reference) | A framework for building Node.js applications with a modern MVC architecture |
| | [Lodash](https://lodash.com/docs/) | A utility library for manipulating and iterating over arrays, objects, and strings |
| | [Google App Scripts](https://developers.google.com/apps-script) | A scripting platform for automating tasks across Google products and third-party services |
| | [Restful API](https://restfulapi.net/) | An architectural style for designing web services that provide a uniform interface for interacting with resources |

## Instructions πŸ“

In order to run & use this app locally, follow these steps:

- Clone the repository: `git clone https://github.com/dzenis-h/Mars-EMS`
- Install the necessary dependencies: Run `npm install` in all three folders:
- ROOT folder (`Mars-EMS`).
- BACKEND folder (`Mars-EMS\backend`).
- FRONTEND folder (`Mars-EMS\frontend`).
- Add your own credentials:
- Go to [Google Cloud Console](https://console.cloud.google.com/)
- Create a new project.
- Enable the Google Spreadsheets API.
- Create OAuth credentials - for the client choose Web client
- Copy the Client ID and paste it inside of the config file (`frontend\src\config\config.js`).
- Don't forget to do similar for the backend -Look into the 'client_secret' JSON file for more info.
- For the backend, you’ll have to choose 'Other’ aka Installed.
- Download the file and save it inside of the backend (its root) folder under the name 'client_secret.json'.
- NOTE: Both of them have to point to the same project. Additionally, if you want to use a remote MongoDB storage, you’ll have to edit the `connections.js` file and change your preferences. The file is located inside of the `backend\config\connections.js` file.
- Now let’s start the project:
- Run an instance of your local MongoDB: `mongod` [ Important – this needs to start first ]
- Run the following command inside of the root folder: `npm start`
- NOTE: It will start the NodeJS backend and the ReactJS frontend at the same time.
- It’s time to log in: The login restriction has been removed (by default). To log in, you can use your Gmail account.
- Previously, the login was restricted, and to log in you had to use the email which I was providing. If you’re still interested in changing the default behavior, you can achieve that, on a basic level, by editing the config file located in `frontend\src\config\config.js`
- This part is very important: After you get redirected, copy the code received from Google, go back to localhost: 3000 or Heroku (depending on where you're doing the testing), paste it into your app, and confirm.

## Contributing πŸ™Œ

Contributions are always welcome! If you would like to contribute to this project, please follow these steps:

1. Fork the repository. 🍴
2. Create a new branch. 🌡
3. Make your changes and test them thoroughly. πŸ‘¨β€πŸ’»
4. Submit a pull request. βœ”

## License πŸ“„

This project is licensed under the MIT License. See the [LICENSE](https://docs.google.com/document/d/11WK7tVoTFRMcWCuGZQCRWxEsDUEJ_6ArtfV-NjWcBCU/edit?usp=sharing) file for more details.

## Credits πŸ‘Ύ

This project was created by [Dzenis H.](https://dzenis.tech)

"If you like what you see, please consider giving a ⭐️