saifahn / expenseus Goto Github PK

https://nextjs.org/docs/basic-features/layouts

Overview

I think it would make more sense to have the WebService as its own package.

However, it has to import some things such as the User, ExpenseDetails, Expense etc., and these are also imported by other packages.

These should probably be split into two different packages, and the logic for the webservice stuff can be kept separate.

Overview

I wrote a whole thing about followers in Redis and I accidentally deleted it. That was super not great.

It was basically talking about whether or not to keep a personal timeline for each user and update it upon follow/unfollow and post. I didn't think it made sense beforehand, but it's actually reasonably good to keep a sorted timeline that you can just fetch from.

The alternative is to fetch from several different sorted sets and use the scores to sort them. There is a WITHSCORES option on ZRANGE.

ZUNIONSTORE and ZADD could be used for adding, and ZREM for removing.

Maybe I should fork the project. One half should be used for the real, practical app, and one to replicate the Twitter Clone

As far as the connections thing on Expenseus goes, that needs a different approach.

• As a user, I want to be able to create a shared expense tracker with someone so I can split expenses with them.

Example flow

1. Amber creates a shared expense tracker with Bluebell.
2. Bluebell accepts.
3. They are both shown a new shared expense tracker.

I should probably create a new issue for this.

Overview

Ideally, I should just use one DynamoDB table to hold my data, and I would model the data so that it can be queried efficiently.

Some resources:

• An introduction to DynamoDB data modeling
• Example of Modeling Relational Data in DynamoDB

UI

• Show a list of the user's most recent transactions, including shared transactions
• Each transaction is displayed in a transaction card
• A transaction card could show:
  • Category
  • Amount
  • Date
  • Personal/Shared tracker name
  • Title
• Potentially also show personal expenditure in the last 7 - 30 days

High level implementation

• Get all transactions from the user, including shared transactions
• List them in reverse date order

This is one of the first pieces of information we can put about the expense - it can give us an idea of what kind of expense it was right from that.

I think it would be nice to even make it an autocomplete option or something. This should probably come later though, maybe with some database migration.

Overview

I think this page actually technically exists, under the Expenses tab...

Maybe I should leave this for now.

I'm not even sure what this would do. Some kind of CI/CD?

But probably not for now... I haven't even decided on the stack I want to end up at.

https://hyperui.dev/

Overview

There's a little bit of exploration at #17.

This feature is also very important for its original intended use case.

It unfortunately is also one of the more complicated ones...

Thoughts

• There should be a "percentage split" field
  • This can be 50/50 by default

Overview

• Get user id from session
• Create expense with that user id

UI

1. Go to SHARED section
2. Click the desired shared tracker to open it
3. Click the analysis tab
4. Click the calculate amounts owed button

High level implementation

For 2 people

• Get all transactions from the tracker that are not settled
• Iterate through the transactions and keep a running tally of totalOwed
  • The tally should be based on the logged in user
  • Percentage split should be based on the user who paid
    • Check if payer == loggedInUser, then look at the percentage split
    • If the logged in user is the payer, add to the totalOwed, otherwise subtract

user := loggedInUser
defaultSplit := 0.5
totalOwed := 0
for _, t := range transactions {
  isPayer := transaction.payer = user
  split := transaction.split || defaultSplit
  if isPayer {
    totalOwed += transaction.amount * split
  } else {
    totalOwed -= transaction.amount * split
  }
}

• Return an object with the amount based on the logged in user

    {
      "debts": [
        {
          "debtor": "otherUserInTracker",
          "debtee": "loggedInUser",
          "amountOwed": -152523
        }
      ],
      "numberOfTransactions": 23
    }

For 3+

• still needs to be worked out
• keep a running tally of how much everyone paid
• do a greedy algorithm to calculate the last amount of times people have to pay
• return an object with who pays who

• After your app works locally, log in to the EC2 instance you created via SSH
• Set up Redis on the instance (installed variant or docker variant is okay)
• No need to install minio on the EC2 since it has direct access to AWS S3
• Install your app on the server
• Install nginx for TLS termination (HTTPS). For SSL certificate, use Let’s Encrypt.
• Do not use Go's standard library's HTTP package for TLS termination
• Finally, put your app behind nginx and have the app start on instance startup by using systemd, supervisord, etc.

Overview

I made the scripts without the correct understanding of how environment variables work. I can clean them up.

Overview

精算？

To begin with, it can just calculate all the expenses up until now.

Pressing "finish" would mark all of the current expenses as settled.

Future work

• Show analysis of the settle up amount
• Uncheck expenses to be settled

Overview

In the future, it would be great to go serverless and not have to run a database on a server. I think DynamoDB would be a good option, and pretty good as a stepping stone in moving off of AWS.

Overview

Currently, the API related code is defined within the React components. It would be nicer to have it in its own place.

This probably should be split into a few issues:

• Return errors with messages/payloads from the back end
  • Helps specify the kind of error
