• Create Vite production build
• Add dist to .gitignore
• Copy dist contents to server/public
• Add public to .gitignore
• Add express.static() middleware to render the frontend
• Create Dockerfile with Node, MongoDB, and source files
• Add wellwellwell mongodb URL to ENV variables and remove hardcoded versions of mongodb://mongodb-wellwellwell:27017/wellwellwell from Express
• #69
• Add reverse proxy (nginx) that handles SSL (LetsEncrypt) and https

Definition of done (acceptance criteria)

• Authentication should be checked by Express before the site is rendered
• If the user is not authenticated, a 301 redirect to /login should occur
• Only /login or /register should be accessible to unauthenticated users
• Once signed in, the Dashboard data should be visible

Subtasks

Backend

• Implement http cookie to hold JWT

Frontend

• Remove redundant session storage code
• Remove Authorization code in api folder

Future work

N/A

Useful resources

N/A

This will hold the detailed links for easy navigation, starting with the dashboard.

Definition of done

• Navigation bar can be used to navigate from one page to another

Subtasks

• Build left navigation bar
• Style with Tailwind CSS
• Add icons as appropriate
• Install react-router-dom
• Implement dashboard route (abstract into routes file)
• Add Link component to Nav to navigate to dashboard

Acceptance criteria

N/A

Useful resources

• https://dribbble.com/shots/20530181-Sidebar-navigation-Untitled-UI
• https://unicodeplus.com/
• http://www.amp-what.com/unicode/search

Adding items-center to the Tailwind CSS class of the ContentWrapper centres the h1 tag in MyDay (undesired) but does not in Dashboard (desired).

Components should be refactored and broken up where necessary, with CSS rationalised and Content Wrapper reviewed.

Create a component which allows the user to record how they are feeling, and save it to the database.

Definition of done

• Details can be recorded for the current day and saved to the database

Subtasks

• Create /my-day route and component
• Add nav link to /my-day
• Create ContentWrapper component by composition?
• Create form
• Add option to select rating (styled radio button?)
• Style form (color coding options)
• Implement service to update database
• Add link from dashboard

Acceptance criteria

N/A

Useful resources

• https://dribbble.com/shots/21111984-Integrations-Page-Online-Survey-Tools
• https://tailwindcomponents.com/component/radio-buttons-1
• https://unicodeplus.com/
• http://www.amp-what.com/unicode/search

Prop types allow validation and type checking to catch bugs.

Definition of done

• Prop types are implemented as detailed below

Subtasks

• npm install --save prop-types
• Implement prop types for TaskList
• Implement prop types for ContentWrapper

Acceptance criteria

N/A

Useful resources

• https://www.npmjs.com/package/prop-types

Implement a collapsible navigation bar and better layout on mobile devices.

Definition of done

• Details can be recorded for the current day and saved to the database

Subtasks

• Create mobHidden state for navigaiton visibility
• Hide navigation on mobile only when mobHidden is true
• Show navigation on screen size md: and above in all cases
• Add toggleMobHidden function and Tailwind CSS classes to allow navigation to be hidden
• Customise text on mobile to make it clear that navigation can be shown/hidden

Acceptance criteria

N/A

Useful resources

N/A

Implement React Query and update API calls to use it.

Definition of done

• React Query calls services for GET and POST.

Subtasks

• Install package: npm i @tanstack/react-query
• Install ESLint Plugin Query: npm i -D @tanstack/eslint-plugin-query
• Implement QueryClientProvider
• Implement for Heatmap (GET)
• Implement for MyDay (POST)

Acceptance criteria

• All queries in the app should use React Query.

Useful resources

• https://tanstack.com/query/v4/docs/react/installation
• https://tanstack.com/query/v4/docs/react/overview
• https://blog.logrocket.com/deep-dive-mutations-tanstack-query
• https://www.smashingmagazine.com/2022/01/building-real-app-react-query/#:~:text=First%2C%20we%20have%20to%20wrap%20our%20app%20with,%2F%3E%20%3CToastContainer%20%2F%3E%20%3C%2FQueryClientProvider%3E%20%3C%2FRouter%3E%20%3C%2FReact.StrictMode%3E%2C%20document.getElementById%20%28%27root%27%29%29%3B

Refactor the TaskList component, adding a Tasks component above. and React Query. This will make handling the isLoading and isError states simpler.

