Trendify - Modern E-Commerce System

A stunning, animated e-commerce platform that brings fashion to life. Built with cutting-edge technologies for a seamless shopping experience, featuring smooth animations, beautiful UI components, and modern design principles.

Designed with ❤️ by Jordan Theovandy

✨ Features

• 🎨 Beautiful Design: Crafted with Figma for pixel-perfect UI/UX
• 🚀 Smooth Animations: Fluid transitions and micro-interactions throughout
• 📱 Responsive: Optimized for desktop, tablet, and mobile devices
• 🛒 Full E-Commerce Flow: Product browsing, cart management, checkout, and order confirmation
• 🔍 Advanced Search & Filtering: Find products effortlessly
• 💳 Secure Checkout: Integrated payment processing simulation
• 🌟 Modern UI Components: Built with shadcn/ui and Tailwind CSS
• ⚡ Fast Performance: Powered by Vite for lightning-fast development and builds
• 🔒 Type-Safe: Full TypeScript implementation for reliability
• 🎭 Interactive Elements: Hover effects, modals, and dynamic content

🛠️ Tech Stack

• Frontend: React 18.3.1 with TypeScript
• Build Tool: Vite 6.3.5
• Styling: Tailwind CSS with custom animations
• UI Components: shadcn/ui component library
• API: MockAPI.io for backend simulation
• Design: Figma for UI/UX design
• Testing: Vitest with jsdom
• Icons: Lucide React
• State Management: React Context API
• Routing: React Router v6

🚀 Quick Start

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/jordantheovandy/trendify-ecommerce.git
   cd trendify-ecommerce-system

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173 to see Trendify in action!

Build for Production

npm run build

Run Tests

npm run test

🎨 Design & Development

This project was meticulously designed in Figma and brought to life with modern web technologies. The focus is on creating a visually stunning experience with:

• Smooth Animations: CSS transitions, transforms, and keyframe animations
• Interactive Components: Hover states, click animations, and loading states
• Modern Aesthetics: Clean typography, consistent spacing, and vibrant colors
• Accessibility: WCAG compliant design with proper contrast and keyboard navigation

📊 API Integration

Powered by MockAPI.io for realistic backend simulation:

• Product catalog management
• Cart persistence
• Order processing
• User authentication (simulated)

🤝 Contributing

We welcome contributions! Please see our Development Guide for detailed setup and contribution guidelines.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Original design inspiration from Figma community templates
• Built with love by Jordan Theovandy
• Thanks to the open-source community for amazing tools and libraries

---

Experience the future of online shopping with Trendify! 🛍️✨