KONUKKO E-Commerce App

🚀 A performant and visually-rich e-commerce storefront built with a modern React stack. Features a custom animation system with Framer Motion, efficient data fetching with TanStack Query, and a polished, fully-responsive UI with dual-theming and dark mode.

---

🚀 Live Demo & Preview

Check out the live version of the application: konukko.vercel.app

---

✨ Features

• 🎨 Dual Theming: Switch between Azure and Royal color themes.
• 🌓 Light & Dark Modes: Beautifully crafted light and dark modes for user comfort.
• 🚀 Smooth Animations: Page transitions and UI elements are animated with framer-motion.
• 🔍 Live Search: Instant search results appear in a dropdown as you type.
• 🛒 Fly-to-Cart Animation: Engaging visual feedback when adding items to the cart.
• 💅 Styled Components: A fully-styled component library for a consistent and modern look.
• 📱 Responsive Design: A great user experience on all devices, from mobile to desktop.
• 뱃 New Product Badges: Recently added products are highlighted with a "New" badge on hover.

🛠️ Tech Stack

• React: A JavaScript library for building user interfaces.
• React Router: For declarative routing in the application.
• Framer Motion: For production-ready animations.
• Styled Components: For component-level styling.
• React Feather: A collection of simply beautiful open source icons.
• TanStack Query: For data fetching, caching, and state management.

🚀 Getting Started

Prerequisites

Make sure you have Node.js (>=14.0.0) and npm installed on your machine.

Installation

1. Clone the repository:

   git clone https://github.com/your-username/konukko-app.git

2. Navigate to the project directory:

   cd konukko-app

3. Install the dependencies:

   npm install

📜 Available Scripts

In the project directory, you can run the following commands:

▶️ npm start

Runs the app in development mode. Open http://localhost:3000 to view it in your browser. The page will reload when you make changes.

🧪 npm test

Launches the test runner in interactive watch mode.

📦 npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

⏏️ npm run eject

Note: this is a one-way operation. Once you eject, you can't go back! This command will remove the single build dependency and copy all configuration files and transitive dependencies into your project.

🔧 Configuration

• API Base URL: The app uses an environment variable to point at the backend API. Create a .env file (not checked into source control) and set REACT_APP_API_BASE to your API base URL. Example in .env.example: