An application that allows you to track the hours you have spent working. This is an in progress project.
Click on the links below to check out an explanation of each component of this app.
-
Authentication is handled by Supabase Auth.
-
The database is built with Supabase.
-
Routing is handled with React Router.
-
Data fetching is handled with TanStack Query.
-
The Frontend Framework is React.js using Vite.
The documentation outlines the implementation details of every step of the project.
The components of authentication are found in the SessionContext.tsx file.
This file sets up a context that will store the user's session and be accessible to all pages in the project.
The file also creates a hook called useSession. This hook is a wrapper for accessing the SessionContext.
Lastly we create a component called the SessionProvider that sets up the session and isLoading useStates. The useEffect in the SessionProvider is used to set up an auth event listener which will update the session accordingly.
The frontend file structure is below. Components, context, and hooks are fairly straightforward.
- components
- context
- hooks
- lib - Used for shadcn utilities
- pages - Contains all pages in the application
- router - Contains the router used for routing pages
- supabase - Contains all supabase related files such as initializing clients and API functions
The database is built with Supabase. It is a PostgreSQL database with a an authentication table and a work_logs table that stores users' entries.
The work_logs table is fairly straightforward. It stores every user's log / entry. Each log is associated with it's user through a foreign key. This illustrates a one to many relationship.
Supabase automatically exposes an API that can be used to query a database. I use the Supabase API to write queries to my database.
I chose to use the Supabase API as adding another layer of complexity like a REST API would over complicate the project. I have also encountered latency issues with hosting my own API through free services. Due to these reasons, I chose to use the Supabase API.
-
The icon of this site is sourced from here Clock icons created by Kirill Kazachek - Flaticon
-
The authentication implementation was largely based on this repository.