This app is an implementation of React with Supabase, simply have Authentication and CRUD operation.

Overview

ExpenseApp 💰

ExpenseApp is an app to see you expense history, income history and help you notes what you're buying lately 💰

I built this only on weekend and sometimes at night to spend my lonely time as a Frontend Developer

What's For

This app is an implementation of React with Supabase, simply have Authentication and CRUD operation.

Stack

  • Vite
  • React ⚛️
  • Supabase 🔥
  • TailwindCSS 💨
  • Miscellaneous 🔌
    • Framer Motion 🎞️
    • Jotai 👻
    • Headless UI 🔋
    • React Hot Toast 🔔
    • React Hook Form 📃

Todos

  • Signin
  • Signup
  • Signout
  • Read Expense
  • Write Expense
  • Update Expense
  • Delete Expense
  • Read Expense History
  • Write Expense History
  • Delete Expense History
  • Update Expense History
  • Update User Profile Picture
  • Update User Username
  • Update User Email
  • Update User Password
  • Forgot Password
  • oAuth with Google and GitHub

Develop on your local machine

  1. Register to Supabase
  2. Get your projects' Anon Key and your Supabase project URL
  3. Paste it on .env.file
  4. Create table expense, with 6 columns:
    1. id (uuid) default value: uuid_generate_v4() as primary key
    2. user_id (uuid) relation with user.id
    3. history_id (uuid) mark as unique
    4. created_at (timestamptz) default value: now() mark as allow nullable
    5. title (text)
    6. total_money (int4)
  5. Create table history, with 6 columns:
    1. id (uuid) default value: uuid_generate_v4() as primary key
    2. user_id (uuid) relation with user.id
    3. expense_id (uuid) relation with history.history_id
    4. created_at (timestamptz) default value: now() mark as allow nullable
    5. source (text)
    6. type (text) this actually should be 2(income, and outcome), default value: income
    7. amount (int4)
  6. Create bucket profiles for profile picture
  7. Inside profiles bucket, create folder avatar
  8. Create policies for tables and bucket
    1. soon..

Contribution

PR's are always open

You might also like...
This simple CRUD project (Demo) is developed with React (TypeScript) and SpringBoot REST API (REST Controller).
This simple CRUD project (Demo) is developed with React (TypeScript) and SpringBoot REST API (REST Controller).

This simple CRUD project (Demo) is developed with React (TypeScript) and SpringBoot REST API (REST Controller).

 Todo List CRUD and OAuth with Firebase
Todo List CRUD and OAuth with Firebase

Todo List CRUD and OAuth with Firebase Esta es una app hecha con React y Firebase en la que puedas crear, leer, actualizar y borrar tareas dentro de u

Game-creator - The app with authentication and ability to create different type of games
Game-creator - The app with authentication and ability to create different type of games

Backend: mongDB nodeJS Frontend: pug for JSX stylus react native adaptive design

Crud cadastro de produtos com React

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

A React Application challenge With CRUD (Create, Read, Update, Delete)
A React Application challenge With CRUD (Create, Read, Update, Delete)

Desafio 03 - Corrigindo o código 💻 Sobre o desafio Nesse desafio, temos uma aplicação Node.js que está em processo de desenvolvimento mas que já poss

CRUD made with MERN stack

RPG Chars CRUD CRUD application made with the MERN stack (Mongo Express React Node). The "RPG characters" was just an excuse to make something fun. Yo

React App with JWT Authentication

Simple React App where the user can sign-up , login and add , delete secrets , the app covers concepts like React-Router , Context API , Hooks and JWT Authentication with Node JS and Mongo DB in Backend.

A note taking app with user authentication built with React.js

MY NOTES My notes is a simple note taking app in which user can store importent notes related to his work or his studies. 🛠 Tech Stack JavaScript ES6

Covid-tracker: a website that allows users to have access to the latest covid data in Brazil
Covid-tracker: a website that allows users to have access to the latest covid data in Brazil

Covid-tracker Covid-tracker is a website that allows users to have access to the

Owner
Rizki Maulana Citra
An adventurer.
Rizki Maulana Citra
Render and position native windows as simply as you render and position tooltips in your React app.

Portal Windows Render and position windows as simply as you render and position tooltips in your React app. Getting started To use Portal Windows, you

Tandem 61 Jul 16, 2022
This website is a React and Redux app. It is simply an adding and removing books store.

This website is a React and Redux app. It is simply an adding and removing books store. Thank you to the ZEPLIN website for the UI provided. This application works with an existing API.

Olipliche B.F. Mavoungou Paka 4 Oct 25, 2021
A weather app done with React. Allows you to make a search for the current weather by simply typing "common knowledge" cities and save them to favourites on local storage.

Simpliest Weather React-App A weather app done with React. Allows you to make a search for the current weather by simply typing "common knowledge" cit

Larry Noriega 3 Aug 24, 2022
Journi - Simply create upcoming trips and capture your highlights as a beautiful timeline with notes and photos

Journi is the ultimate way to track your travel life. Simply create upcoming trips and capture your highlights as a beautiful timeline with notes and photos. Every pin on your personal map will take your mind back to the places you´ve visited. Your adventures are always just a couple of taps away - right there in your Journi-App.

Hanna Sophia Schlenker 1 Jun 21, 2022
Simply Netflix clone using ReactJS. It fetches the data from TMDB API

NETFLIX CLONE This project is a simply front end clone of Netflix. It was create

null 12 Jul 3, 2022
This application integrates Twilio SMS with a ToDo app. As you add tasks to your Todo app, you have the option to send SMS reminders to your cell phone.

This application integrates Twilio SMS with a ToDo app. As you add tasks to your Todo app, you have the option to send SMS reminders to your cell phone. The days of forgetting a task or meeting are no more with ToodleDo app.

Ricardo Salcido 1 Dec 14, 2021
Client for video streaming CRUD app with React and Redux

CRUD Streaming App with React and Redux About the Project CRUD Streaming App with React and Redux. The app allows a user to view a list of available s

Miguel Carvalho 3 Jun 2, 2022
React Redux Saga CRUD App

REACT CRUD APP yarn init -y Setup React yarn add react react-dom react-scripts

Mahesh Kariya 11 Sep 6, 2022
Recipe App Full CRUD of recipes (in memory)

Recipe App Full CRUD of recipes (in memory) Light and Dark Theme Context API Styled Components Getting Started with Create React App This project was

John Webster 1 Dec 22, 2021
A full-stack web app that tracks a users cover letters they have submitted to various companies to aid their job hunt.

A full-stack web app that tracks a users cover letters they have submitted to various companies to aid their job hunt.

Travis Anderson 2 Apr 12, 2022