Broney: The bro that helps you manage your money

This tool is made up of two applications, a first web developed with Remix and a second mobile developed with Expo. We have also packaged TypeScript that contains the business logic shared between these 2 applications.

Stack

• Monorepo with Nx
• Mobile App with Expo
• Web App with Remix
• Testing with Vitest
• Style with Tailwind for the Web and twrnc for Mobile
• Animation with Framer Motion for the Web and React Native Reanimated for Mobile
• Web app deployment with Netlify
• Database, authentication, etc. with Supabase
• Code formatting with Prettier
• Code validation with ESLint
• CI/CD with GitHub Actions
• State management with Zustand
• Form management with React Hook Form
• Type validation with Zod
• Logging with Sentry
• Translations with FormatJS
• Date utility with date-fns

Style Guide

• Logo font: Inter Tight
• Gradient colors: #F44336 (red) #66BB6A (green) 45°

Features

V0 - MVP

• Set up storage (react native mmkv for mobile and localStorage for the web)
• Manage categories (list, add, modify and delete)
• Manage accounts (list, add, modify and delete)
• Manage a account's transactions (list, add, modify, and delete)
• Authentication with Supabase
• Make the entire app dynamic with Supabase

V1

• Manage an account's recurring transactions (list, add, modify, and delete)
• Manage account-to-account transactions (add, modify, delete)
• Filter transactions (by account, category, and period)
• Display monthly projections (how much will be left in the account at the end of the month after all recurrences and transactions planned before the end of the month)
• Manage assets (list, add, modify, delete, share, and link accounts)

V2

• Link the account with the bank APIs
• Statistics (to be defined)
• Dark mode
• Notifications
• Choose app icon
• Business plan
• Rate the application
• Onboarding
• Offline mode

Data Model

• Wallet, a wallet that has a negative or positive balance (for example, you can have "Julien's Main Account Wallet" which has a positive balance of 1000€)
• Category, categories used to specify the context of the transactions made (for example, you have categories "Home", "Restaurants" and "Entertainment")
• Transaction, transactions are linked to a wallet and a category to know where the money is transferred (for example, you have a transaction from the "Julien's Main Account Wallet" of 50€ towards the "Restaurants" category)

Project Structure

• apps
  • mobile : our React Native application developed with Expo
  • web : our React application developed with React
• libs
  • ui : our React and React Native components used by the web and mobile apps
  • tailwind : our tailwind configuration used by the web and mobile apps as well as the ui lib
  • core : our hexagonal architecture containing the core of our application and all the reusable business logic used by the web and mobile apps

More details about the core lib:

• libs
  • core
    • src
      • wallet
        • __tests__
          • wallet.service.test.ts : the tested business logic
          • wallet.test.ts : the tested business rules
        • domain
          • wallet.ts : the entity representing the wallets and contain the business rules
          • wallet.repository.ts: the contract determining how to manipulate the entity to list, add, etc.
          • wallet.service.ts : the service consuming an implementation of the contract
        • infrastructure
          • in-memory-wallet.repository.ts : an implementation of the contract
          • local-storage-wallet.repository.ts : same
          • supabase-wallet.repository.ts : same
        • user-interface
          • wallet.store.ts : a vanilla zustand store, usable in any JavaScript environment and will be used in our apps
        • category
          • ...
        • ...