Definition of done

• The same functionality is achieved with smaller, individual components.

Subtasks

• Group Tasks components into a common folder
• Rename TaskList to Tasks
• Extract TaskList from Tasks
• Clean up components

Acceptance criteria

• N/A

Useful resources

• N/A

Break up the Heatmap component into smaller components which are fed directly by React Query. This will make handling the isLoading and isError states simpler.

Definition of done

• The same functionality is achieved with smaller, individual components.

Subtasks

• Group Heatmap components into a common folder
• Extract HeatmapGrid
• Extract HeatmapCard and render them using a map from HeatmapGrid and by passing props

Acceptance criteria

• N/A

Useful resources

• N/A

Create a TaskList component which accepts remaining tasks as props, and shows their status.

Definition of done

• The TaskList component shows at least one task, and whether it is complete or not. The proposed first task is the completion of the MyDay form.

Subtasks

• Create a TaskList component that accepts a tasks prop and maps to TaskListItem components
• Pass the props which should include title, status, path and emoji
• Add a hard-coded task for testing purposes
• BLOCKER implement #5 to get access to API
• Implement react-query for TaskList
• Ensure task reflects whether the MyDay form has been completed today (based on API)
• Add styling.

Acceptance criteria

N/A

Useful resources

N/A

After #16

Allow the user to add tags for the current day.

Definition of done

• User can tag events in the MyDay component by typing
• Tags can be autofilled if there is a match (e.g. using the tab key or clicking)
• Tags can be viewed in the Heatmap

Subtasks

• Add input element to MyDay form
• Enforce minimum and maximum lengths on tags
• Add tag on space or tab
• Display tags with delete option (cross)
• Enforce maximum number of tags
• Use flex on the input and row-wrap on the container, with styling, to simulate adding tags
• Ensure no duplicate tags are stored (show error if so)
• Ensure API stores tags
• Display at least one tag on the Heatmap
• #26
• #27

Acceptance criteria

N/A

Useful resources

• https://dribbble.com/shots/14332639-Case-Management-Knowledge-Management-System
• https://unicodeplus.com/
• http://www.amp-what.com/unicode/search

Implement more user-friendly loading/error messages in the Heatmap and TaskList components.

Definition of done

• A loading message is displayed for both components while the data is being fetched
• An error message is displayed for both components when the server is not running

Subtasks

• BLOCKER: #49
• Implement loading/error text for HeatmapGrid
• BLOCKER: #51
• Implement loading/error text for TaskList

Acceptance criteria

N/A

Useful resources

• https://dev.to/prototyp/implementing-skeleton-loading-in-react-kia
• https://unicodeplus.com/
• http://www.amp-what.com/unicode/search

https://tailwind.ink/context

Create a generic component and implement for 404 errors (invalid routes).

Definition of done

• A page not found error is displayed when a route is not found

Subtasks

• Create Error page with ContentWrapper
• Style page

Acceptance criteria

N/A

Useful resources

• https://dribbble.com/shots/14332639-Case-Management-Knowledge-Management-System
• https://unicodeplus.com/
• http://www.amp-what.com/unicode/search

Install Node.js and set up wellness API.

Definition of done

• User can GET wellness data from backend
• User can POST wellness data to backend

Subtasks

• Install Node.js
• Build out skeleton (index, app) and folder structure (routes, controllers, models)
• Install Mongoose
• Write tests for Day model
• Create Day model with existing fields
• Write tests for day controller
• Create day controller with create and get functions
• Write tests for day route (as the routes are simple and mplicitly covered by testing app.js)
• Create day(s) route with GET and POST for now
• Write tests for app using supertest
• Link to frontend

Acceptance criteria

• N/A

Useful resources

• https://codeutopia.net/blog/2016/06/10/mongoose-models-and-unit-tests-the-definitive-guide/
• https://www.tutorialspoint.com/expressjs/expressjs_best_practices.htm#:~:text=ExpressJS%20-%20Best%20Practices%201%20Always%20begin%20a,and%20isolate%20routes%20to%20their%20own%20file.%20

