Finance Budgeting App with AWS Amplify Gen2

#devchallenge #awschallenge #amplify #fullstack

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.

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)

John • May 29

congrate! Ramos

Surya Bhaskar Reddy Medapati • Jun 1

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>
}

FrontEndWebDeveloping • May 24

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! 😊

Travis Ramos • May 28

What bugs did you see?

FrontEndWebDeveloping • May 29

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?