Pick Proud - Expert-Curated Product Recommendations

Pick Proud is a modern, responsive web application designed to help users find the best products across various categories without the guesswork. We research, compare, and test products to provide expert-curated recommendations you can trust.

🚀 Features

• Curated Top Picks: Expertly selected products with "Editor's Pick", "Best Value", and "Top Rated" badges.
• Category Browsing: Seamlessly browse products across Tech, Home, Gadgets, Audio, Fitness, and Office.
• Product Details: Comprehensive information including ratings, review counts, and direct affiliate links.
• Search Functionality: Quickly find specific products using the integrated search bar.
• Modern UI/UX: Built with a focus on aesthetics, responsiveness, and smooth animations.
• Dynamic Filtering: Easily filter products by category or popularity.

🛠️ Tech Stack

This project is built using the latest web technologies for performance and maintainability:

• Framework: React 18
• Build Tool: Vite
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui (Radix UI)
• Icons: Lucide React
• State Management: TanStack Query (React Query)
• Routing: React Router Dom
• Forms & Validation: React Hook Form + Zod
• Charts: Recharts
• Runtime/Package Manager: Bun (Optional, supports npm/yarn/pnpm)

📦 Getting Started

Prerequisites

Ensure you have Node.js installed (version 18 or higher is recommended).

Installation

1. Clone the repository:

   git clone <your-repo-url>
   cd pick-proud

2. Install dependencies:

   # If using npm
   npm install
   
   # If using Bun
   bun install

Development

Start the development server with auto-reloading:

# If using npm
npm run dev

# If using Bun
bun dev

The application will be available at http://localhost:8080 (or the port specified by Vite).

Building for Production

To create an optimized production build:

# If using npm
npm run build

# If using Bun
bun run build

📂 Project Structure

src/
├── components/     # Reusable UI components (shadcn/ui, Layout, etc.)
├── data/           # Static product data and constants
├── hooks/          # Custom React hooks
├── lib/            # Utility functions and library configurations
├── pages/          # Main page components (Index, Products, Detail, etc.)
├── App.tsx         # Main application component and routing
└── main.tsx        # Application entry point

🧪 Testing

The project uses Vitest for unit and component testing.

# Run tests once
npm run test

# Run tests in watch mode
npm run test:watch

🌐 Deployment

This project is optimized for deployment on platforms like Vercel, Netlify, or GitHub Pages. Simply connect your repository and the build command npm run build with the output directory dist will handle the rest.

---

Built with ❤️ by the Pick Proud Team.