DEV Community

Cover image for Finance Budgeting App with AWS Amplify Gen2
Travis Ramos
Travis Ramos

Posted on • Updated on

Finance Budgeting App with AWS Amplify Gen2

This is a submission for the The AWS Amplify Fullstack TypeScript Challenge

What I Built

I built an app called SpotMe that helps you manage the amount of money you're spending and saving each month compared to your income. Once you sign up and specify your monthly income and how much of that income you are trying to save each month, you'll be greeted with a dashboard where you can see metrics on spending habits and how much money you've saved to see if you're hitting your savings goal.

Demo and Code

  • You can access the app here.
  • You can also take a look at the source code if you'd like to see how I've built it.

Dashboard view of SpotMe

Integrations

I developed the application using Next.js for the user interface. For authentication and data management, I leveraged AWS Amplify, integrating its connected components to enhance parts of the UI. Additionally, I utilized Tremor to create all the charts and graphs.

Let me know what you think!

If you found this article helpful, subscribe to my newsletter where I'll be sending more content like this directly to your inbox on a weekly basis!

Top comments (7)

Collapse
 
johnboris profile image
John

congrate! Ramos

Collapse
 
surya_bhaskarreddymedap profile image
Surya Bhaskar Reddy Medapati

Hey Ramos,

Your app is great, and I've learned a lot from it. Thanks! Can you please help me with a doubt? If I divide my amplify project into Separate frontend and backend repos as per the Amplify documentation, the frontend team doesn't have access to the server-side amplify folder, which contains the backend schema. However, to achieve type safety, generateClient needs the schema type (example code mentioned below). Is there any way to get types without accessing the Amplify data schema?

import type { Schema } from '../amplify/data/resource'
import { generateClient } from 'aws-amplify/data'

const client = generateClient<Schema>()

export default function TodoList() {
  const createTodo = async () => {
    await client.models.Todo.create({
      content: window.prompt("Todo content?"),
      isDone: false
    })
  }

  return <div>
    <button onClick={createTodo}>Add new todo</button>
  </div>
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
softwaredeveloping profile image
FrontEndWebDeveloping

Hey Ramos. You have a great UI! But, I'm afraid your UX is pretty bad. There seem to be a lot of bugs. Hope this helps! 😊

Collapse
 
travislramos profile image
Travis Ramos

What bugs did you see?

Collapse
 
softwaredeveloping profile image
FrontEndWebDeveloping

Thank you for taking care to make your software quality Travis!

To be frank, there are quite a few bugs I'm experiencing on my end. A good one for starters would be that when I try to add an expense, nothing shows up.

I would be more than willing to do an intensive check of the sight, if your thinking to deploy it longer term. We could get in touch on discord, or any other platform you're comfy with.

Also, what framework did you use for the front-end? How about your backend?

Collapse
 
alejandro_castaneda profile image
Alejandro Castañeda Ocampo

Pretty good, congrats🚀

Collapse
 
travislramos profile image
Travis Ramos

Thank you!