Invoice App

A responsive Invoice Management Application developed using React, TypeScript, Redux, and Firebase, featuring user authentication, invoice creation, and dashboard visualization. Leveraging Vercel’s CI/CD pipeline for automated build and deployment ensures efficient application delivery. Check out the live demo of the application here.

Table of Contents

• Features
• Technologies Used
• Installation
• Usage
• Screenshots
• Folder Structure

Features

• User Authentication: Secure login and registration using Firebase Authentication.
• Invoice Management: Create, view, and delete invoices.
• Dashboard: Visualize overall and monthly collection with charts.
• State Management: Managed using Redux.
• Profile Management: Update profile information and company logo.
• CI/CD Integration: Automated deployment with Vercel.

Technologies Used

• Frontend: React, TypeScript
• Backend: Firebase Firestore, Firebase Functions
• Authentication: Firebase Authentication
• Deployment: Vercel

Installation

To get a local copy up and running, follow these steps:

1. Clone the repository:

   git clone https://github.com/your-username/invoice-app.git
   cd invoice-app
   

2. Install dependencies::

   npm install
   

3. Set up Firebase:

• Create a Firebase project on Firebase Console.
• Enable Firestore, Authentication, and Storage.
• Copy your Firebase config and paste it into src/firebase.ts.

4. Run the app:

   npm start
   

Usage

1. Register: Create a new account.
2. Login: Sign in with your credentials.
3. Dashboard: View your dashboard with overall and monthly collections.
4. Invoices: Create, view, and manage invoices.
5. Settings: Update your profile information and company logo.

Screenshots

Folder Structure

invoice-app
│
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   │   └── invoice.jpg
│   ├── components/
│   │   ├── dashboard/
│   │   │   ├── dashboard.css
│   │   │   ├── Dashboard.tsx
│   │   │   ├── Home.tsx
│   │   │   ├── InvoiceDetail.tsx
│   │   │   ├── Invoices.tsx
│   │   │   ├── NewInvoice.tsx
│   │   │   └── Setting.tsx
│   │   ├── login/
│   │   │   ├── Login.css
│   │   │   └── Login.tsx
│   │   ├── register/
│   │       ├── Register.css
│   │       └── Register.tsx
│   ├── redux/
│   │   ├── actions/
│   │   ├── reducers/
│   │   └── store.ts
│   ├── App.css
│   ├── App.tsx
│   ├── firebase.ts
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   └── setupTests.ts
├── .gitignore
├── package.json
├── README.md
└── tsconfig.json