Warranty Wallet

  Open-source warranty management web application built with React, Ant Design, Node.js, Express & MongoDB.  
  Effortlessly organize and track all your warranties in one place.

🌐 Live Demo • 📖 About • ⚙️ Setup • 🧪 Tests • 🤝 Contribute • 🪪 License

---

Project Overview

Warranty Wallet is a cloud-based web application that helps users store, manage, and track their product warranties digitally. It allows uploading warranty bills, tracking warranty periods with automated reminders, and sharing warranty access securely.

⭐ Star this repo if you found it helpful!

---

ww_demo.mp4

---

Features

• 📄 Upload Warranty Bills – Store and manage your product receipts securely on the cloud.
• 🧾 Centralized Management – Organize warranty details in a single, easy-to-access dashboard.
• 🔔 Expiry Notifications – Automated reminders via AWS SNS before warranties expire.
• 👥 Collaborative Access – Share warranty details with others for group tracking.
• 💻 Cross-Platform Interface – Responsive and accessible on all devices.
• 🎨 Modern UI – Powered by React and Ant Design.

---

Tech Stack

Layer	Technology
Frontend	React, Ant Design, Bootstrap
Backend	Node.js, Express
Database	MongoDB
API Documentation	Swagger/OpenAPI 3.0
Testing	Jest, React Testing Library
Cloud & Hosting	AWS EC2, AWS S3, AWS SNS, Vercel, Render
Language	JavaScript (ES6)

---

Getting Started

Follow these steps to set up the project locally:

1️⃣ Clone the repository

git clone https://github.com/SAP-AWengerS/Warranty-Wallent/
cd warranty-wallet

2️⃣ Setup Backend

cd server
cp .env.example .env
npm install
npm start

.env file for backend:

REDIRECT_URL="https://warrenty-wallet.vercel.app"
SECRETKEY=secret
MONGODB_URL=
AWS_SECRET_ACCESS_KEY =
AWS_ACCESS_KEY_ID =
CORS_URLS = ['http://localhost:3000']

3️⃣ Setup Frontend

cd client
cp .env.example .env
npm install
npm start

.env file for frontend:

REACT_APP_BACKEND_URL=https://warranty-wallet-backend-1.onrender.com
REACT_APP_GOOGLE_URL=

Your app will now be running at:

Frontend → http://localhost:3000
Backend → http://localhost:8000
API Documentation (Swagger) → http://localhost:8000/api-docs

---

📚 API Documentation

The backend API is fully documented using Swagger/OpenAPI 3.0 specification.

Accessing API Documentation

Once the backend server is running, access the interactive API documentation at:

http://localhost:8000/api-docs

Features

• Interactive Testing: Test all API endpoints directly from your browser
• Complete Schemas: Detailed request/response models with examples
• Authentication Support: Built-in token authentication for testing secured endpoints
• File Upload Testing: Test file uploads for warranty invoices
• Endpoint Categories:
  • 🔐 Authentication (Login, Signup, Google OAuth)
  • 👤 User Management
  • 📋 Warranty Operations (CRUD, Stats, Sharing)
  • 🛡️ Admin Operations

Documentation Files

• backend/SWAGGER_API_DOCS.md - Comprehensive guide for using the API documentation
• backend/swagger.js - Swagger configuration and schema definitions
• Route files contain JSDoc annotations for automatic documentation generation

Quick Example

# Login to get authentication token
curl -X POST "http://localhost:8000/api/v1/app/auth/logIn" \
  -H "Content-Type: application/json" \
  -d '{"email": "user@example.com", "password": "password123"}'

# Use token to access protected endpoints
curl -X GET "http://localhost:8000/api/v1/app/users/getMyProfile" \
  -H "Authorization: Bearer YOUR_TOKEN_HERE"

For detailed API documentation, examples, and troubleshooting, see backend/SWAGGER_API_DOCS.md.

---

🧪 Running Tests

We use Jest and React Testing Library for comprehensive unit and integration testing.

Frontend Tests

Navigate to the frontend directory and run tests:

