Frontend Docs - hemanth-sunkireddy/Invoice-Management-System GitHub Wiki

SWIPE Automatic Invoice Management Frontend

Setup Frontend

  1. Change Backend URL to local backend URL:
    • Go to frontend/config.tsx file and Update the following line to localhost backend URL 
      export const backendURL = "https://swipe-invoice-management.vercel.app";
      to 
       export const backendURL = "http://localhost:4000";
  2. Start App
  cd frontend
  npm install
  npm run dev
  1. Open link in browser: http://localhost:3000

Please visit the Frontend Documentation for a detailed overview of the code: Frontend Docs wiki

Details about the frontend code

Folder Structure

(base) hemanth@Sunkireddy frontend % tree
.
β”œβ”€β”€ README.md
β”œβ”€β”€ config.tsx
β”œβ”€β”€ next-env.d.ts
β”œβ”€β”€ next.config.mjs
β”œβ”€β”€ package-lock.json
β”œβ”€β”€ package.json
β”œβ”€β”€ postcss.config.mjs
β”œβ”€β”€ public
β”‚   └── images
β”‚       β”œβ”€β”€ center-image-home.webp
β”‚       β”œβ”€β”€ home-page.png
β”‚       β”œβ”€β”€ swipe-logo.svg
β”‚       └── swipe_logo.png
β”œβ”€β”€ src
β”‚   β”œβ”€β”€ app
β”‚   β”‚   β”œβ”€β”€ customers
β”‚   β”‚   β”‚   └── page.tsx
β”‚   β”‚   β”œβ”€β”€ file-upload
β”‚   β”‚   β”‚   └── page.tsx
β”‚   β”‚   β”œβ”€β”€ globals.css
β”‚   β”‚   β”œβ”€β”€ invoice-detail
β”‚   β”‚   β”‚   └── page.tsx
β”‚   β”‚   β”œβ”€β”€ invoices
β”‚   β”‚   β”‚   └── page.tsx
β”‚   β”‚   β”œβ”€β”€ layout.tsx
β”‚   β”‚   β”œβ”€β”€ page.tsx
β”‚   β”‚   └── products
β”‚   β”‚       └── page.tsx
β”‚   β”œβ”€β”€ components
β”‚   β”‚   β”œβ”€β”€ Container.tsx
β”‚   β”‚   β”œβ”€β”€ Footer.tsx
β”‚   β”‚   β”œβ”€β”€ Header.tsx
β”‚   β”‚   └── Hero.tsx
β”‚   β”œβ”€β”€ data
β”‚   β”‚   β”œβ”€β”€ footer.ts
β”‚   β”‚   β”œβ”€β”€ hero.ts
β”‚   β”‚   β”œβ”€β”€ menuItems.ts
β”‚   β”‚   └── siteDetails.ts
β”‚   └── types.ts
β”œβ”€β”€ tailwind.config.ts
└── tsconfig.json

File Descriptions

  • config.tsx: Contains configuration variables like backend URLs used for API requests.

  • public/images: Stores static images used in the project.

  • src/app/page.tsx: The main entry point of the app (homepage).

  • src/app/layout.tsx: Defines the global layout, including headers and footers.

  • src/app/customers/page.tsx: Displays List of customers. (Customer Tab)

  • src/app/file-upload/page.tsx: Handles different file uploads and display response message from server.

  • src/app/invoices/page.tsx: Lists all invoices. (Invoice Tab)

  • src/app/products/page.tsx: Displays all Products. (Products Tab)

  • src/components/Footer.tsx: Renders the footer section.

  • src/data/footer.ts: Stores footer-related data.

  • src/components/Header.tsx: Displays the site’s header and navigation bar.

  • src/types.ts: Defines TypeScript types used across the app for invoices, customers and products.

Template I used for this project: Finwise Landing template