AR Compare - Next.js

A product comparison application built with Next.js 15, TypeScript, and Tailwind CSS.

Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS v4
• Package Manager: pnpm
• React: v19

Project Structure

ar-compare-nextjs/
├── app/              # Next.js App Router pages
├── components/       # React components
├── hooks/           # Custom React hooks
├── lib/             # Utility functions and constants
├── data/            # Product data and mock data
├── types/           # TypeScript type definitions
└── public/          # Static assets

Getting Started

1. Install dependencies:

   pnpm install

2. Run the development server:

   pnpm dev

3. Open http://localhost:3000 in your browser.

Available Scripts

• pnpm dev - Start development server with Turbopack
• pnpm build - Build for production
• pnpm start - Start production server
• pnpm lint - Run ESLint

Features

• Product listing with card components
• Product comparison functionality
• TypeScript for type safety
• Tailwind CSS for styling
• Custom hooks for state management
• Modular component architecture

Environment Variables

Copy .env.example to .env.local and update the values as needed.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.