Backend
- Python for data processing
- FastAPI for the REST API
- Supabase for the PostgreSQL database
- Vercel for hosting
- PostHog for logging
Frontend
- TypeScript for type safety
- React.js for the UI
- Next.js App Router for routing
- TailwindCSS for styling
For authentication, we use the Backend for Frontend pattern with Focusmate as the identity provider via OAuth 2.0. Focusbeacon is the first and only non-commercial app to be approved by Focusmate for this purpose!
- Clone this repo to your local machine
git clone https://github.com/qu8n/focusbeacon.git- Navigate to the project directory
cd focusbeacon- Ensure the following language versions are used in your local environment:
- Node.js (v20.x)
- Python (v3.12)
- Install packages with npm
npm install- Create a Python virtual environment
python3 -m venv venv- Install Python dependencies
pip install -r requirements.txt- Create an
.envfile in the root directory following the.env.exampletemplate and fill in the required values
cp .env.example .env- Activate the Python virtual environment
source venv/bin/activate- Run the app in development mode. This command will start the FastAPI server and the Next.js server concurrently
npm run devInitialize a local Supabase project: (only needs to be done once)
npx supabase login
npx supabase initThis will create a supabase directory in your project.
Automatically generate TypeScript types for your Supabase tables:
npm run supabase-typegenNote that this script only works on Linux/MacOS because of the way it accesses .env file.
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.