👟 Fake Store

A cutting-edge, high-performance web application for browsing and managing products. This project is built using the latest React 19 and Vite 7, leveraging the full power of the TanStack ecosystem for a seamless, type-safe user experience.

🚀 Live Demo

Check out the live application here!

✨ Key Features

Infinite Scroll Catalog: Seamless product browsing with automatic data fetching as you scroll (via react-intersection-observer).
Skeleton Loading: Polished UX with custom skeleton placeholders for products and detail pages.
Type-Safe Routing: Advanced navigation using TanStack Router with protected routes and dynamic path parameters ($productId).
Server-State Management: Efficient caching, background updates, and loading states powered by TanStack Query v5.
Type-Safe API Calls: Integration with the backend using openapi-fetch for end-to-end TypeScript safety.
Modern UI/UX: Responsive design built with Tailwind CSS, interactive components, and toast notifications via Sonner.
Form Validation: Robust form handling with React Hook Form and Zod schema validation.

🛠 Tech Stack

Tool	Purpose
React 19	Core UI library with Concurrent Mode features
Vite 7	Next-generation frontend tooling and build system
TanStack Router	Fully type-safe, file-based routing with Hash History
TanStack Query v5	Declarative data fetching and state synchronization
Tailwind CSS	Utility-first CSS framework for rapid styling
OpenAPI-fetch	Ultra-lightweight and type-safe fetch client
TypeScript 5.9+	Strict type-checking for enterprise-grade reliability

⚙️ Getting Started

1. Clone the Repository

Choose your preferred method (SSH is recommended for secure, passwordless access):

git clone [email protected]:W0x3R/Fake-Store.git

2. Install Dependencies

cd Fake-Store
git checkout dev-page
npm install

3. Run Development Server

npm run dev

4. Build for Production

npm run build

SV10P/Fake-Store

README