tasktick's Introduction

TaskTick

Welcome to TaskTick, your go-to todo application designed to simplify task management. Built with the latest web technologies including Next.js, SCSS, Redux, MongoDB, and NextAuth, TaskTick provides a robust platform for users to create, edit, delete, and mark tasks as completed. It's an excellent project for beginners looking to get hands-on experience with these technologies.

Why TaskTick?

TaskTick stands out for its simplicity and ease of use, making it an ideal starting point for those new to web development. By contributing to or using TaskTick, you'll gain practical experience with:

Building applications with Next.js
State management with Redux
Styling with SCSS
Authentication with NextAuth
Database management with MongoDB

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Environment Setup

.env.local

You need to get github auth token from your github account( in settings/developer settings/oAuth Apps)
You need to get google auth token from your google account(https://console.cloud.google.com/apis)to Create OAuth client ID
Is it hard? A youtube video(https://www.youtube.com/watch?v=MNm1XhDjX1s) will help you, start from (0:25:39) Setup built-in OAuth Provider - (Google / GitHub).
You need to get mongodb connection string from your mongodb account(https://www.mongodb.com/)

Welcome to TaskTick! TaskTick is an intuitive todo application designed to help you effortlessly manage your tasks. Built with the powerful Next.js framework and bootstrapped with create-next-app, TaskTick offers a seamless experience for creating, editing, deleting, and marking tasks as done. Our application incorporates SCSS for sleek styling, Redux for efficient state management, MongoDB for reliable data storage, and NextAuth for secure authentication.

Contributing to TaskTick

🌟 First off, thank you for considering contributing to TaskTick! 🌟

We're excited to welcome contributions from everyone. Whether you're fixing a bug, adding a new feature, or improving our documentation, every contribution is valuable.

How to Contribute

Reporting Bugs

Use the GitHub Issues tracker to report bugs. Please check existing issues to ensure the bug has not already been reported
When creating a bug report, be as specific as possible. Include steps to reproduce the issue, the expected outcome, and the actual result.

Suggesting Enhancements

For feature requests or enhancements, use the GitHub Issues tracker to create a new issue.
Describe the suggested feature in detail, including how it should work and its potential benefits to TaskTick.

Pull Requests

Fork the repository and create your branch from main. Install dependencies and ensure the project runs locally on your machine.
Follow the coding standards and guidelines provided in this document.
Write clear, descriptive commit messages and include relevant issue numbers if applicable.
Open a pull request with a detailed title and description, explaining what the PR does and why.
Respond to any feedback on your pull request.

Coding Standards

Write code in a clear and understandable manner.
Follow existing code conventions and styles.
Use meaningful variable and function names.
Include comments where necessary to explain complex logic.

Getting Started

Ensure you have Node.js and npm/yarn installed.
Clone the project and install dependencies using npm install or yarn install.
Check the README for instructions on how to run the development server.

Questions?

If you have any questions or need further clarification, feel free to reach out by creating an issue in the GitHub repository. We'll do our best to respond promptly.

Thank You!

Your contributions to TaskTick make a significant impact on the project and the broader developer community. We appreciate your efforts to help improve and grow TaskTick.

tasktick's People

Contributors

Stargazers

Watchers

tasktick's Issues

The website logo is not displaying on the login and registration pages.

Project: archive project, and show arhived projects in MyProjects page

Error message when running develop branch

Tasks search functionality

The position of the circular icon on the left side of the top task is too high when scrolling through the task list.

Update all instances of the test user "johndoe123" in the project to verified actual users.

Bugs in the addTask module for new tasks

Under 'Today,' the date should default to today.

Adjustment for different size of resolution

Task Detail Page - Edit side detail

Edit project
Edit due date
Edit tags
Edit priority

Todolist: add section function

Project page： Add board

add
edit
delete

Iterate the homepage.

NewProject.js : add Edit project function and delete project

Standardize and optimize the styling of the registration and login page.

Add Task in the Navbar

After login, the login page navbar CSS need to be adjust

Schedular: change due date

Filter & labels: the detail page for the labels

When you click the lable link in the Filter & labels, it should open the page show all tasks of that label

The task details page content cannot be edited or modified.

Task Detail Page - Edit task title and description

Delay causeed by Notification

After change the date in Schedular, It need wait for 'notification time' to make the change happen, Schedular card close and the date shown in SingleItem change.

THE CHANGE SHOULD HAPPEN IMMEDIATELY. Only the notification should wait for the time, not the Schedular and SingleItem.
Plz fix.
@zli213

The outer circle style around the checkbox on the task details page is not displaying correctly.

New task creation box problem.

Default comes with two tags, as shown in the figure below, which need to be removed.
When creating a new tag, adding a space does not automatically break the tag boundary, and the orange highlight will continue indefinitely. Encountered the following error when trying:
The text box still highlights the text in bold even when the tag keywords are not triggered.
Clicking the add button does not produce any response.

Add a third-party account registration module to the registration page.

Wrong place of tasks in project page

The task bb2 belongs to the project 'Web Development' without a board. It should be placed just below the title 'Web Development'.

React Rendering Warning: Attempting State Update on CheckBoxButton Component During Rendering of a Different Component (ClientLayout)

In develop branch, I encountered a warning from React in the console, indicating that we are attempting to update the state of the CheckBoxButton component while rendering the ClientLayout component. The specific warning message is as follows:

app-index.js:39 Warning: Cannot update a component (CheckBoxButton) while rendering a different component (ClientLayout). To locate the bad setState() call inside ClientLayout, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
This warning typically signifies that a state update is occurring during the rendering process of a React component, which violates React's design principles as rendering should be a pure function of props and state, without side effects like setting state.

Steps to Reproduce

Start and run the application in the project.
Navigate to a page involving the ClientLayout component.
Observe the above warning appearing in the browser console.

Expected Behavior

The component should update its state without violating React's rendering principles, meaning no state updates during the rendering process. Expected no warnings to appear, and the application runs smoothly.

Actual Behavior

In practice, while rendering the ClientLayout component, we attempt to update the state of the CheckBoxButton component, leading to the React console throwing the warning mentioned above.

Possible Solutions

Move the logic involving state updates to the useEffect hook, ensuring state updates occur after the component mounts.
Review any setState calls within the ClientLayout component to ensure they are not made directly within the component's rendering path.
Use the useEffect hook for any state updates dependent on the component's rendering results, ensuring these updates do not occur directly within the rendering function or path.