the calendar is your timesheet
_{Keep your calendar up-to-date with what you work on, and that's it. You're done.}

📖 Table of Contents

➤ Table of Contents

• ➤ Roadmap
• ➤ Backlog
• ➤ Environments
• ➤ Contributing
  • Getting started
    • Set up environment
  • Code structure
  • Node version
  • Authentication
    • Google
  • Branching / Deploying
    • Main branch
    • Dev branch
  • Feature branches
    • Naming conventions
    • See also
  • GraphQL
    • Extensions for VS Code
  • Maintenance Mode
  • Documentation
• ➤ ➤ Microsoft Edge Sidebar Extension
  • Key Benefits
  • Installation
  • Documentation
  • Use Cases
• ➤ Contributors

➤ Roadmap

Milestone	Release date	Version
💧  1 -  Hydrogen	03.02.2020
🎈  2 -  Helium	02.04.2020
🔋  3 -  Lithium	11.05.2020
🛰  4 -  Beryllium	22.05.2020
☄️  5 -  Boron	19.08.2020
🌱  6 -  Carbon	09.09.2020
💨  7 -  Nitrogen	15.10.2020
🅾️  8 -  Oxygen	15.12.2020
🦷  9 -  Fluor	27.04.2021
💡  10 -  Neon	16.11.2022
🧂  11 -  Sodium	17.04.2023
🧲  12 -  Magnesium	21.02.2024
🥫  13 -  Aluminium	25.02.2025
🖥️  14 -  Silicon	12.03.2025
🎆  15 -  Phosphorous	19.03.2025
🥚  16 -  Sulfur	25.09.2025
🧼 17 -  Chlorine	16.12.2025
☁️ 18 -  Argon	08.01.2026
🧴 19 -  Potassium	19.01.2026

➤ Backlog

Our backlog can be found here.

➤ Environments

Environment	Branch/Tag	Node Version	CI	Status
Production	main	Node 22 LTS (22.14.0)	Stage swapping	-
Development (new features)	dev and feat/	Node 22 LTS (22.14.0)	Yes
Staging (pre-prod)	Release tags	Node 22 LTS (22.14.0)	Yes

➤ Contributing

Contributions are very velcome! Here's some guidance to get started! ❤️

Getting started

1. Check out the dev branch
2. Run npm install
3. Run npm run-script create-env to create your own .env file for local testing
4. Set neccessary parameters in your new .env file (see Set up .env below)
5. Install the Azure App Service extension for vscode
6. Install the ESLint extension for vscode
7. Install the i18n Ally extension for vscode
8. Create an Azure app registration
9. Run npm run-script watch to watch both server and client changes concurrently

The following permissions are required by Azure App Registration:

Set up environment

You've copied .env.sample into .env, anually or using npm run-script create-env.

Now you need to set the required environment variables from this table:

Key	Description	Required
AUTH_PROVIDERS	Auth providers. E.g. azuread-openidconnect and google.	Yes
MICROSOFT_CLIENT_ID	ID of the AD application registration.	Yes
MICROSOFT_CLIENT_SECRET	Password/secret of the AD application registration.	Yes
MICROSOFT_REDIRECT_URI	Redirect URL for Microsoft (azuread-openidconnect) login	Yes
MICROSOFT_SCOPES	Scopes for Microsoft Graph queries. See https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent.	Yes
GOOGLE_CLIENT_ID	ID of the Google application registration	No
GOOGLE_CLIENT_SECRET	Password/secret of the Google registration.	No
GOOGLE_REDIRECT_URI	Redirect URL for Google login	No
GOOGLE_SCOPES	Scopes for Google APIs and login	No
PORT	Defaults to 9001	No
SESSION_NAME	A unique name for the sessions.	No
SESSION_SIGNING_KEY	Just a random string to secure the sessions.	Yes
REDIS_CACHE_HOSTNAME	Hostname for the Redis cache	Yes
REDIS_CACHE_KEY	Secret key for the Redis cache	Yes
APOLLO_KEY	Key for reporting to Apollo Studio	Yes
APOLLO_GRAPH_VARIANT	Graph variant for reporting to Apollo Studio. See this article	Yes
MONGO_DB_CONNECTION_STRING	Connection string for MongoDB	Yes
MONGO_DB_DB_NAME	Database name for MongoDB	Yes
API_TOKEN_SECRET	Secret to generate API tokens	Yes
DEBUG	To debug the Node backend. E.g. app* to see all logs from app. See debug.	No
LAUNCH_BROWSER	Set to 1 if you want to automatically open did in the browser when running watch task.	No

Code structure

