Focusbeacon

Session statistics & productivity dashboard for Focusmate users

View demo · Bug report · Feature request

Technologies

Focusbeacon uses the Backend for Frontend (BFF) pattern for user authentication using OAuth 2.0, with Focusmate as the identity provider (IDP), and for handling data processing.

Backend

• Python with Pandas (data processing)
• FastAPI (API endpoints)
• Supabase (Postgres database)
• Vercel (hosting)

Frontend

• TypeScript (static typing)
• React.js (UI library)
• Next.js App Router (server-side rendering)
• TailwindCSS (styling)
• Tremor.so and shadcn/ui (pre-built UI components)

Getting started locally

1. Clone this repo to your local machine

git clone https://github.com/qu8n/focusbeacon.git

2. Navigate to the project directory

cd focusbeacon

3. Ensure the following language versions are used in your local environment:

• Node.js (v20.x)
• Python (v3.12)

4. Install packages with npm

npm install

5. Create a Python virtual environment

python3 -m venv venv

6. Install Python dependencies

pip install -r requirements.txt

7. Create an .env file in the root directory following the .env.example template and fill in the required values

cp .env.example .env

8. Activate the Python virtual environment

source venv/bin/activate

9. Run the app in development mode. This command will start the FastAPI server and the Next.js server concurrently

npm run dev

Contributing

By default, contributors will not have access to the Focusmate OAuth login nor production database. If your contributions require access to these, please reach out to me here. Meanwhile, you can still use the demo view to test your changes.

If you have a suggestion that would make this better, feel free to fork the repo and create a pull request. I'm also happy to chat over a Focusmate session to get you started with the codebase.

Update Supabase types using the CLI

Initialize a local Supabase project: (only needs to be done once)

npx supabase login
npx supabase init

This will create a supabase directory in your project.

Automatically generate TypeScript types for your Supabase tables:

npm run supabase-typegen

Note that this script only works on Linux/MacOS because of the way it accesses .env file.