• Make a centralized error handling part of the front end
  • Currently, each fetch request needs to handle things

References

• How to handle errors from back-end in front-end and different languages
  • This is a bit more about localization, which I also need, but it talks about adding error codes for each error and then converting the codes based on a table to the right error message based on the language.
• Graceful error handling in REST-driven web applications
  • some tips, adding payload to error responses

• Go through the types of expenses in the apps I currently have and note down the different categories.

Japanese

• Osidori
• Zaim
• [ ] Tricount

English

• Splitwise
• [ ] Settle Up

• Make your own broad categories with sub-categories
• Think of how to represent these categories
• Add the new type struct to expenses
  • TDD?

This is like the most important part of the expenses!

UI

1. Click on the shared tracker
2. Click on the analysis tab
3. Click on past month analysis
4. A chart with total spending by category should be displayed

High level implementation

• Get all transactions from the shared tracker
• Calculate the total cost and cost per category, return it to the front end

// build out empty struct of category amounts?
totals := TotalByCategory{}

for _, t := range transactions {
  totals.total += t.amount
  totals[t.category] += t.amount
}

return totals

The ones I'm currently looking at are:

• Format.js
• i18next

Will need to do a bit more research into the ups and downs of each.

If I make the Layout component do the login check, then it will work on every route, even if the app is not acting as an SPA.

I can also show the "Sign in" button on each page more easily.

I should also add the Log out button to the nav instead of only on the Home page...

Overview

It would be nice to connect things up to see the server in action.

It doesn't need to be anything fancy.

I'm considering Next.js with TailwindCSS. I'd like to see how Tailwind holds out in a project.

Next.js because I haven't used it before, and I want to play around with some newer version of React. I would try Svelte otherwise.

Ultimately, I'd like to have this set up as kind of a JAMStack project, and Vercel looks reasonable for Next.js?

We can always change things in the future.

Overview

You have to choose your username before you can continue.

For simplicity, you can't change your username?

I would like to display the usernames on the transactions, and this would make it easier 🤔

UI

1. Click on analysis tab in Personal section
2. Click on past month analysis
3. Show chart on spending - total and by category

High-level implementation

• Get all personal transactions between two dates
• Calculate the data and return it for the front end to display

This should be easier than #60 because the calculation doesn't have to deal with anyone else and based on who paid, as personal transactions are always from yourself.

I prefer dark mode.

Look into tailwind dark mode.

Looks reasonable enough, but will have to add in logic to manually toggle between on and off.

Should probably use a localStorage value so it can be saved across sessions and also when leaving and coming back to the app (e.g. when signing in).

Upgrade Tailwind

UI

1. Enter details
2. Press submit

High-level implementation

• Send the data to the back end
• Back end creates new TransactionItem, puts it in the database under PK of USER#<user_id> and SK of TRANSACTION#<new_transaction_id>

UI

1. Press Login with Google
2. Authenticate with Google
3. Choose a username
4. Submit
   5a. Success -> Home page
   5b. Failure -> Please choose another username or start the process again

High-level implementation

• OAuth handshake
• Check if a user with that Google ID exsits in the database
  • If yes, login, store the session cookie
  • If not, redirect to the username page
    • When the username is submitted, check if there is a user with that username
      • If not, create the user, login and store the session cookie
      • If it already exists, return an error

Overview

Three problems to solve:

• No way to login via the interface
• No way to log out
• Login callback doesn't redirect to a logged-in page or anything

• Store expenses in S3

UI

1. Click on analysis tab in Home
2. Click on past month analysis
3. A chart with spending total and by category should be visible

High level implementation

• Get all transactions between two dates that the user is involved in
• Calculate the data and return it to the front end to be displayed

Calcluating total cost of shared expenses

• Separate the expenses by shared tracker
• For each shared tracker:
  • Get the number of users in the shared tracker
  • If users > 2, use 1 / users perecentage split for every transaction
  • If users == 2, use the "payer split" field for the percentage split for each transaction
    • calculated based on whoever paid to make it an easier calculation

Considerations

• how to design the schema so that getting everything from one user will get the shared tracker transactions and also the data associated with the shared transaction?

I wrote some stuff down in the user flows document, but it doesn't seem to be particularly helpful. I'll probably have to watch more about single table database design first.

UI

1. Click on a personal transaction card from the list of transactions.

• This could be from either the Home or Personal screen.

2. The details page is brought up.
3. Press the edit icon if wanting to edit.
4. Enter the new details, submit.

High level implementation

• We might already have the transaction data from the list page.
• Pass it in via props to the details page.
• Update the TransactionItem of PK USER#<user_id>, SK of TRANSACTION#<transaction_id>

Overview

Definitely need to keep track of the date.

• Back end function should take a date as part of CreateExpenses
• Should verify the date on the back end
• Front end should include a date picker - can be the default, default should be the current day

Overview

Currently, the front end and back end will be running from different domains (different ports on localhost locally), so CORS needs to be allowed so that they can communicate with one another.