Skip to content

Latest commit

 

History

History
145 lines (102 loc) · 4.69 KB

README.md

File metadata and controls

145 lines (102 loc) · 4.69 KB

Coupon Code Vault

Next.js React TypeScript Tailwind CSS PWA License PRs Welcome


Project Mock UI

✨ Overview

My Coupon code vault is a modern portfolio and coupon aggregation app, built as a Progressive Web App (PWA) using Next.js, React 19, and Tailwind CSS. It provides a slick, installable interface for browsing and managing promotional deals from various stores—online or offline, on desktop or mobile.

🔸 Sleek and responsive, installable PWA experience
🔸 Coupons are grouped & filtered by store
🔸 Interactive countdown timer for deals
🔸 Optimized for performance, accessibility & offline use
🔸 Easily customizable and extendable codebase

🚀 Features

  • Store-based Coupon Listing: View latest coupons, grouped by brand/store, with easy navigation.
  • Live Countdown Timer: Each coupon shows time to expiration in real-time.
  • Carousel Navigation: Snap carousel at the top for quick store selection.
  • Detailed Terms: Tap or hover to view full coupon T&Cs and details.
  • Responsive UI: Looks great on desktop and mobile.
  • PWA Ready: Install to your home screen, enjoy an app-like experience, and access coupons offline.
  • TypeScript & React 19: Modern patterns and hooks for maintainability.
  • Tailwind CSS: For utility-first, rapid styling and theming.

🖼️ Screenshots

Mobile Screenshot Desktop Screenshot

🛠️ Built With

See package.json for the full list of dependencies!

⚡ Quick Start

  1. Clone the repository:

    git clone https://github.com/your-username/my-v0-project.git
cd my-v0-project

  2. Install dependencies:

    pnpm install
# or, if you use npm
# npm install
# or with yarn
# yarn install

  3. Run the development server:

    pnpm dev
# or: npm run dev

  4. Open in your browser:
    Visit http://localhost:3000 to see the app!

  5. Install as a PWA:
    When prompted, add to your home screen or install the app for an offline, native-like experience.

📂 Project Structure

src/
  app/
    page.tsx         # The main page and store/coupon rendering logic
  components/        # Reusable, typed React components (CouponListCard, CountdownTimer, Carousel, etc)
  data/              # Example coupon and store placeholder data
  hooks/             # Custom React hooks, e.g., for managing coupons
  lib/               # Utility functions (e.g., grouping coupons)
  styles/            # Tailwind setup and global styles

📝 Customization & Extending

  • Add Stores/Coupons:
    Add or edit the data in src/data/placeholders.ts.
  • Styling:
    Modify Tailwind classes in components, or edit tailwind config as needed.
  • New Features:
    Create new React components in src/components.

🙏 Credits

Thanks to Radix UI and Lucide Icons for acceleration and design inspiration.

🛡️ License

MIT — free to use, fork, and extend.

💬 Feedback

Have an idea or find a bug?
Feel free to open an issue or submit a PR!