Next.js 14 - Getting Started

This guide provides the necessary steps to run a Next.js 14 application locally.

Prerequisites

Ensure you have the following installed:

• Node.js (LTS recommended)
• Yarn or npm

Installation

1. Clone the Repository

   git clone https://github.com/fadeladen/nabitu-assesment.git
   cd nabitu-assesment
   

2. Install Dependencies Using npm:

   npm install
   

   Or using Yarn:

   yarn install
   

Running the Application

Development Mode

Start the development server:

npm run dev

or

yarn dev

The app will be available at http://localhost:3000 by default.

Production Mode

Build and start the production server:

npm run build
npm run start

or

yarn build
yarn start

Additional Commands

• Linting:

  npm run lint
  

  or

  yarn lint
  

• Formatting (Prettier):

  npm run format
  

  or

  yarn format
  

Technical Decisions

1. Form Handling & Validation

• Library: react-hook-form for handling form state and submission.
• Validation: Zod is used for schema validation, ensuring data integrity and reducing manual validation logic.

2. UI Components

• Material UI (@mui/material) is used for a modern and accessible UI design.
• Provides pre-built components like buttons, inputs, and tables, making the UI development process faster and more consistent.

3. State Management

• The app uses localStorage to persist invoice data, ensuring that information is retained even after a page refresh.
• This approach eliminates the need for a backend database for this assessment while still providing a functional user experience.

4. Features Implemented

• Invoice Management:
  • Create a new invoice.
  • List all invoices in a data table.
  • Edit and update existing invoices.
  • Delete invoices.
• Navigation:
  • A responsive sidebar for seamless navigation between pages.

5. Performance Considerations

• Using react-hook-form reduces unnecessary re-renders, making form interactions more efficient.
• Material UI’s built-in styling system (sx prop and theme provider) optimizes the rendering of UI elements.

Notes

• The default port is 3000, but you can specify a different port using:

  PORT=4000 npm run dev