eGarant is a modern Next.js 16 application that helps users store, organize, and manage their product warranties and invoices digitally. The system provides a comprehensive solution for tracking purchase history, warranty periods, and seller information.
- Framework: Next.js 16 (App Router, Server Components)
- Database: MySQL with Prisma ORM
- Authentication: JWT using
jose - State Management: Zustand
- Validation: Zod
- Middleware: JWT-based authentication
- Styling: Tailwind CSS 4
- UI Components: Radix UI + Custom components
- File Storage: Pinata IPFS integration
- Email: Nodemailer for notifications
- Tables: TanStack React Table
- Date Handling: date-fns + React DatePicker
- Secure JWT-based authentication system
- User registration with email verification
- Password reset functionality
- Protected routes with middleware
- Secure password hashing with bcrypt
- Add and manage product invoices with detailed information
- Track warranty periods for individual products
- Store invoice images using IPFS (Pinata)
- Comprehensive product tracking with quantities and prices
- Seller information management
- Overview dashboard with key metrics
- Total invoice count and product statistics
- Financial summaries in RSD (Serbian Dinar)
- Quick access to profile and invoice management
- Fully responsive design with Tailwind CSS 4
- Modern UI components built with Radix UI
- Dark/light theme support
- Interactive data tables with filtering and sorting
- Form validation with real-time feedback
- Toast notifications with Sonner
- TypeScript for type safety
- Server-side rendering with Next.js 16
- Optimized database queries with Prisma
- Client-side state management with Zustand
- Form validation powered by Zod
- API route protection via middleware
├── app/ # Next.js App Router
│ ├── (homepage)/ # Homepage components
│ ├── (protected)/ # Protected routes
│ │ ├── invoices/ # Invoice management
│ │ └── profile/ # User profile
│ ├── login/ # Authentication pages
│ ├── register/ # User registration
│ └── forgot-password/ # Password recovery
├── actions/ # Server actions
│ ├── auth/ # Authentication actions
│ ├── invoices/ # Invoice CRUD operations
│ ├── profile/ # Profile management
│ └── sellers/ # Seller management
├── components/ # Reusable UI components
│ ├── ui/ # Base UI components
│ ├── layout/ # Layout components
│ ├── modals/ # Modal components
│ └── table/ # Data table components
├── lib/ # Utility libraries
├── prisma/ # Database schema and migrations
├── store/ # Zustand state management
├── types/ # TypeScript type definitions
└── hooks/ # Custom React hooks
The application uses a MySQL database with the following main entities:
- Users: User accounts with authentication data
- Sellers: Store and seller information
- Invoices: Invoice records with product details stored as JSON
- Products: Individual products with warranty information
- Node.js 20.9+ (required by Next.js 16)
- MySQL database
- Pinata account for IPFS storage
-
Clone the repository
git clone <repository-url> cd frontend
-
Install dependencies
npm install
-
Environment Setup Create a
.env.localfile with:DATABASE_URL="mysql://user:password@localhost:3306/egarant" JWT_SECRET="your-jwt-secret" PINATA_API_KEY="your-pinata-api-key" PINATA_SECRET_KEY="your-pinata-secret" EMAIL_SERVER="your-email-server-config"
-
Database Setup
npx prisma generate npx prisma db push
-
Run Development Server
npm run dev
npm run dev- Start development server with Turbopacknpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
The application is built with Next.js 16 and can be deployed to:
- Vercel (recommended)
- Netlify
- Any Node.js hosting platform
Make sure to set up all environment variables in your deployment platform.
This project is licensed under the MIT License.
For questions or feedback, reach out to aleksandar@e-seo.info
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
Built with ❤️ using Next.js 16 and modern web technologies