Planner Tasks

Description

A React application to view and visualise the status of tasks from a Microsoft Planner plan (kanban board). The application uses MSAL React to sign-in a user and obtain a JWT access token for Microsoft Graph API from Azure AD.

Tasks are grouped by swimlanes, refered to as buckets within MS Planner, and the status of each task wihin a bucket grouped by To-do, Complete, Priority, and Late.

This project was based on the following Microsoft example: https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/2-Authorization-I/1-call-graph

---

Table of Contents

1. Installation
2. Usage
3. URL
4. Build
5. License
6. Contributing
7. Questions

Installation

You can run this application locally by:

1. Create an account on the Azure Portal if you dont already have one.

2. Create a new App Registration.

   1. Click App Registrations then, click New Registration
   2. Give the app a name e.g. Planner Tasks
   3. Select Accounts in this organizational directory only.
   4. Click Register.

3. Add a platform and redirect URIs

   1. Select the Authentication blade
   2. Click add a platform
   3. Enter these two redict URIs:
      1. http://localhost:3000/
      2. http://localhost:3000/redirect.html
   4. Click save.

4. Add the Microsoft Graph delegated permissions.

   1. Select the API permissions blade.
   2. Select the Add a permission button.
   3. Select the Add a permission button and then select Microsoft Graph.
   4. In the Delegated permissions section, select the User.Read, Tasks.Read in the list.
   5. Select the Add permissions button at the bottom to save.

5. Record your Application (client) ID and Directory (tenant) ID from the Overview blade.

6. Record the ID of one of your plans from Microsoft Planenr

   1. Create an account on Microsoft Planner this must be on the same tenant as your Azure Portal account.
   2. Create a new plan.
   3. Open the plan and record the planId from the address bar.

7. Clone this repository git clone git@github.com:oli-drew/planner-tasks.git

8. Navigate to inside the repository cd planner-tasks/

9. Install the required packages using npm install

10. Copy and rename the .env.EXAMPLE file. cp .env.EXAMPLE .env

11. Configure your web application environment variables.

    1. Open the .env file you previously created in your IDE.
    2. Enter your Application (client) ID after REACT_APP_AAD_APP_CLIENT_ID= e.g. REACT_APP_AAD_APP_CLIENT_ID="1234"
    3. Enter your Directory (tenant) ID after REACT_APP_AAD_APP_TENANT_ID= e.g. REACT_APP_AAD_APP_TENANT_ID="1234"
    4. Enter your Planner Plan ID after REACT_APP_AAD_APP_PLAN_ID= e.g. REACT_APP_AAD_APP_PLAN_ID="1234"
    5. Save the file.

12. Start the server by running npm start

Usage

1. Navigate to: http://localhost:3000/
2. Click the "Login" button.
3. Sign in with your Microsoft account.
4. Click the "Task Board" button to navigate to the tasks page.
5. This application can be installed as a PWA.

Screenshot

URL

A deployed version of the application is available here: https://tasks.peterdrew.com/

Build

The following technology stack was used:

• React
• MUI and Emotion
• Microsoft MSAL
• Microsoft Graph
• Recharts
• Dayjs
• Workbox
• Deployed to Azure Static Web Apps

License

This project is licensed under MIT.

Contributing

• Oliver Drew

Questions

If you have any questions please contact me via GitHub or Email