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

Check your device when you have anything to change on your PC or mobile
Check your device when you have anything to change on your PC or mobile

Check your device when you have anything to change on your PC or mobile.

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

This repository contains a Shopping app built using React, React-redux toolkit, Firebase authentication, Razorpay.
This repository contains a Shopping app built using React, React-redux toolkit, Firebase authentication, Razorpay.

Shopping E-commerce Website This repository contains a shopping app built using React, the React-redux toolkit, Firebase authentication, and Razorpay.

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

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

๐Ÿ“‹ 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

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 63 Nov 8, 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 14 Dec 9, 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
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
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 13 Nov 16, 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