• Email should only be populated in the backend if the current user is logged in and is viewing their own profile, otherwise email: null should be returned (this would be used when viewing other users' profiles)

Definition of done (acceptance criteria)

A profile page should be accessible from the menu with:

• username
• email
• date joined

Subtasks

Backend

• Create GETfor Profile route using user ID for data above using req.user object
• Ensure route is protected

Frontend

• Create simple Profile page
• Add Profile to routes - /profile route should display logged on user's profile
• Style profile page to look consistent
• Fetch data with useQuery hook and pass to frontend

Future work

• #67

Useful resources

N/A

Solved with #37

Allow the user to add emojis for the current day. This is a major enhancement to #24.

Definition of done

• User can choose emojis and add them similar to the existing tagging functionality (#4)
• Auto-suggest emojis for matching tags (requires configuration and ability to remove)

Subtasks

• Add an emoji picker for the weather (sun, rain, wind, thunderstorms, etc.)
• Add an emoji picker for life events
• Extend to each category (people, activities, life events)
• Map certain tags to emojis (see if there is already a mapping)
• Add configuration to auto-suggest emojis when tags match
• Ensure ability to remove/re-add emojis (turn grey initially and colour as each one is added)

Acceptance criteria

N/A

Useful resources

• https://dribbble.com/shots/14332639-Case-Management-Knowledge-Management-System
• https://unicodeplus.com/
• http://www.amp-what.com/unicode/search

Install Passport.js and set up authentication/authorisation.

Definition of done

• Authentication is set up
• Authorisation is set up
• Registration form is implemented
• Login form is implemented

Subtasks

Backend

• Install Passport.js
• Create User model in MongoDB
• Create API endpoints for registration
• Create API endpoints for login
• Add check for duplicate usernames
• Add check for duplicate email addresses
• #58

Frontend

• Create Auth page (which will hold either the registration or login forms)
• Create registration form
• Link to backend
• Create login form
• Link to backend
• Standardise backend error message codes using Firebase as a model and implement dictionary on front end to decode them (e.g. auth/email-already-in-use)
• Handle client- and server-side errors the same way
• Redirect to Login route if not authorised (route guard)
• Add Logout button
• #56
• #57

Future work identified

• #60
• #61

Acceptance criteria

• N/A

Useful resources

• Passport.js
• Firebase errors

This will be used to simulate the backend so the frontend can be progressed.

Definition of done

• json-server can be queried for data

Subtasks

• Install json-server as dev dependency
• Create db.json in client
• Add script to package.json
• Add API call to server to GET heatmap data and render

Acceptance criteria

N/A

Useful resources

• https://www.npmjs.com/package/json-server

Definition of done

Days should be added via a modal and and removed via the Heatmap if the user changes their mind.

Subtasks

Backend

• Create DELETEfor Day route
• Create removeDay function in Day controller

Frontend

• Turn MyDay form into modal in the Dashboard
• #63

Acceptance criteria

• User can DELETE a day from Dashboard modal using X icon
• User can PUT (edit) a day from Dashboard modal using pencil icon

Future work

• #64

Useful resources

• Icons
• Tailwind modal example

Multiple ratings can be added for a given day.

New days should only use POST, updated days should only use PUT.

Allow the user to choose an emoji rather than a score for the current day.

Definition of done

• Replace scores with emojis (#4)

Subtasks

• Replace MyDay scores with emojis
• Show emojis on Heatmap
• Modify Heatmap formatting to ensure responsive design

Note: future enhancements moved to #45.

Acceptance criteria

N/A

Useful resources

• https://dribbble.com/shots/14332639-Case-Management-Knowledge-Management-System
• https://unicodeplus.com/
• http://www.amp-what.com/unicode/search

Each user should be able to see only their own Day objects, and interact with them.

Definition of done

• Details can be recorded for the current day and saved to the database for the current user
• A user cannot edit another user's Day objects

Subtasks

• Modify daySchema to add a reference to the current user
• Update each method to ensure that for each day, only the correct user can:
  • POST
  • GET
  • DELETE

Useful resources

N/A

• Modify Dockerfile.server to remove build scripts for frontend
• Create a Dockerfile.client for the frontend and add build scripts
• Ensure frontend port is set correctly
• Check and confirm environment variables
• Update nginx configuration to serve frontend

When the user clicks the text links, navigation to the next page is successful.

Clicking anywhere in the highlighted area of the link should navigate the user to the next page.

Create a README for the project, including:

• About the project
• Built with
• Getting started
  • Prerequisites
  • Installation
• Roadmap
• Contributing
• Licence