Skip to content

Repository files navigation

Super Comparison App

A scalable, production-ready price comparison platform built with Next.js and Express. Compare prices across multiple platforms for cabs, food delivery, hotels, and travel tickets.

πŸš€ Features

  • Cab Price Comparison: Compare prices from Ola, Uber, and Rapido
  • Food Delivery Comparison: Compare prices from Zomato and Swiggy
  • Hotel Price Comparison: Compare prices across multiple booking platforms
  • Travel Ticket Comparison: Compare bus and flight prices from various providers

πŸ› οΈ Tech Stack

Frontend

  • Framework: Next.js 14 (App Router)
  • Styling: Tailwind CSS
  • Language: TypeScript
  • HTTP Client: Axios

Backend

  • Framework: Express.js
  • Language: Node.js
  • Architecture: RESTful API

πŸ“ Project Structure

Super/
β”œβ”€β”€ backend/                    # Express backend (Node.js)
β”‚   β”œβ”€β”€ package.json            # Backend-only scripts and deps
β”‚   β”œβ”€β”€ controllers/
β”‚   β”œβ”€β”€ routes/
β”‚   β”œβ”€β”€ services/
β”‚   └── server.js
β”‚
β”œβ”€β”€ frontend/                   # Next.js 14 (App Router) frontend
β”‚   β”œβ”€β”€ package.json            # Frontend-only scripts and deps
β”‚   β”œβ”€β”€ next.config.js
β”‚   β”œβ”€β”€ tailwind.config.js
β”‚   β”œβ”€β”€ postcss.config.js
β”‚   β”œβ”€β”€ tsconfig.json
β”‚   └── src/
β”‚       β”œβ”€β”€ app/
β”‚       β”‚   β”œβ”€β”€ compare/
β”‚       β”‚   β”‚   β”œβ”€β”€ cab/
β”‚       β”‚   β”‚   β”œβ”€β”€ food/
β”‚       β”‚   β”‚   β”œβ”€β”€ hotel/
β”‚       β”‚   β”‚   └── travel/
β”‚       β”‚   β”œβ”€β”€ layout.tsx
β”‚       β”‚   β”œβ”€β”€ page.tsx
β”‚       β”‚   └── globals.css
β”‚       β”œβ”€β”€ components/
β”‚       β”‚   β”œβ”€β”€ home/
β”‚       β”‚   └── layout/
β”‚       └── lib/
β”‚           β”œβ”€β”€ api/
β”‚           └── utils/
β”‚
β”œβ”€β”€ package.json                # Root npm workspaces
β”œβ”€β”€ README.md
└── QUICKSTART.md

🚦 Getting Started

Prerequisites

  • Node.js 18+ installed
  • npm or yarn package manager

Installation

  1. Clone the repository (or navigate to the project directory):

    cd "c:\Users\risha\Desktop\Super"
  2. Install workspace dependencies:

    npm install
  3. Set up environment variables:

    Copy-Item .env.example .env

    Edit .env and configure your settings.

Running the Application

Development Mode (two terminals)

  1. Backend API

    npm run dev:backend

    Runs on http://localhost:5000

  2. Frontend Web

    npm run dev:frontend

    Runs on http://localhost:3000

Production Mode

  1. Build frontend

    npm run build
  2. Start backend

    npm run server
  3. Start frontend (production)

    npm run start

πŸ“‘ API Endpoints

Cab Comparison

  • POST /api/cab/compare - Compare cab prices
  • GET /api/cab/providers - Get available cab providers

Food Delivery Comparison

  • POST /api/food/compare - Compare food delivery prices
  • GET /api/food/providers - Get available food delivery providers

Hotel Comparison

  • POST /api/hotel/compare - Compare hotel prices
  • GET /api/hotel/providers - Get available hotel booking providers

Travel Comparison

  • POST /api/travel/compare/bus - Compare bus ticket prices
  • POST /api/travel/compare/flight - Compare flight ticket prices
  • GET /api/travel/providers - Get available travel booking providers

πŸ”Œ Integrating Real APIs

Currently, the application uses mock data. To integrate real APIs:

  1. Add API keys to .env:

    OLA_API_KEY=your_key_here
    UBER_API_KEY=your_key_here
    # ... etc
  2. Update controllers in backend/controllers/:

    • Replace mock data with actual API calls
    • Use the comparisonService to analyze real data
    • Handle API errors appropriately
  3. Example integration:

    // In cabController.js
    const olaData = await fetch(`${OLA_API_URL}/estimate`, {
      headers: { Authorization: `Bearer ${process.env.OLA_API_KEY}` },
    });

🎨 Customization

Styling

  • Modify tailwind.config.js for theme customization
  • Update colors in the theme.extend.colors section
  • Edit src/app/globals.css for global styles

Adding New Comparison Services

  1. Create new controller in backend/controllers/
  2. Create new route in backend/routes/
  3. Add route to backend/server.js
  4. Create API service in src/lib/api/
  5. Create UI page in src/app/compare/
  6. Add card to src/components/home/ComparisonCards.tsx

πŸ”’ Security Considerations

  • API keys should never be exposed to the frontend
  • All API calls should be proxied through the backend
  • Implement rate limiting on API endpoints
  • Add authentication for user-specific features
  • Sanitize all user inputs
  • Use HTTPS in production

πŸš€ Deployment

Frontend (Vercel)

  1. Push code to GitHub
  2. Connect repository to Vercel
  3. Configure environment variables
  4. Deploy

Backend (Render/Railway/Heroku)

  1. Choose a hosting provider
  2. Configure environment variables
  3. Set start command: node backend/server.js
  4. Deploy

πŸ“ Future Enhancements

  • User authentication and saved searches
  • Price history tracking
  • Email/SMS price alerts
  • Affiliate program integration
  • Mobile app (React Native)
  • Advanced filters and sorting
  • Cashback and rewards integration
  • Multi-language support

🀝 Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Commit your changes
  4. Push to the branch
  5. Open a Pull Request

πŸ“„ License

This project is licensed under the MIT License.

πŸ‘¨β€πŸ’» Author

Built with ❀️ by Super Comparison Team

πŸ“ž Support

For support, email support@supercomparison.com or open an issue on GitHub.


Note: This project currently uses mock data for demonstration purposes. Integrate real APIs from service providers to enable actual price comparison functionality.

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages