organizer-team / organizer

organizer

Project Description

organizer is another approach to creating a simple and easy to use solution for time and task management. The website will provide users with the ability to manage tasks and events on a calendar.

The project is under development. The minimum valuable product must include:

• authorization system
• creating, viewing, editing and deleting tasks
• ability to customize status, priority, link tasks to projects
• CRUD for events
• customizing colors of events and projects
• customizing the frequency of events in the calendar

Further development of the project suggests:

• habit and routine management
• adding a diary function to formally log activity and encourage reflection and mindfulness
• introduction of prioritization, multitasking, goal and motivation management tools
• emphasis on visualization and UX/UI design

Stack

The application built on the MERN stack.

• Mongoose: An Object Data Modeling (ODM) library for MongoDB and Node.js. It's used to model the application data.

• Express: A fast, unopinionated, and minimalist web framework for Node.js. It's used to build the server for the application.

• React: A JavaScript library for building user interfaces. It's used to build the components of the application.

• Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine. It's used to run the server for the application.

Packages also used in the project:

• Jest: A JavaScript testing framework. It's used to write tests for the application.

• Concurrently: A utility to run multiple commands concurrently. It's used to run the client and server parts of the application simultaneously.

For more information, see the docs file.

Code Formatting with Husky, ESLint, and Prettier

This project uses Husky, ESLint, and Prettier to enforce a consistent code style and catch potential issues.

Remember to run npm run setup to ensure that Husky, ESLint, and Prettier are installed and set up correctly. For more information, see the docs file.

Getting Started

First, to setup all the directories run the following in the main directory:

npm run setup

The command will go into the client and server directories and set those up to be ran.

In the client and server directory there are two .env.example files. Create a copy and rename that to .env. Then follow the instructions in those files to fill in the right values.

To run the app in dev mode you can run the following command in the main directory:

npm run dev

organizer's Issues

Migrate Server-Side Application to TypeScript

• Install TypeScript
• Configure tsconfig.json File
• Allow both JavaScript and TypeScript files to coexist during the transition. Update build tools (e.g., Babel) to handle both .js and .ts files.
• Configure ESLint with TypeScript to enforce coding standards
• Update documentation to reflect TypeScript usage

[must-have] Customizing Colors in Tailwind

const colorPalette = { primaryColor: '#9747FF', lighterShade: '#B580FF', darkerShade: '#6E24B1', accentLightPurple: '#C996FF', accentDarkPurple: '#7A1FC3', neutralLightGray: '#F2F2F2', neutralDarkGray: '#333333', };

tailwind docs

[nice-to-have] Enforce Coding Conventions

using Prettier, Eslint and Husky Pre-commit

how to

[must-have] Welcome Page

1. It should have a text about the app and the welcome page
2. It should look nice because it will be the first page that the user sees.
3. There should be two option (button): Guest (demo) and User (for the people who have an account or want to have an account).
4. "Continue as a guest" button should redirects to Home Page with a temporary token (email and password should create in the database for a short time and later it should be deleted automatilcally). The user has no idea about email and password but it will work in the background.
5. "Continue as an user" button should redirects to Email Validation page.

[must-have] Input Validation

1. When a user changes the contents of an input, the state of the corresponding component should change.
2. When the user changes the contents of an item, the form should validate the value.
3. Validation is required for Email, Password, Repeat Password fields.
4. Write unit tests

Prepare the server side of add task feature

• There should be an endpoint getting tasks by user id /api/task/create
• The endpoint must accept a task object in the request body
• The user for whose task is created is determined by the parameter (userId) passed in the request body
• If the user is not detected, the server point returns a bad request
• If the task to be added does not contain a name, return bad request
• If the request contains user_id and name in the task object to be added, return success and the id of the new record in the task collection

[must-have] Navigation buttons

Create a menu at the bottom of the screen containing three buttons:

• the menu at the bottom of the screen is displayed when the client accesses /tasks/ or /calendar/;
• button in the center opens a pop-up menu offering to create a task or event;
• burger button on the left, the "toggleLeftSideMenu" function is executed when pressed;
• calendar button on the right, user is redirected to the CalendarView page at /calendar/ when pressed;
• the calendar icon is replaced on /calendar/ by a button in the form of a filled checkbox, the user is taken to the page with tasks when clicked

