Dayboard. Calendar. Todo list.

• A calendar for myself and friends.
• Preview UI - Netlify (without server!) https://dayboard.netlify.app

Quick start

1. Install client and server:

cd client && pnpm i && pnpm run dev

cd server && pnpm i && pnpm run dev

Quick authorization

• Login: pocketbook.love24@gmail.com
• Password: midapa24

Preview

UI

Auth page

Main page

Panel page

Panel page (not found day)

Story

I've used different calendars and todo lists before, but i didn't feel inspired to use them. Just a soulless list that forces you stop your chilling and do something.

• In this application, I focus on futuristic and living design.

• After registration -> authorization, the user will be prompted to create a template to be used in subsequent days. Every day a new todo list is created according to the template and the user fills it out by solving scheduled tasks.

• The user can at any time to get statistics by day, by range days in the form of a radar chart. It displays entire information about completed tasks for the selected period and displays the dynamics of task completion.

• Naturally, the user at any time can edit statistics for any of the past days, create a new one or delete an old one.

Todo

There is still a lot to do, but i don't give up.

In general terms

• Able to signup
• Able to login
• Auth validation
• Notifaction about error/success authorization
• Able to create/change default template
• Able to change todo tasks in day
• Able to change day as current day
• Radar chart for displaying solo day information
• Radar chart for displaying range days information
• Linear chart for getting info about specific task (only for range days)
• Error notifaction about missing day/s todo
• Datepicker component for selecting solo day, range of days
• UI effects for datepicker
• Theme switcher (dark/light mode)
• Mobile version
• PWA
• i18n localization
• ...

In specifically terms

• Datepicker component (reusable)
• Tab component (reusable)
• Modal component (reusable)
• Pagination (reusable)
• Select (reusable)
• Input (reusable)
• Vitest for core logic
• Testing-Library for UI component

Features

• Atomic arhitecture
• Composition API & Composables
• Functional core, Imperative shell
• Function ref
• Reactivity Transform

Stack

• Vite
• Vue 3
• TypeScript
• Pinia
• Tailwind CSS
• Vitess Light
• Vue Chart 3
• Vee-Validate
• Express.js
• Mongoose
• JWT