{"id":15319582,"url":"https://github.com/mwafrika/shift-plan-frontend","last_synced_at":"2026-04-10T15:09:45.023Z","repository":{"id":197780751,"uuid":"699319461","full_name":"mwafrika/shift-plan-frontend","owner":"mwafrika","description":"Shift Planner is a powerful web application designed to assist company owners in managing employee schedules and shift assignments. With Shift Planner, employers can easily create and manage shifts, and assign workers to those shifts with ease.","archived":false,"fork":false,"pushed_at":"2023-11-16T05:04:51.000Z","size":1409,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-03-27T14:48:44.004Z","etag":null,"topics":["reactjs","socket-io","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mwafrika.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-02T11:59:28.000Z","updated_at":"2023-12-07T17:14:31.000Z","dependencies_parsed_at":"2024-12-06T09:24:31.881Z","dependency_job_id":"47496ef4-d55c-40f2-8b20-31615931cdd6","html_url":"https://github.com/mwafrika/shift-plan-frontend","commit_stats":{"total_commits":30,"total_committers":4,"mean_commits":7.5,"dds":"0.30000000000000004","last_synced_commit":"4301f10215e0aa39a151b638f5bac6370155a2be"},"previous_names":["mwafrika/shift-plan-frontend"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mwafrika/shift-plan-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwafrika%2Fshift-plan-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwafrika%2Fshift-plan-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwafrika%2Fshift-plan-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwafrika%2Fshift-plan-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mwafrika","download_url":"https://codeload.github.com/mwafrika/shift-plan-frontend/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwafrika%2Fshift-plan-frontend/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269068330,"owners_count":24354479,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-06T02:00:09.910Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["reactjs","socket-io","tailwindcss"],"created_at":"2024-10-01T09:05:16.384Z","updated_at":"2025-12-30T21:49:34.544Z","avatar_url":"https://github.com/mwafrika.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003c!-- TABLE OF CONTENTS --\u003e\n# 📗 Table of Contents\n\n- [📖 About the Project](#about-project)\n  - [🛠 Built With](#built-with)\n    - [Tech Stack](#tech-stack)\n    - [Key Features](#key-features)\n  - [🚀 Live Demo](#live-demo)\n- [💻 Getting Started](#getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Setup](#setup)\n  - [Install](#install)\n  - [Usage](#usage)\n  - [Run tests](#run-tests)\n  - [Deployment](#deployment)\n- [👥 Authors](#authors)\n- [🤝 Contributing](#contributing)\n- [⭐️ Show your support](#support)\n- [🙏 Acknowledgements](#acknowledgements)\n- [❓ FAQ](#faq)\n- [📝 License](#license)\n\n\u003c!-- PROJECT DESCRIPTION --\u003e\n\n# 📖 \u003ca name=\"about-project\"\u003eShift PLanner\u003c/a\u003e\n\n**Shift Planner** is a powerful web application designed to assist company owners in managing employee schedules and shift assignments. With Shift Planner, employers can easily create and manage shifts, and assign workers to those shifts with ease.\n\nIn addition, Shift Planner also provides employees with the ability to request absences whenever they are needed. This feature allows workers to easily communicate their scheduling needs to their employer, improving communication and reducing scheduling conflicts.\n\nOverall, Shift Planner is an essential tool for any business looking to streamline their scheduling process and improve communication between employers and employees.\n\n## ScreenShots\n\n### 1. Register/Login screen\n\n![](./public/register.png)\n\n### 2. Admin Actions \nUpon successful login, an Admin will be directed to their dashboard where they can perform various actions, such as adding a department.\n\n![](./public/adminScreenshot.png)\n\n### 3. Manager Actions \nAfter logging in successfully, a Manager will be directed to their dashboard, where they can carry out different tasks, including assigning shifts, viewing a list of employees in their department, and generating a report.\n\n![](./public/managerScreen.png)\n\n![](./public/report.png)\n\n### 4. Employee Actions \nAfter logging in successfully, employees will be directed to their dedicated dashboard. This dashboard allows them to effortlessly access and manage their assigned shifts, while also providing the option to update their profile details as required.\n\n![](./public/employeeScreen.png)\n\n\n## 🛠 Built With \u003ca name=\"built-with\"\u003e\u003c/a\u003e\n\n### Tech Stack \u003ca name=\"tech-stack\"\u003e\u003c/a\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eClient\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://reactjs.org/\"\u003eReact.js\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eServer\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://expressjs.com/\"\u003eExpress.js\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eDatabase\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://www.postgresql.org/\"\u003ePostgreSQL\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n\u003c!-- Features --\u003e\n\n### Key Features \u003ca name=\"key-features\"\u003e\u003c/a\u003e\n\n- **Reporting:** Shift Planner also includes a reporting feature that allows employers to generate custom reports on employee schedules, shift assignments, and other important data.\n\n- **Shift Management:** Shift Planner allows employers to easily create and manage shifts, and assign workers to those shifts with ease. This feature includes the ability to set shift times, assign workers to specific shifts, and view shift schedules.\n\n- **Absence Management:** Shift Planner provides employees with the ability to request absences whenever they are needed. This feature allows workers to easily communicate their scheduling needs to their employer, improving communication and reducing scheduling conflicts.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- LIVE DEMO --\u003e\n\n## 🚀 Live Demo \u003ca name=\"live-demo\"\u003e\u003c/a\u003e\n\n- [Live Demo Link](http://localhost:3001/signup)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- GETTING STARTED --\u003e\n\n## 💻 Getting Started \u003ca name=\"getting-started\"\u003e\u003c/a\u003e\n\nTo get a local copy up and running, follow these steps.\n\n### Prerequisites\n\nMake sure you have the following tools installed:\n\n```sh\n Git and Node.js \n```\n\n### Setup\n\nClone this repository to your desired folder:\n\n```sh\n  cd my-folder\n  git clone https://github.com/mwafrika/shift-plan-frontend.git\n```\n-\n\n### Install\n\nInstall dependencies:\n\n```sh\n  cd shift-plan-frontend\n  npm install\n```\n-\n\n### Usage\n\nTo run the project, execute the following command:\n\n```sh\n  npm run start:dev\n```\n-\n\n### Deployment\n\nYou can deploy this project using:\n\n```sh\n netlify or vercel \n```\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- AUTHORS --\u003e\n\n## 👥 Authors \u003ca name=\"authors\"\u003e\u003c/a\u003e\n\n👤 Mwafrika (Josué) Mufungizi\n\n- GitHub: [@githubhandle](https://github.com/mwafrika)\n- Twitter: [@twitterhandle](https://twitter.com/mwafrika_josue_)\n- LinkedIn: [LinkedIn](https://www.linkedin.com/in/mwafrika-mufungizi)\n\n👤 Nicole Ciragane\n \n- GitHub: [@githubhandle](https://github.com/ciraganenicole)\n- Twitter: [@twitterhandle](https://twitter.com/CiraganeN)\n- LinkedIn: [LinkedIn](https://www.linkedin.com/in/nicole-ciragane-19a3071bb/)\n\n\n👤 Jeffrey Dauda\n\n- GitHub: [@githubhandle](https://github.com/jefftrojan)\n\u003c!-- - Twitter: [@twitterhandle](https://twitter.com/) --\u003e\n- LinkedIn: [jeffdauda](https://www.linkedin.com/in/jeffdauda/)\n\n\n👤 Joseph Irirwanirira\n\n\n- GitHub: [@Irirwanirira](https://github.com/Irirwanirira)\n- Twitter: [@iri_joseph](https://twitter.com/Iri_joseph)\n- LinkedIn: [Joseph Irirwanirira](https://linkedin.com/in/joseph-irirwanirira-74666623a/)\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- CONTRIBUTING --\u003e\n\n## 🤝 Contributing \u003ca name=\"contributing\"\u003e\u003c/a\u003e\n\nContributions, issues, and feature requests are welcome!\n\nFeel free to check the [issues page](https://github.com/mwafrika/shift-plan-frontend/issues).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- SUPPORT --\u003e\n\n## ⭐️ Show your support \u003ca name=\"support\"\u003e\u003c/a\u003e\n\nIf you found Shift Planner to be a valuable tool for managing shifts and improving scheduling efficiency, we kindly request that you consider leaving a star on our GitHub repository. Your support would mean a lot to us and would motivate us to further enhance and refine the application. Thank you for your consideration!\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- ACKNOWLEDGEMENTS --\u003e\n\n## 🙏 Acknowledgments \u003ca name=\"acknowledgements\"\u003e\u003c/a\u003e\n\nWe would like to extend our heartfelt appreciation to the COA team for their brilliant project idea. Their innovative thinking and creativity have paved the way for the development of an exceptional solution like Shift Planner. Their contribution has been instrumental in creating a tool that simplifies shift management and enhances productivity. Thank you, COA team, for your invaluable project idea!\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- FAQ (optional) --\u003e\n\n## ❓ FAQ  \u003ca name=\"faq\"\u003e\u003c/a\u003e\n\n- **What are the system requirements for running Shift Planner?**\n\n  - Shift Planner has specific system requirements to ensure optimal performance. New developers may inquire about the supported operating systems, required versions of Node.js and other dependencies, and any additional software or hardware prerequisites.\n\n- **Is there any documentation or user guide available to help with the setup and usage of Shift Planner?**\n\n  - New developers often seek comprehensive documentation or user guides to understand the installation process, configuration options, and how to utilize the various features of Shift Planner effectively. They may inquire about the availability of such resources to aid them in getting started with the project.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- LICENSE --\u003e\n\n## 📝 License \u003ca name=\"license\"\u003e\u003c/a\u003e\n\nThis project is [MIT](./LICENSE) licensed.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\n## API Documentation Link\nFor detailed API documentation, please visit the [Wallet App API Documentation](https://documenter.getpostman.com/view/6127109/2s9Y5SX5zy)\n.\n\n\n\u003c!-- ## Tools and IDEs\n- Vite\n- Postman\n- vscode --\u003e\n\n## Getting Started\n\nTo set up the application locally, follow these steps:\n\n### Prerequisites\n\nMake sure you have the following tools installed:\n\n- Git\n- Node.js\n\n### Setup\n\n1. Clone the repository:\n\n```js \ngit clone https://github.com/mwafrika/task-force.git\n```\n\n#### 2. Navigate to the project directory:\n```js \ncd task-force\n```\n```js\nCreate .env files in both the frontend and backend directories, and copy the contents of .env.example into them. Update the credentials as required.\n```\n\n## Running the Application\n\n### A. Frontend\n  - Navigate to the frontend directory:\n\n   ```js\n   cd frontend\n   ```\n   - Install dependencies:\n   ```js\n   npm install\n   ```\n   - Run the development server:\n   ```js\n   npm run dev\n   ```\n\n### B. Backend \n   - Navigate to the frontend directory:\n\n   ```js\n   cd backend\n   ```\n   - Install dependencies:\n   ```js\n   npm install\n   ```\n   - Run the development server:\n   ```js\n   npm start\n   ```\n   \nRemember to update the .env files with the appropriate credentials before starting the servers.\n\n\n## Screenshots\n\n### 1. Register/Login screen\n\n![](./frontend/public/register.png)\n\n### 2. Initial Dashboard \nAfter a successful login, you will be redirected to the dashboard where you can see all your accounts and transactions.\n\n![](./frontend/public/dashboard1.png)\n\n### 3. Track all in and out transactions from each account\nTo see the transactions associated with a particular account, click on the account name. You will be able to load all the transactions associated with that account.\n\n![](./frontend/public/dashboard.png)\n\n### 4. Modal to create new records (e.g. new account)\n\n![](./frontend/public/popup.png)\n\n### 5. Generate a report according to the desired time gap.\nIn order to view the transactions reports, you need to click \"Transaction Report button\" then select the date interval (starting from when you have created a new transaction) to see the report of transactions associated with that account.\n\n![](./frontend/public/report.png)\n\n\u003c!-- ## Live Demo --\u003e\n\n\u003c!-- [Live Demo Link]() --\u003e\n\n\n## Authors\n\n👤 **Mwafrika Josué**\n\n- GitHub: [@mwafrika](https://github.com/mwafrika)\n- Twitter: [@mwafrika](https://twitter.com/mwafrika_josue_)\n- LinkedIn: [@mwafrika](https://linkedin.com/in/mwafrika-mufungizi)\n\n## 🤝 Contributing\n\nContributions, issues, and feature requests are welcome!\n\nFeel free to check the [issues page](https://github.com/mwafrika/task-force/issues).\n\n## Show your support\n\nGive a ⭐️ if you like this project!\n\n## Acknowledgments\n\n- Inspiration\n- etc\n\n## 📝 License\n\nThis project is [MIT](./MIT.md) licensed.\n\n\n\u003c!-- Please give us a brief summary of your program, what you're proud of, and what you wish you had done to improve it. This question is optional but we will take into account anything you say. --\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmwafrika%2Fshift-plan-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmwafrika%2Fshift-plan-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmwafrika%2Fshift-plan-frontend/lists"}