As a user I want to see a task-list on the Tasks page

A list of tasks is shown on the tasks page:

Acceptance criteria:

• Users can view a list of tasks.
• Each task item displays the title, time duration, and category of the task.
• The task list is scrollable, allowing users to navigate through a large number of tasks.

[nice-to-have] prepare project description in README

1. Add a short project description and list features
2. Describe the stack, and list the technologies used
3. Set up and run instructions

Hydrate the Add Task component

• The Due Date button reflects the selected date and changes the corresponding state.
• The Colour button opens a list of colors in a pop-up window and reflects the color selected by the user. The button should reflect the selection.
• The Area button opens a list of custom options in a pop-up window, once selected the Inbox label should change to the relevant one.
• The Close button triggers the close function of the window.
  • If the user has entered data in the Name or Description fields, an additional pop-up window opens where the user must confirm the intent to exit.
  • If the Title and Description fields remain unchanged, the window closes without user confirmation.
• If the user has not filled in the Name field, the Send button remains functionally and visually inactive.
• The Send button starts the function of sending the request to the server.

wireframe

try

Setup Storybook

[must-have] Create a database connection

• create an instance in MongoDB
• set up variables in the environment for connection
• add instructions to .env.example

Migrate Client-Side Application to TypeScript

• Install TypeScript
• Configuration tsconfig.json File
• Configure ESLint and Babel with TypeScript

Prepare the scheduler component

• Clicking on the date selection button opens a pop-up window containing the scheduler.

• The planner consists of two separated visually parts:

  1. Quick options list
  2. Calendar month view

• The list of quick options contains:

  1. Today button
  2. Tomorrow button
  3. This weekend button
  4. Next week button
  5. No date button

• The calendar consists of:

  1. Month selector with previous and next buttons
  2. Year selector with previous and next buttons
  3. A table with the days of the selected month and the days of the week in the header

• By default, the calendar opens the current month.

• Missing dates of the previous and next month are added to fill up space.

• The next and previous month's dates, weekends, and days of the week in the table header should be grayed out (partially transparent) to visually separate from the working days of the month.

• The current date should be visually different from the others.

• The component should return the date (change the state of the passed object) according to the user's choice.

• Selecting the This weekend option returns the date corresponding to Saturday of the current week.

• Selecting the Next week option returns the date corresponding to Monday of the following week.

• If you select No date, an empty object is returned.

Prepare the popup component

• The component should be rendered on top of the screen.
• The component must contain the elements passed in for display.
• The component should be visually separate from the environment.
• The component must provide the ability to darken the environment.
• The default component should be placed in the middle of the page.
• The edges of the component must not exceed the area visible to the user.
• Clicking outside the popup's area closes the window.

as a user I want to see the days of the week at the top of the page

Show the week we are in based on the current date.
By default, the selected day is today.
selecting a day ---> The background color of the selected day should be changed.
days must be clickable.

[must-have] husky doesn't prevent from committing

Wrongly formatted code is still allowed to be committed.
This works only on my machine, but doesn't on others

Create Add Task React Component

• The component contains a form to add a task.
• The form consists of the following elements:
  • Task name
  • Description
  • Due date button
  • Colour button
  • Areas selector
  • Close button
  • Send button
• By default, the Description field occupies minimal vertical space but expands with the content. When it overfills and it is impossible to show the content completely, the description becomes scrollable.
• The area selector is set to Inbox by default.
• Buttons are not functional at this stage.

[nice-to-have] Split README and documentation

1. While the title README should contain general information and meanings, dedicate a separate file for documentation that contains technical details.
2. Place it in docs/README.md, move there tech data
3. Describe the structure of the project (code) in the file

[must-have] Create User Page

1. Create the user interface for account creation. This should include fields for the user to enter their

• name
• email
• password
• confirm password

2. The page should be accessible at /user/signup
3. There should be a form confirmation button on the page.
   4. The page should have a link to the login page.
4. Items need to be arranged vertically for the mobile version.
5. Write unit tests.