qu8n / focusbeacon

📊 Session metrics dashboard for Focusmate, a virtual co-working platform

FocusBeacon

Unofficial Focusmate metrics dashboard
View Demo · Report Bug · Request Feature

Built with

• Frontend: React, Tremor.so, Headless UI, TailwindCSS
• Backend: Next.js, Supabase's Postgres database, Vercel

Getting started locally

1. Log in to your Focusmate account
2. Navigate to your profile settings
3. Click on Generate API key and save the API key for a later step
4. Clone this repo to your local machine

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

5. Navigate to the project directory

   cd focusbeacon

6. Use the Node version specified for this project

   nvm use

7. Install packages with npm

   npm install

8. Create an .env file in the root directory
9. Enter the environment variables in the .env file

   DEMO_FOCUSMATE_API_KEY="YOUR_API_KEY"
   

10. Run the app in development mode

npm run dev

11. Open localhost:3000/dashboard/demo to view your metrics in the browser

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 on LinkedIn.

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.

focusbeacon's Issues

Resolve missing Next.js plugin in ESLint config

Investigate and resolve the following warning message from the Vercel logs:

{
  "message": "warn  - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config",
  "vercel": {
    "deploymentId": "dpl_iaAPnpxrZvBTSPT1RUBw4JDSTFMm",
    "deploymentURL": "focusbeacon-eq9rmyyhz-qu8n.vercel.app",
    "environment": "production",
    "projectId": "prj_VCvkZxdidURY3SHro23lIsiId39O",
    "projectName": "focusbeacon",
    "source": "build",
    "userName": "qu8n"
  }
}

This Next.js discussion post might be a good start.

Refactor the `Modal` component to be more generic

The Modal component is used to display a popup modal when users click on "About" or "Privacy" on the navbar.

Current state:

// _app.js
...
<NavBar
  setShowAboutModal={setShowAboutModal}
  setShowPrivacyModal={setShowPrivacyModal}
/>

{(showAboutModal || showPrivacyModal) && (
  <Modal
    modalType={showAboutModal ? "about" : "privacy"}
    setShowAboutModal={setShowAboutModal}
    setShowPrivacyModal={setShowPrivacyModal}
  />
)}
...

The mechanism to show either the About or Privacy's content is not generic. There are two setState methods for each content.

Ideal state:
There is a generic Modal component that receives two props: (1) setOpen that dictates whether the modal should open, and (2) textContent that includes the texts inside the modal.

Allow users to take a screenshot of their metrics via UI

Implement some UI (e.g. button) to let users download a single metric or a page in a nicely formatted image.

Backend: set a global context for storing session status

When focusbeacon.com first loads, the NavBar component calls the /api/session endpoint to check whether the visitor is logged in. If they are, it will display a "Log Out" link and, otherwise, a "Log In" link.

Separately, the Dashboard component also calls this same API to decide whether to show the user's stats or redirect them to the landing page for login.

Ideally, the app should make a single call to this API endpoint.

Add tests

Add tests by using a testing framework such as Jest or Mocha that is compatible with React. Focus on more critical components such as Dashboard and its functions, especially functions that calculate metrics and asynchronous operations. At some point, we can set up CI tools to automatically run tests for new PRs.

Sweep: Create a new shared util function for filtering completed sessions

There are currently 8 instances in the codebase where sessions data are filtered to only those that are completed. (To find them, search the codebase for const completedSessions = .)

Todo: create a new generic function called getCompletedSessions() and save it in src/utils to be shared across the codebase.

Convert JavaScript code to TypeScript

All Pull Requests are welcome for this work, whether it is JS-TS conversion of a single file or multiple files. Because TS is just a superset of JS, we don't need to convert all the files at once.

The first step would include the initial setup and configurations, such as installing TS and adding the config file tsconfig.json. If you have any questions, comment below and I'll respond within 24 hours.

Recommended reading:
https://www.sitepoint.com/how-to-migrate-a-react-app-to-typescript

Frontend: add a comma separator for metrics

Right now, numeric metrics don't have a comma separator. For example: 1056 sessions (vs. 1,056 sessions). We'll go with the comma separator instead of period since most Focusmate users are based in the US.

Frontend: add a pie chart that breaks down users' sessions by time of day

Add a pie chart that breaks down users' sessions by time of day: morning, afternoon, evening, and overnight:

• Morning: 6:00 AM to 11:59 AM
• Afternoon: 12:00 PM (noon) to 5:59 PM
• Evening: 6:00 PM to 8:59 PM
• Overnight: 9:00 PM or sunset until 5:59 AM

The Focusmate API provides a user's time zone and their session times in Coordinated Universal Time (UTC). To accomplish this task, we'll need to process these two data points to discern whether their sessions fell into morning, afternoon, evening, and overnight based on their time zones.

Frontend: add a calendar-style chart for session count

Add a calendar-style chart for session count, with darker grids for days with relatively more sessions and lighter grids for days with relatively fewer sessions. This can be accomplished by third-party libraries like Nivo or React Calendar Heatmap, or built from scratch.

General code clean-up and refactoring

This is an open call for implementing better programming practices (e.g. DRY) to any areas of the codebase that are lacking. Any help is welcome.