AndyOGo/expenses-next-app

Expenses Next.js App

Expenses Next.js App

This is a Next.js project to track expenses.

Table of Contents

• Getting Started
• Learn More
• Project Structure
• Concepts
  • State
  • Headless Components
  • I18n
  • Client-side Validation
  • API
  • Logging
• Styleguides
  • JavaScript, SCSS
  • Git Commit Messages
  • Editors
• CI/CD
  • Git Hooks

Getting Started

First, install all dependencies:

npm install
# or
yarn

Second, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Project Structure

.
├── README.md
├── assets                        # Assets - icons, ...
│   ├── [...]
├── components                    # Global Reusable Components
│   ├── bootstrap [...]           # Bootstrap React Components and related SCSS imports
│   ├── expenses [...]            # Expenses Form and Table Listing
│   ├── form [...]                # Form Fields wrapped for react-final-form
│   └── table [...]               # Headless Table
├── container                     # Unstated container
│   ├── CurrenciesContainer.js    # Currencies fetched from openexchangerates.org
│   └── ExpensesContainer.js      # Expenses fetched from local API
├── next.config.js                # Next Config
├── node_modules
│   ├── [...]
├── package.json
├── package-lock.lock
├── pages                         # All public routes
│   ├── api/v1/expenses           # Expenses RESTful API
│   ├── _app.js                   # Custom App
│   └── index.js                  # Index Route
├── utils                         # Utilities
│   ├── fetch.js                  # Fetch with retry and network and server error handling
└── [...]                         # Various rc files

Concepts

State

Global state is managed with unstated.

Headless Components

Interface Logic of react-final-form and react-table are used to drive the UI state.

react-bootstrap and bootstrap are used to visually display the UI.

I18n

next-i18next is used to utilize i18next and react-i18next for internationalisation.

Client-side Validation

Built-in HTML5 Form Validation is implemented by utilizing react-final-form-html5-validation.

API

RESTful APIs are consumed with fetch, network and 5xx errors may be mitigated with fetch-retry.

Logging

For client-side logging the web console API is used.

Styleguides

JavaScript, SCSS

JavaScript and SCSS is linted and autoformatted by prettier.

Git Commit Messages

This project utilizes commitlint to enforce Conventional Commits.

Editors

Basic configuration for various editors is provided by an editorconfig file.

CI/CD

Git Hooks

We use husky and lintstaged to enforce those styleguide rules for each commit.