This project is aimed at challenging and enhancing my Next.js skills, and it involves developing a personalized time tracker, akin to commercial tools like Clockify.
The current state of the application serves as a debugger for the underlying structure. It primarily deals with times and dates, which can be error-prone.
At this stage, the focus is on prototyping the core model for the timer. The approach is centered around the belief that the truth lies in the stamps, and the rest of the information generates accordingly. The database specifically stores activities, user profiles, and stamps.
- Activities: Each activity has an associated icon and color, e.g., Sleep, etc.
- Stamp: Signifying the start and stop, each stamp has an associated activity and timestamp.
- Interval: Defined by a starting stamp and ending with a stop or a new start.
Given the diverse client-side processing requirements, a context-based approach is adopted, leveraging Zustand. However, there are challenges with dependencies between stores, currently hindering the app's functionality.
The Index context is introduced to bring order among the dedicated contexts.
-
Stamps and Activity Context: Simple contexts that hold arrays.
-
Intervals Context: A more complex context that filters stamps, eliminates redundancy, removes quickly updated stamps, and crucially, creates the interval array based on the stamps.
The backend, implemented using Next.js, follows a straightforward structure. The API routes are defined in route.js.
The API endpoint fetch("/api/activities") performs a GET request. Notably, Prisma is used to retrieve user activities.
The current frontend may lack visual appeal, but it successfully updates counters every second.
Regular components were initially responsible for data generation, but this responsibility has been shifted to the Index context.