Folder/File	Description
/shared	Shared code between client and server
/shared/config	Configuration files used across client and server
/shared/config/security	Shared security configuration and permission definitions
/shared/utils	Utility functions shared between client and server
/client	Client TypeScript source using React and Apollo Client
/client/app	Core application files including entry point and router
/client/components	Reusable React components used throughout the solution
/client/graphql-client	Apollo client setup and configuration
/client/graphql-mutations	GraphQL mutation definitions
/client/graphql-queries	GraphQL query definitions
/client/hooks	Custom React hooks
/client/i18n	Internationalization files and translation resources
/client/logging	Client-side logging functionality
/client/pages	Main application pages organized by feature
/client/parts	Page sections and partial components
/client/theme	Styling, theme configuration, and icon catalog
/client/types	TypeScript type definitions and interfaces
/client/utils	Client-side utility functions
/server/public	Public assets and static files served under "/"
/server/routes	Express routes using Handlebars views
/server/graphql	GraphQL schema and resolvers
/server/middleware	Express middleware functions
/server/services	Business logic services (MS Graph, database, etc.)
/server/utils	Server-side utility functions
/server/views	Express Handlebars view templates
/server/app.ts	Express app configuration
/server/index.ts	Node.js server entry point
/assets	Static assets like images and error pages
/webpack	Webpack configuration and build utilities

Node version

NB: did should be developed with Node 22.14.0 (LTS).

It's recommended to use nvm. We have a .nvrc with node version set to 18.18.0.

Authentication

did supports authentication with both Microsoft (azuread-openidconnect) and Google, but google support is in experimental state only supporting adding gmail accounts as externals to an existing Microsoft did subscription.

The auth providers are set in process.env.AUTH_PROVIDERS and sent to the client through GraphQL query authProviders.

Google

See wiki for more details on using did with Google.

Branching / Deploying

Main branch

After successful review and CI/CD pipeline completion, changes are deployed to the staging slot at didapp-staging.azurewebsites.net. Once verified in staging, the changes can be swapped to production at did.puzzlepart.com.

Dev branch

The /dev branch also requires pull requests, and is set up with a CI/CD pipeline which deploys to didapp-dev.azurewebsites.net.

Feature branches

For new features use the naming convention below. A CI/CD pipeline which deploys to didapp-dev.azurewebsites.net is set up for branches matching the pattern feat/* and dev.

Naming conventions

You are encouraged to branch with either of the following prefixes

• hotfix/
• bugfix/
• feat/

See also

See also A successful Git branching model

If you want to test with your web app, checkout Creating your own app registration in the Azure Portal in our wiki.

GraphQL

Extensions for VS Code

The extension Apollo extension for VS Code is recommended for working with GraphQL in vscode.

The Apollo VS Code extension provides an all-in-one tooling experience for developing apps with Apollo.

The extension enables you to:

• Add syntax highlighting for GraphQL files and gql templates inside JavaScript files
• Get instant feedback and intelligent autocomplete for fields, arguments, types, and variables as you write queries
• Manage client side schema alongside remote schema
• See performance information inline with your query definitions
• Validate field and argument usage in operations
• Navigate projects more easily with jump-to and peek-at definitions
• Manage client-only schemas
• Switch graph variants to work with schemas running on different environments

Maintenance Mode

The application supports a maintenance mode that can be enabled during deployments or system updates. When maintenance mode is enabled, all requests will be served with a maintenance page instead of the regular application.

To enable maintenance mode, set the MAINTENANCE_MODE environment variable to true or 1. This can be done in your deployment process or directly in your environment.

API routes (paths starting with /api/) will still function normally even in maintenance mode to allow for background services to continue functioning.

Documentation

We use https://studio.apollographql.com/ for GraphQL schema documentation.

➤ ➤ Microsoft Edge Sidebar Extension

did includes a proof-of-concept Microsoft Edge Sidebar extension that brings your timesheet directly into Edge's sidebar for seamless access while working in Office 365 web apps and other browser-based applications.

Key Benefits

• Always Accessible: Keep your timesheet visible while working in Outlook, Teams, SharePoint, and other web apps
• No Context Switching: Update your timesheet without leaving your current work context
• Multi-Environment Support: Switch between production, staging, development, and local environments
• Native Integration: More "app-like" feel with persistent sidebar access

Installation

1. Navigate to edge://extensions/ in Microsoft Edge
2. Enable "Developer mode"
3. Click "Load unpacked" and select the /extension folder
4. Click the did icon in your toolbar to open the sidebar

Documentation

For detailed installation instructions, usage guide, and technical details, see the extension README.

Use Cases

• Outlook on the Web: Track time while managing your calendar and emails
• Office 365 Apps: Keep timesheet accessible in Teams, SharePoint, Word Online, Excel Online
• Line of Business Apps: Access did from any web-based application
• Development: Test against local or development instances of did

➤ Contributors

Carl Joakim Damsleth	Ole Martin Pettersen	Ole Kristian Mørch-Storstein
cj.gh@d0.si	olem.pettersen@gmail.com	ok@okms.me