/hermes-front

React project to help small business with their financial.

Primary LanguageTypeScript

Hermes - Front End

This project is designed to help small businesses effectively manage their finances by tracking their income and expenses. By keeping track of what they sell and what they purchase, businesses can easily visualize their revenue and expenses, giving them a better understanding of how much they are earning.

Table of contents

Overview

The challenge

Users should be able to:

  • Create an account using email and password
  • Login with the created account
  • Logout from my account

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Mobile-first workflow
  • React
  • TypeScript
  • Next.js
  • MUI
  • React Hook Form
  • Yarn

What I learned

MUI theme customization:

import { createTheme } from '@mui/material/styles';
import { green } from '@mui/material/colors';

const theme = createTheme({ palette: { primary: { main: green[900] } } });

Form validation with zod:

const loginSchema = object({
  email: string().nonempty('Email is required').email('Email is invalid'),
  password: string()
    .nonempty('Password is required')
    .min(8, 'Password must be at least 8 characters')
    .max(32, 'Password must be less than 32 characters'),
});

Useful resources

Author