Table of contents

• Disclaimer
• Description
• Getting Started
  • Project Architecture
  • Run the project
• Main Technologies
  • Backend
    • Framework
    • Database
  • Frontend
    • Framework
    • Libraries
• Screensshots
• Custom Components
  • Input Components
    • DatePicker
    • TextInput
    • CurrencyInput
    • Select Dropdown
  • Feedback Components
    • Feedback Message Box
    • PopConfirm
  • Data Display Components
    • Card
    • Descriptions
    • PageTitle
    • Table

Disclaimer

This project was created for study and portfolio purposes. Feel free to go around the code and run it by yourself. It's not for commercial purposes, so you can use my code and ideas for whatever you want. Just remember to give me the credits you enjoy it.

Description

MyPocket is a simple web application for managing personal finances. With the application the user can register and start importing the daily transactions and creating monthly budgets to control expenses. There is a dashboard where the user can get an overview of how the finances are going.

To see the app in action you can visit the production instance deployed in aws:

https://my-pocket.net

The applications in running using containers.

Getting Started

Project Architecture

The project was designed to have a backend and frontend running separatedly.

Run the project

1. Clone the repository

git clone https://github.com/danielfreitas662/MyPocket.com.git

2. Go to MyPocket.Backend folder and run the project

dotnet watch run --project MyPocket.API

The API should run on https://localhost:7220/ The endpoints of the API will be available at the base address https://localhost:7220/api/

3. Go to MuPocket.Frontend folder and run the project

npm run dev

The web application should run on http://localhost:3000/

Main Technologies

Backend

Click here to view backend code.

Framework

.NET 6 (c#)

Database

PostgreSQL

Frontend

Click here to view frontend code.

Framework

Next.js 13 (experimental to this date) React.js (TypeScript) SASS

Libraries

I tried to implement everything I could to avoid using of external libraries. The only dependencies are:

1. appexcharts: Plotting charts on screen for the dashboard
2. clsx: Conditionally insert classes on the components
3. jose: Managing JWT
4. react-hook-form: Managing forms
5. react-icons: SVG
6. react-toastify: Notifications popups
7. moment: Manage date and time

Screensshots

Public Home screen for non authenticated users

Public About screen for non authenticated users

Public Contact screen for non authenticated users

Public Signup screen for non authenticated users

Public Login screen for non authenticated users

Private Dashboard screen for authenticated users

Private Transactions screen for authenticated users

Private Transaction Form screen for authenticated users

Private Accounts screen for authenticated users

Private Account Form screen for authenticated users

Private Categories screen for authenticated users

Private Category Form screen for authenticated users

Custom Components

Find bellow all the components created for input data, feedback, loading state and more.

Input Components

DatePicker

The component uses moment library to manage date value and format. The user can navigate throught the years and months and pick the date. It's possible to clear the value and set the value for today

1. Component with placeholder and no value

2. Component with value

3. Component with calendar open when focus within

TextInput

The component uses moment library to manage date value and format. All the properties from input component are available to be used

1. Component with placeholder and no value

2. Component with value

3. Component with focus within

CurrencyInput

The component masks input applying currency symbol, thousand and decimal separator. The output and input is always a raw number. It has all the same propperties from the TextInput component.

Select Dropdown

The select component opens a dropdown menu when given focus. The user can type to filter the options. It is possible to customize the option item label and clear value by clicking the cross on the right side of the component. It monitors screen size to check if the dropdown menu will fit bellow the component and renders above it if it doesn't fit.

1. Component with placeholder and no value

2. Component with dropdown open and no option selected

3. Component with dropdown open and option selected

4. Component filter

5. Component option hover

6. Component dropdown rendered above the field when no space bellow is detected

Feedback Components

Feedback Message Box

This component shows a message that can be styled as error, success or information. It has a timeout the dismiss the component in 3 seconds (it can be customized) or it can be manually dismissed.

1. Success Theme
2. Info Theme
3. Error Theme

PopConfirm

This component lets you wrap a button and override its onClick event. This way the user can have a confirmation box when click on the button.

Data Display Components

Card

Descriptions

PageTitle

Displays a back button, title and extras

Table

The component render a table element and supoport several functionalities.

1. Pagination
2. Sort columns by clicking header column
3. Filter columns
4. Horizontal and vertical scroll
5. Summary (footer)
6. onChange event to capture pagination, filters and sorters