Employee List ©️

💻 https://company-employee-list-app.netlify.app/

Description

A single-page application that displays employees in groups of 5, page by page, with interactive transitions between pages with buttons, and when each employee is clicked, detailed information about the employee is displayed.

NOTE = This project emerged as a result of team work. You can see the contributors in the Contributors section.

Outcome

Project Planning & Management

Epic User Story: Employee List Application 🎖️

User Stories:

1️⃣ View Employee List:

• 🥇 As a user, I want to view the list of employees in groups of five on each page.

  Task = Implement pagination for displaying employees in groups of five.
  

2️⃣ Navigate Between Pages:

• 🥇 As a user, I want to navigate between pages using interactive buttons (previous and next) to view different sets of employees.

  Task = Implement interactive buttons for pagination (prev and next).
  

3️⃣ View Employee Details:

• 🥇 As a user, I want to view detailed information about each employee when clicking on their profile.

  Task = Create a modal or expandable section to display detailed employee information.
  

4️⃣ Import Employee Data:

• 🥇 As a user, I want the employee data to be imported from a local data.js file.

  Task = Implement functionality to import employee data from the data.js file.
  

5️⃣ Responsive Design:

• 🥇 As a user, I want the application to be responsive, ensuring a seamless experience across different devices and screen sizes.

  Task = Implement responsive design principles to optimize the application layout for various devices.
  

Additional Requirement: 💥

• The application should have a responsive design.

Project Skeleton 🩻

📖Employee List (folder)
|
├── 📁public
│     └── index.html
├── 📁src
│    ┣ 📂components
│    ┃    ┣ 📜Home.jsx
│    ┃    ┣ 📜List.js
│    ┃    ┗ 📜Person.jsx
│    ┣ 📂helper
│    ┃    ┗ 📜data.js
│    ┣ 📂pages
│    ┃    ┗ 📜Main.jsx
│    ┣ 📂router
│    ┃    ┗ 📜AppRouter.jsx
│    ┣ 📂scss
│    ┃    ┣ 📜_mixins.scss
│    ┃    ┣ 📜_reset.scss
│    ┃    ┗ 📜_variables.scss
│    ┣ 📜App.js
│    ┣ 📜index.js
│    ┗ 📜index.scss
├── .gitignore
├── employee-list-app.gif
├── LICENSE
├── package.json
├── README.md
└── yarn.lock

Objective

Build a Employee List App using ReactJS.

At the end of the project, following topics are to be covered; 🎯

• HTML

• CSS (SCSS)

• JS

• ReactJS

At the end of the project, will be able to; 💪

• improve coding skills within HTML & CSS (SCSS) & JS & ReactJS.

• use git commands (push, pull, commit, add etc.) and Github as Version Control System.

Additional Data 📦

• data

Contributing 🤝

Your insights and contributions greatly enrich my projects! Whether you're bursting with fresh project concepts or have ideas to enhance existing ones, your input is invaluable. Feel free to open an issue to initiate a dialogue about your thoughts, or submit a pull request with your proposed modifications. Every contribution plays a vital role in my growth and improvement, so thank you for being an integral part of my community!

LICENSE 🪪

This repository is licensed under the GNU General Public License v3.0 License. See the GPL licence file for details. For more information please visit GNU License

☺ Happy Coding ✍