📄 InvoSync Frontend

InvoSync is a modern invoice management system built for freelancers and small businesses. This repository contains the frontend built using React.js with Vite, allowing users to manage clients, create and update invoices, view profiles, and download styled PDFs.

---

🔧 Tech Stack

• ⚛️ React.js (with TypeScript)
• ⚡ Vite (build tool)
• 🧠 Redux Toolkit (state management)
• 🌐 Axios (HTTP requests & interceptors)
• 🎨 Tailwind CSS v4 (styling)
• ✅ Formik (form validation)
• 🔔 Sonner (toast notifications)
• 📄 html2canvas & html2pdf.js (PDF download)
• 🐳 Docker (containerized deployment)
• 🚀 Github Action (for CI/CD pipeline)

---

📁 Folder Structure

/invosync-frontend
│
├── public/               # Static assets (logo, favicon)
├── src/
│   ├── assets/           # Icons and images
│   ├── components/       # Reusable components
│   ├── Formik/           # Form validation schemas
│   ├── Route/            # Protected route components
│   ├── pages/            # Page-level components (Dashboard, Clients, etc.)
│   ├── redux/            # Redux store and slices
│   ├── services          # Axios API services
│   ├── style/            # Tailwind & global styles
│   ├── types/            # TypeScript interfaces
│   ├── utils/            # Utility functions (PDF generation, etc.)
│   ├── App.tsx           # Main app component
│   ├── main.tsx          # Entry point
│   └── vite-env.d.ts
│
├── .env                  # Environment variables
├── .gitignore            # Git ignored files
├── Dockerfile            # Docker image configuration
├── docker-compose.yml    # Docker Compose setup (optional)
├── .dockerignore         # Files ignored by Docker
├── index.html            # HTML entry file
├── vite.config.ts        # Vite + Tailwind config
├── eslint.config.js      # ESLint rules
├── tsconfig.json         # Base TS config
├── tsconfig.app.json     # App-specific TS config
├── tsconfig.node.json    # Node-specific TS config
├── package.json          # Dependencies and scripts
├── yarn.lock             # Yarn lockfile
└── README.md             # Project documentation

---

🔑 Features

• 👥 Client Management (Add, edit, delete, view)
• 🧾 Invoice Management (Create, edit, mark paid, download as PDF)
• 👤 User Profile View & Edit
• 📄 Styled Invoice PDF Download
• 🛡️ JWT Authentication & Protected Routes
• 🔐 Persistent Auth with Redux + localStorage
• 📱 Fully Responsive & Clean UI
• 🐳 Docker-ready for Production Deployment

---

🚀 Getting Started

📋 Prerequisites

• Node.js (v18+)
• Yarn
• Backend Server (e.g., Express + MongoDB)
• Docker (optional)

📥 1. Clone the Repository

git clone https://github.com/syam-ts/invosync.git
cd invosync

📦 2. Install Dependencies

yarn install

⚙️ 3. Create .env File

touch .env

Add the following variables:

VITE_FRONTEND_URL=http://localhost:5173
VITE_BACKEND_URL=https://invosync-backend.yourdomain.com

▶️ 4. Run the Development Server (without Docker)

yarn dev

Open in browser: http://localhost:5173

---

🐳 Running with Docker

1. Build the Docker Image

docker build -t invosync .

2. Run the Container

docker run -d -p 5173:80 invosync

Visit: http://localhost:5173

Note: Ensure the backend is reachable via VITE_BACKEND_URL when running in Docker.