Planner App Frontend

This is the frontend of the Planner App, a task management application built with Next.js, TypeScript, React Query, and Tailwind CSS.

Features

• Task Management: Create, edit, delete, and mark tasks as complete. Tasks include fields like date, priority, name, and completion status.
• Pomodoro Timer: A customizable timer to help manage work and break intervals.
• Time Block Scheduling: Organize tasks throughout the day with a visual schedule.

Future Plans

• Implement mobile and tablet versions of the app: It'll implement the mobile and tablet versions of the app.
• Diary Feature: Users will be able to write daily entries, set a mood for the day, and reflect on their experiences.
• Enhanced Timer: The timer will be moved to the header for constant visibility.
• Fixing bugs: It is necessary to find and fix all the bugs on the application.
• Test covering: The application will be covered with tests.

Demo

You can open demo on Render. ATTENTION! For the demo hosting, I'm using the free plan. The first request on the server might take 1-3 minutes because it launches the server and needs some time to be ready. Sorry! The following requests should be quicker.

Also, I ask you to note that this demo is the static version of the Next.js app because the free plan of the Render service doesn't allow the installation of the non-static version of the Next.js app. I used the Render service because it needs to have the same domain for frontend and backend repos, and the free plan of the Render service provides it. So, on this demo, it doesn't work middleware, redirects and some other features of the Next.js app (e.g., the redirect to the auth page doesn't happen when tokens are expired).

Additionally, at this moment, it is available only in the desktop version of the application. The mobile and tablet versions are coming soon...

Getting Started

First, clone the repository and install the dependencies:

yarn install

Then, run the development server:

yarn dev

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

You can start editing the app by modifying the app/page.tsx file. The page auto-updates as you edit the file.

API Integration

This frontend is integrated with the backend API, which is hosted on Render and can be accessed at: Planner App API. The backend repo

Styling

The application is styled using Tailwind CSS and leverages Tailwind Variants for component styling.

Deployment

The frontend is hosted on Render. The live application can be accessed at: Planner App Frontend.

Contributing

If you have suggestions for improvements or want to contribute to the project, feel free to fork the repository and create a pull request.

Learn More

To learn more about the tools and technologies used in this project, check out the following resources:

• Next.js Documentation - Learn about Next.js features and API.
• TypeScript Documentation - Learn about TypeScript.
• React Query Documentation - Learn about React Query.
• Tailwind CSS Documentation - Learn about Tailwind CSS.