👉 See the demo at sparsam-app.netlify.app
In times of recession and a low economy, sparsam is just the app you need to keep track of your expenses. Instead of having too little money at the end of each month, it calculates your weekly budget, so you can keep track of your frugal or luxurious lifestyle more easily.
Created by leading experts in the industry (read: two formerly broke students), sparsam is here to change your life! Or at least you finances. And there’s gifs of cute animals, too.
- 💻 automatically calculates your weekly budget based on your monthly earnings and expenses
- 🗒️ lets you define custom spending categories
- 🤓 weekly and monthly view of your budget
- 🍰 beautiful charts of your monthly expenses
- 😻 awesome memes for edge cases
- Frontend at https://github.com/fraulueneburg/sparsam-fe
- Backend at https://github.com/fraulueneburg/sparsam-be
| Name | Description |
|---|---|
| Vite | Bootstrap code |
| React.js | Javascript library for building awesome and fast user interfaces |
| MongoDB: | Non-relational database |
| Express.js: | Backend web application framework for Node.js. |
| Node.js: | JavaScript runtime environment for server-side development |
| Axios | For uncomplicated HTTP requests to interact with the backend |
| React Router DOM | For managing navigation and routing within the app. |
| React Router Hash Link | For anchor links within the app. |
| Chart.JS: | Creates beautiful customizable charts |
| CSS Custom Properties | For easy switching between light and dark mode. And because we wanted to brag a little. |
| SASS | Though we might switch to CSS nesting soon |
| Pico CSS | A lightweight style base. |
| Bulma CSS | We just used the columns part. |
| Feather Icons | For beautiful icons |
| Lipis Flag Icons | … which make those fancy selector fields even more fancy |
git clone https://github.com/fraulueneburg/sparsam-fe.git
npm install mongodb express axios react-router-dom react-router-hash-link chartjs sass flag-icons
- see https://github.com/fraulueneburg/sparsam-be for that
- Install MongoDB 👉 https://docs.mongodb.com/manual/installation/
- Configure MongoDB connection
- start the server:
npm start - go to http://localhost:3000 to access sparsam on your local machine
👉 See the demo at sparsam-app.netlify.app
I’m Wiebke, a Full Stack Web Developer and UI/UX Designer, currently living in Hamburg, Germany.
Usability is a top priority in my work and I am also strongly advocating for (and keep learning about) web accessibility.
Sparsam’s code base was completely revised by me, Wiebke, in 2024. The very first version of the App started out as a final project at the Ironhack Coding Bootcamp in 2023 and was created in a team with Michel Saber.