cd frontend

# Run all tests
npm test

# Run tests without watch mode (CI/CD)
npm test -- --watchAll=false

# Run tests with coverage
npm test -- --coverage --watchAll=false

# Run specific test file
npm test Dashboard.test.jsx
npm test Filters.test.jsx

Test Structure

Tests are co-located with their respective components following React best practices:

frontend/src/
├── Pages/
│   └── Dashboard/
│       ├── Dashboard.js
│       └── Dashboard.test.jsx      # Dashboard component tests
└── Components/
    └── Filters/
        ├── Filters.js
        └── Filters.test.jsx        # Filters component tests

Test Coverage

Current test suites cover:

Dashboard Component (Dashboard.test.jsx)

• ✅ Loading states and spinners
• ✅ API data fetching and rendering
• ✅ Empty state handling
• ✅ Search functionality and filtering
• ✅ Error handling and graceful failures

Filters Component (Filters.test.jsx)

• ✅ Component rendering and UI elements
• ✅ User interactions and event handling
• ✅ Search input functionality
• ✅ Category filtering

Writing New Tests

When adding new components, create test files following this pattern:

1. File Naming: ComponentName.test.jsx
2. Location: Same directory as the component
3. Structure: Use React Testing Library patterns
4. Mocking: Mock external dependencies (APIs, contexts, etc.)

Example test structure:

import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import YourComponent from './YourComponent';

describe('YourComponent', () => {
  test('should render correctly', () => {
    render(<YourComponent />);
    expect(screen.getByText('Expected Text')).toBeInTheDocument();
  });
});

---

Folder Structure

warranty-wallet/
│
├── frontend/           # React + Ant Design frontend
│   ├── src/
│   │   ├── Pages/
│   │   │   └── Dashboard/
│   │   │       ├── Dashboard.js
│   │   │       └── Dashboard.test.jsx    # Dashboard tests
│   │   ├── Components/
│   │   │   └── Filters/
│   │   │       ├── Filters.js
│   │   │       └── Filters.test.jsx      # Filters tests
│   │   └── setupTests.js                 # Jest setup
│   ├── public/
│   └── package.json
│
├── backend/            # Node.js + Express backend
│   ├── routes/         # API route definitions with Swagger annotations
│   ├── controllers/    # Business logic handlers
│   ├── models/         # MongoDB schemas
│   ├── swagger.js      # Swagger/OpenAPI configuration
│   ├── SWAGGER_API_DOCS.md  # API documentation guide
│   └── package.json
│
├── LICENSE
├── CONTRIBUTING.md     # Contribution guidelines (includes API docs)
├── CODE_OF_CONDUCT.md
├── TESTING.md
└── README.md

---

Cloud Setup

Warranty Wallet leverages AWS for scalable and reliable deployment:

EC2: Hosts the Node.js backend server.

S3: Stores uploaded warranty bill images securely.

DocumentDB: Stores user and warranty data in NoSQL format.

SNS: Sends notifications 10 days before warranty expiry.

Vercel: Hosts the frontend React app.

---

Contributing

We ❤️ contributions from the open-source community!

1️⃣ Fork the repository

2️⃣ Create your feature branch

git checkout -b feature/my-feature

3️⃣ Commit your changes

git commit -m "Add: new feature"

4️⃣ Push to your branch

git push origin feature/my-feature

5️⃣ Open a Pull Request 🚀

For detailed contribution rules, see CONTRIBUTING.md. For testing guidelines and best practices, see TESTING.md.

---

License

This project is licensed under the MIT License. You’re free to use, modify, and distribute this software with attribution.

---

Contributors

Brinda S	Eby Tom	Govind M J	Joyal Devassy	Neha Bimal

---

Future Scope

📆 Add warranty claim tracking & analytics

📱 Develop mobile application version

🔍 Integrate smart receipt scanning

📊 Dashboard for warranty usage insights

---

Contact

Maintainer: CodHub 📧 dev.codhub@gmail.com

Made with ❤️ by Team AWengerS