Settler

Settler is a web application built with Next.js and TypeScript, utilizing the powerful Shadcn UI component library.

Github link

Primarily used for settling after a Poker session.
It translates chips into real-world money using an intelligent distribution algorithm.

A user-intuitive web application built with Next.js and TypeScript, utilizing the powerful Shadcn UI component library.

It seamlessly integrates with the Splitwise API, enabling a superfluous creation and updating of expenses.

Settler using Splitwise's Oauth 2.0 flow fetches groups and group members for a selected group using the signed-in user's access token. It makes an API call to a custom server I built on the Python Flask framework to serve Splitwise-based requests.

        sObj = Splitwise(consumer_key, consumer_secret)
        sObj.setAccessToken(session['access_token'])

        groups = sObj.getGroups()

        # Convert the groups to a JSON-serializable format
        serialized_groups = []
        for group in groups:
            serialized_group = {
                'id': group.id,
                'name': group.name,
                # Include any other required attributes
            }
        serialized_groups.append(serialized_group)

Additionally, Settler implements Passage for secure passkey authentication, ensuring a robust and reliable user authentication mechanism.

Setting up Passage was fairly straightforward. Based on the authentication state, I would decide between rendering the Passage's Login component or my authenticated route "/dashboard".

return (
    <>
      {loading && (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
          {loading && <DotWave color={dotWaveColor}/>}
        </div>
      )}
      {!authenticated && <PassageLogin/>}
    </>
  )

require('@passageidentity/passage-elements/passage-auth');
//...
<passage-auth app-id={process.env.PASSAGE_APP_ID}></passage-auth>

Also uses Supabase integration with Passage to persist user information.

I then instantiate a Supabase client which updates the user's most frequently used Splitwise group for ease of flow. And fetches this every time the user is logged in with Passage.

import { createClient } from '@supabase/supabase-js'
//...
const supabase = createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
    options
  )

The documentation available along with the walkthrough containing the sample project on Supabase's website was exceptionally helpful.

#1Password #BuildWith1Password