elevate360's Issues
implement calendar functionality
Load existing notes
Budget Tracker
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.
Implement editor
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.
Upload images
Users can easily upload images from their devices and insert them into various sections of the application, enhancing content visualization.
Design login page
Create a wireframe concept of the login page and determine necessary parameters needed for a user login.
Create endpoint for listing notes of a single user
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.
Habit Tracker
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.
Implement Search bar
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
Implement user auth
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.
Implement user login
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:
- User is able to login by providing a username/email and password
- 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
- 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.
Implement reminder functionality
Creating a reminder function, making sure important deadlines stand out in a nice way to let users know when tasks are due.
Setup main project dependencies/requirements
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:
Design and create logos
To represent our application we need logos:
- Top left corner logo
- Main page/landing page logo - something a little bigger
- Favicon for the browser tab
implementing the option to add tasks to calendar
Design Editor
Create a wireframe concept of the editor, which is used for every text input and determine necessary features of this editor.
Focus Mode
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.
add to-do list
Add note title functionality
The user should be able to set a title for his note. Also a default title should be set if the user doesn't explicitly set one e.g. "My note from May 3rd 2024".
Create component for notes overview
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
implement calendar
Storing notes
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/
The following needs to be done:
- Add save button to editor component
- Validate content before storing - see
- Notify user of successful save
- Automatically save note on title or content change
- Warn user if changes could be lost (on view change, etc...)
Implement editing/opening a single note in the editor
The functionality to view/open/edit a note has to be implemented. The notelist component already fetches the needed information (id) to retrieve a specific note.
To implement:
- Endpoint to fetch note contents
- Feed retrieved content into the editor component
- Implement editor route
note?id=noteId
- Transition to editor route
- Implement new note route
note/new
Implement deadline functionality
Implementing the deadline functionality, including adding fields for deadlines and the corresponding JavaScript functionality to manage them.
Implement Main page
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:
Fix non working pnpm dev
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 data base structure for storing notes
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.
Implement user registration
It is probably a good idea to implement this one (#4) first.
Concrete implementation:
- New user can be created by filling out a valid register form
- Successful register creates a new user in the user collection (pocketbase)
- User is able to login successfully with his previously created credentials
navigation bar
Design Main page
Create a wireframe concept of the main page and determine content to display on this page.
Create HTML structure for to-do list
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.
Design Menu
Create a wireframe concept of the menu and determine which elements it should contain.
User Profile Page
Implement Navigation bar
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.
Implement menu
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.
Design Registration page
Create a wireframe concept of the registration page and determine necessary parameters for a user registration.
Design User profile page
Create a wireframe concept of the user profile page and determine necessary parameters for displaying users attributes and preferences.
Calendar with Task Management
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
Design Calendar
Create a wireframe concept of the Calendar Interface
Implement EditorJS as a Svelte component
We need to implement the EditorJS editor as a Svelte component in that it is reusable and satisfies the following requirements:
- Can render content accordingly
- Load content from the data base
- Save content to the data base
Design Search bar
Create a wireframe concept of the search bar and determine how the search bar should work.
Design To-do List
create a sktech of the To-do list Interface
Design Navigation bar
Create a navigation bar and determine which elements it should contain.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.