⚡ Zapier Clone - Interface Tab

A pixel-perfect clone of Zapier's Interface tab, developed during my internship at Whitespaces.AI. This project showcases my frontend development skills with modern tech stack and attention to detail.

🌐 Live Preview

✨ Features

• 🔍 Advanced Search Functionality - Fully implemented search feature to filter through interfaces
• 🏷️ Dynamic Filtering - Interactive filtering system to narrow down results
• 📊 Custom Dropdown Spinner - Responsive and intuitive dropdown component
• 💎 Pixel-Perfect UI - Meticulously crafted interface matching Zapier's design
• 🎨 Modern Design - Built with Tailwind CSS for a sleek, responsive layout

🛠️ Tech Stack

• Frontend Framework: React 18
• Type Safety: TypeScript
• Styling: Tailwind CSS
• Build Tool: Vite
• State Management: React Hooks
• Component Architecture: Functional Components

🚀 Project Structure

darshan-gowdaa/zapier-clone-react/
├── eslint.config.js
├── index.html
├── package.json
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── src/
    ├── App.css
    ├── App.tsx
    ├── index.css
    ├── main.tsx
    ├── vite-env.d.ts
    ├── components/          
    │   ├── FeatureList.tsx
    │   ├── Footer.tsx
    │   ├── Header.tsx
    │   ├── Sidebar.tsx
    │   ├── TemplateCard.tsx
    │   ├── TemplateGallery.tsx
    │   └── Topbar.tsx
    ├── data/
    │   ├── categories.ts
    │   └── templates.ts
    └── types/
        └── template.ts

🎯 Implementation Focus

This project focuses on demonstrating advanced frontend development skills:

• ⚡ Component Architecture - Well-organized, reusable components
• 🎨 Styling Expertise - Advanced Tailwind CSS usage
• 📱 Responsive Design - Seamless experience across devices
• 🔍 Search & Filter Logic - Complex state management and filtering
• 🎭 TypeScript Integration - Strong typing and type safety

🎓 Learning Outcomes

During this internship project at Whitespaces.AI, I gained valuable experience in:

• Building pixel-perfect UI implementations
• Working with TypeScript in a production environment
• Implementing complex search and filter functionality
• Creating responsive and accessible components
• Following industry best practices for code organization

📝 Notes

• This is a frontend-focused project demonstrating UI/UX capabilities
• Search, filter, and dropdown functionalities are fully implemented
• Other features are UI-only implementations

---

👤 Author

Darshan Gowda G S

---

Developed during internship at Whitespaces.AI - 2025