👟 KickVault

A modern sneaker marketplace web application built with React 19, TypeScript, Tailwind CSS, Motion, and Vite.

KickVault is designed as a polished e-commerce experience for discovering sneakers, exploring product details, managing a cart, and completing a guided checkout flow.

✨ Features

• Dynamic landing page with featured drops and curated sneaker collections
• Search, filtering, price controls, and sorting
• Multi-image product gallery and colorway selection
• International sneaker size selection and size conversion tools
• Interactive shopping cart with subtotal, shipping, and discount calculations
• Guided multi-step checkout interface with form validation
• Order confirmation experience
• Grails wishlist for saving favorite sneakers

🛠️ Tech Stack

Technology	Purpose
React 19	User interface and component architecture
TypeScript	Type-safe application development
Tailwind CSS 4	Styling and responsive layouts
Motion	UI animations and transitions
Lucide React	Interface icons
Vite	Development server and production build tooling

📂 Project Structure

KICKVAULT/
├── src/                 # Application source code
├── assets/              # Project assets
├── screenshots/         # Project screenshots
├── index.html           # Application entry document
├── package.json         # Dependencies and scripts
├── vite.config.ts       # Vite configuration
├── tsconfig.json        # TypeScript configuration
└── README.md

⚙️ Run Locally

1. Clone the repository

git clone https://github.com/saadrahmans/KICKVAULT.git
cd KICKVAULT

2. Install dependencies

npm install

3. Start the development server

npm run dev

The development server is configured to run on port 3000.

4. Create a production build

npm run build

5. Preview the production build

npm run preview

📸 Screenshots

🏠 Home

👟 Sneaker Catalog

🔍 Product Details

🛒 Shopping Cart

💳 Checkout

✅ Order Confirmation

📚 What I Learned

Building KickVault helped me gain practical experience with:

• Building a modern React application with TypeScript
• Designing reusable e-commerce UI components
• Creating responsive layouts with Tailwind CSS
• Managing interactive cart and checkout flows
• Implementing form validation and pricing logic
• Creating animated interfaces with Motion
• Structuring and building applications with Vite

🚀 Future Improvements

• Real user authentication
• Persistent user accounts and saved wishlists
• Backend product and order management
• Database-backed inventory
• Order history and account dashboard
• Admin product-management tools
• Production deployment

👨‍💻 Author

Mohammad Saad ur Rahman

• GitHub: saadrahmans
• LinkedIn: Mohammad Saad ur Rahman

---

KickVault was built as a hands-on project to strengthen my experience with modern frontend development, e-commerce workflows, TypeScript, and responsive UI design.