Creating a reminder function, making sure important deadlines stand out in a nice way to let users know when tasks are due.

We need to implement the EditorJS editor as a Svelte component in that it is reusable and satisfies the following requirements:

1. Can render content accordingly
2. Load content from the data base
3. Save content to the data base

Continuation from #19 the main page has to be implemented.

The main page is the entry point of our app from where the user is able to navigate to various features of our app.
The content of the main page should serve as an introduction to the application with a representation of the available features and noteworthy aspects of our app.

We can collect inspiration from these apps:

• https://www.notion.so/
• https://appflowy.io/

Create a wireframe concept of the login page and determine necessary parameters needed for a user login.

It is probably a good idea to implement this one (#4) first.

Concrete implementation:

1. New user can be created by filling out a valid register form
2. Successful register creates a new user in the user collection (pocketbase)
3. User is able to login successfully with his previously created credentials

Create a wireframe concept of the registration page and determine necessary parameters for a user registration.

Users can easily upload images from their devices and insert them into various sections of the application, enhancing content visualization.

Users should be able to authenticate with their credentials to login. If a user has no account he is able to create one and then be able to login.
The user is then able to view his created notes, create a new one or delete existing ones.

provides users with a customizable calendar interface, allowing them to view and manage tasks for each day efficiently. Users should be able to navigate through dates, view detailed task information, and easily add, edit, or remove tasks for specific days

To store notes in the pocketbase back end a structure (migration) is needed which satisfies the following requirements:

• User table has a relation to the notes table
• Notes table contains the following columns:
  • PK or unique id of a single note
  • FK for user
  • Title of note
  • Content of note
  • Creation date
  • Last edit date
  • Column(s) for referencing additional data e.g. pictures, links, ... this has to be defined separately, what exactly is needed has to be studied more closely and by looking up the available editorjs plugins.

Currently running pnpm dev leads to the following error message:

error when starting dev server:
file:///C:/Users/nickm/OneDrive%20-%20FH%20Technikum%20Wien/2.%20Semester/ITP/Elevate360/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/vite-plugin-svelte/src/index.js:3
import { svelteInspector } from '@sveltejs/vite-plugin-svelte-inspector';
         ^^^^^^^^^^^^^^^
SyntaxError: Named export 'svelteInspector' not found. The requested module '@sveltejs/vite-plugin-svelte-inspector' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@sveltejs/vite-plugin-svelte-inspector';
const { svelteInspector } = pkg;
   at ModuleJob._instantiate (node:internal/modules/esm/module_job:134:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:217:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
    at async load_config (file:///C:/Users/nickm/OneDrive%20-%20FH%20Technikum%20Wien/2.%20Semester/ITP/Elevate360/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/core/config/index.js:70:17)
    at async sveltekit (file:///C:/Users/nickm/OneDrive%20-%20FH%20Technikum%20Wien/2.%20Semester/ITP/Elevate360/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/exports/vite/index.js:148:24)
    at async Promise.all (index 0)
    at async asyncFlatten (file:///C:/Users/nickm/OneDrive%20-%20FH%20Technikum%20Wien/2.%20Semester/ITP/Elevate360/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:12997:16)
    at async resolveConfig (file:///C:/Users/nickm/OneDrive%20-%20FH%20Technikum%20Wien/2.%20Semester/ITP/Elevate360/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:67756:29)
    at async _createServer (file:///C:/Users/nickm/OneDrive%20-%20FH%20Technikum%20Wien/2.%20Semester/ITP/Elevate360/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:64370:20)
    at async CAC.<anonymous> (file:///C:/Users/nickm/OneDrive%20-%20FH%20Technikum%20Wien/2.%20Semester/ITP/Elevate360/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/cli.js:762:24)
 ELIFECYCLE  Command failed with exit code 1.

It is currently unclear what causes this... I am investigating this right now.

Create a wireframe concept of the Calendar Interface

create a sktech of the To-do list Interface

Implementing an editor which can be used at different pages, so it should be modular and independent. The editor can be used for example for taking notes. The editor should come with several inline markup features and is resizeable. A wireframe design is already done in the previous GItHub Issue.

Implement a "Focus Mode" feature that enables users to enhance productivity by setting up dedicated work intervals similar to the Pomodoro Technique. Users can specify a duration for focus sessions, during which distractions are minimized, and productivity is maximized.

To represent our application we need logos:

1. Top left corner logo
2. Main page/landing page logo - something a little bigger
3. Favicon for the browser tab

Create a wireframe concept of the editor, which is used for every text input and determine necessary features of this editor.

The menu serves as a more detailed navigation element compared to the navigation bar. It should link the different features and enables access to settings and further information about the webpage. The menu is already designed in wireframe in the prvious GitHub issue.

a feature that enables users to manage their finances effectively by tracking income, expenses, and savings. The budget tracker should provide users with a comprehensive overview of their financial status.

Continuation of #15.

The navigation bar serves as global element which stays at the top of every page the user navigates to. The navigation bar is best implemented in the +layout.svelte which is then served at the top of all pages.

The navigation bar represents the state of a logged-in/out user so that has to be considered while implementing.

Create a wireframe concept of the menu and determine which elements it should contain.

a feature that allows users to track their daily habits, helping them to establish and maintain positive routines. The habit tracker should provide users with a visual representation of their progress, allowing them to set goals, monitor streaks, and receive reminders to stay on track.

Continuing from the design (#20) the login functionality will be implemented.

The underlying issue (#29) needs to be implemented first to utilize a uniform way of accessing the auth API which pocketbase provides.

Concrete implementation:

1. User is able to login by providing a username/email and password
2. User successfully authenticates and will receive a session in the form of a cookie which is passed on for the subsequent requests to the API
3. Ensure there is an easy way to check for an authenticated user in the front end

Afterwards we should create a simple page/route which is only accessible for the authenticated user otherwise the user should be redirected to an error page or something similar.

Setting up the basic layout of the to-do list in HTML, which includes adding sections for displaying tasks, a field for entering new tasks, and a button for submitting tasks.

Create a wireframe concept of the user profile page and determine necessary parameters for displaying users attributes and preferences.

Create a wireframe concept of the search bar and determine how the search bar should work.

Notes are going to be stored in JSON so this should be fairly easy to serialize and store in the database.
EditorJS documentation regarding this: https://editorjs.io/saving-data/

Create a navigation bar and determine which elements it should contain.

Elevate360 is in its core a webapp - therefore the following two frameworks lay the groundwork for the core functionality:

• pnpm - to be able to work with NodeJS
• Pocketbase - which contains our back end functionality
• Svelte 5 & SvelteKit - which are our front end frameworks and is the interface to our back end

Goal of this is to have a basic project setup which is reproducible, can be executed and every project member is able to develop on his own.

Helpful links:

• https://github.com/jianyuan/pocketbase-sveltekit-auth
• https://github.com/spinspire/pocketbase-sveltekit-starter
• https://fireship.io/lessons/pocketbase-chat-app/

To list the available notes of the currently signed in user an endpoint is needed which should return the needed data.
The needed data is probably:

• ID which can then be used to access the contents of the actual note to load
• Metadata: creation & last edited date

See #41 for further information.

Implementing the deadline functionality, including adding fields for deadlines and the corresponding JavaScript functionality to manage them.

Create a wireframe concept of the main page and determine content to display on this page.

Continuation of #16.

The search bar should serve as a helpful utility for finding any text in the available notes of the user. Obviously there is back end logic to implement to query the database for the search parameter. Additionally a place to display the search results is needed. This feature needs more refinement in separate issues.

Note - I found a simple implementation for a full-text-search with pocketbase maybe this becomes useful in the future:
pocketbase/pocketbase#3807

We need some kind of list component to display all the available notes of the current logged in user.
Something fairly simple should do the trick to render the needed data - see #42