Chronos Frontend
Overview - Chronos App
Summary
Web App for time and task management for personal productivity! Frontend built with Next.js 14 (TS) + Tailwind CSS. Backend Nest.js (TS) + JWT Auth and password Hashing.
🌐DEMO LIVE - Click here to check it out on the web!📌 Features & Challenges solved
Responsive page
The page was developed responsively, adapting to different screen sizes and devices. This ensures a consistent and pleasant experience for users, regardless of the device they are using.
Automatic login & Authentication with redirect to previous page (Adittionaly Google login in progress)
When the user signs in and closes the app, leaving the website, closing the browser or turning off the computer, the user will be logged in automatically and redirected to the last accessed page/tab.
Create, Read, Update and Remove (CRUD) tasks
You can add, edit and remove tasks on different pages. Each task has a title, description, scheduled day to do, tag, level of priority and urgency.
Calendar Tab (filtered tasks by day)
The calendar page shows the final days of the last month, the days of the current month, and the initial days of the next month, and it's filled with the user's tasks for each scheduled day. The user can also edit and delete tasks from that page.
Tasks Priorities Tab (filtered tasks by importance X urgency)
Tasks filtered and grouped based on importance and urgency were grouped in different visualization areas labeled "now," "later," "delegate," and "discard".
Pomodoro timer
A simple pomodoro cycle with inputs to receive custom timers of focus, breaks (short and big), and the number of cycles. With the start, pause, resume and reset buttons.
Account settings (WORK IN PROGRESS)
Configs like add personalized tags, change user's password, and even customize the theme of the app based on user preference of main and secondary colors.
🛠️ Tools used
Running locally
Clone it
git clone https://github.com/lucasKoyama/chronos-frontend.git
Go to project's folder
cd chronos-frontend
Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
Wanna learn about Next.js 14?
Checkout the Gist that I did during this frontend development!
Authors
