Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mdyeates/team-dashboard
Quickly gather information, generate a dynamic HTML webpage and keep track of all your team members in one place.
https://github.com/mdyeates/team-dashboard
htmlgen javascript nodejs oop ttd
Last synced: 13 days ago
JSON representation
Quickly gather information, generate a dynamic HTML webpage and keep track of all your team members in one place.
- Host: GitHub
- URL: https://github.com/mdyeates/team-dashboard
- Owner: mdyeates
- License: mit
- Created: 2023-01-30T17:20:58.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-31T18:34:43.000Z (almost 2 years ago)
- Last Synced: 2024-11-03T17:43:04.734Z (2 months ago)
- Topics: htmlgen, javascript, nodejs, oop, ttd
- Language: JavaScript
- Homepage:
- Size: 7.74 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
[![LinkedIn][linkedin-shield]][linkedin-url]
Team Dashboard
Quickly gather information, generate a dynamic HTML webpage and keep track of all your team members in one place.
Team Dashboard is proudly built by: Michael Yeates
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
## About The Project
### Screenshot
[![Team Dashboard Screen Shot][product-screenshot]](https://drive.google.com/file/d/1_atUXTM-L9r4NccsrPaaWqPyNu37ftwH/view)
### Built With
- 
- 
- 
### Description
Team Dashboard is a Node.js command-line application that takes in information about employees in a software engineering team and uses Object-Oriented Programming and Test-Driven Development to generate dynamic HTML. The user is prompted to enter the manager's information (name, ID, email, office number), then has the option to add an engineer or an intern by entering their information (name, ID, email, GitHub username or school). The application uses Inquirer for input, and has classes for Employee, Manager, Engineer, and Intern, with properties and methods unique to each role. Once the user has finished entering information, the HTML is generated and written to a file named team.html in the output folder.
## Getting Started
To get a local copy up and running follow these simple example steps.
### Prerequisites
- npm
```sh
npm install npm@latest -g
```
### Installation
1. Clone the repo
```sh
git clone https://github.com/mdyeates/team-dashboard.git
```
2. Install NPM packages
```sh
npm install
```
## Usage
- For this project, I learnt about OOP principles, modularisation and closure. The code block below defines a closure used in this app, which is an inner function that has access to variables in an outer function even after the outer function returns. This closure is made by enclosing the function definition in an Immediately Invoked Function Expression (IIFE) (which is invoked immediately when the code is executed).
- The `createTeam` function has a private variable called `team` defined within the closure and is accessible only to other functions defined within the same closure. The closure provides two methods for accessing the private `team` array: `addToTeam` and `getTeam`.
- `addToTeam` accepts a team member as an argument and uses the push method to add it to the team array. `getTeam` returns the `team` array, allowing access to the members who have been added.
- The closure acts like a "backpack" that carries the private information in `team` and the methods `addToTeam` and `getTeam` with it, allowing these variables and functions to persist even after the closure has been executed.
```js
const createTeam = (function () {
const team = [];
return {
addToTeam: (member) => {
team.push(member);
},
getTeam: () => team,
};
})();
```
- The functions and state defined within the closure can be easily reused across multiple parts of the codebase while maintaining their privacy and encapsulation, this improves code reuse, security, organisation and readability.
```js
function generateIntern() {
return internPrompts().then(({ name, id, email, school }) => {
const intern = new Intern(name, id, email, school);
createTeam.addToTeam(intern);
});
}
```
### Functionality
- The following animation demonstrates the applications functionality
[![Functionality Gif][functionality-gif]](https://drive.google.com/file/d/1_atUXTM-L9r4NccsrPaaWqPyNu37ftwH/view)
### Mobile Responsive
- As demonstrated in the screenshot below, this application is designed to be responsive and adjust seamlessly to fit various screen sizes
[![Responsiveness Screenshot][responsive-screenshot]](https://drive.google.com/file/d/1_atUXTM-L9r4NccsrPaaWqPyNu37ftwH/view)
## License
Distributed under the MIT License. See `LICENSE.md` for more information.
## Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## Tests
This app utilises Jest. Simply run the command below to confirm that every aspect of your code passes the provided tests
```sh
npm test
```
## Questions
If you have any inquiries, don't hesitate to reach out to me via socials or by sending an email to [email protected]
Project Link: [https://github.com/mdyeates/team-dashboard](https://github.com/mdyeates/team-dashboard)
## Acknowledgments
- [JS OOP: The Hard Parts](https://www.youtube.com/watch?v=aAAS9cEuFYI)
[contributors-shield]: https://img.shields.io/github/contributors/mdyeates/team-dashboard.svg?style=for-the-badge
[contributors-url]: https://github.com/mdyeates/team-dashboard/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/mdyeates/team-dashboard.svg?style=for-the-badge
[forks-url]: https://github.com/mdyeates/team-dashboard/network/members
[stars-shield]: https://img.shields.io/github/stars/mdyeates/team-dashboard.svg?style=for-the-badge
[stars-url]: https://github.com/mdyeates/team-dashboard/stargazers
[issues-shield]: https://img.shields.io/github/issues/mdyeates/team-dashboard.svg?style=for-the-badge
[issues-url]: https://github.com/mdyeates/team-dashboard/issues
[license-shield]: https://img.shields.io/github/license/mdyeates/team-dashboard.svg?style=for-the-badge
[license-url]: https://github.com/mdyeates/team-dashboard/blob/main/LICENSE.md
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://linkedin.com/in/mdyeates
[product-screenshot]: assets/images/screenshot.png
[functionality-gif]: assets/images/functionality.gif
[responsive-screenshot]: assets/images/mobile-screenshot.png