{"id":20199626,"url":"https://github.com/adarsonmez/e-commerce-store","last_synced_at":"2026-02-23T21:44:06.018Z","repository":{"id":44408887,"uuid":"453687692","full_name":"adarSonmez/e-commerce-store","owner":"adarSonmez","description":"E-commerce store. Used TypeScript, ReactJS, Redux, Firebase, Stripe API, and PWA.","archived":false,"fork":false,"pushed_at":"2025-02-07T21:39:09.000Z","size":1167,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-07T22:31:03.186Z","etag":null,"topics":["e-commerce","firebase","pwa","react","redux"],"latest_commit_sha":null,"homepage":"https://my-boutique.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adarSonmez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-30T13:28:29.000Z","updated_at":"2025-02-07T21:39:12.000Z","dependencies_parsed_at":"2022-07-14T19:17:02.193Z","dependency_job_id":null,"html_url":"https://github.com/adarSonmez/e-commerce-store","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adarSonmez%2Fe-commerce-store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adarSonmez%2Fe-commerce-store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adarSonmez%2Fe-commerce-store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adarSonmez%2Fe-commerce-store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adarSonmez","download_url":"https://codeload.github.com/adarSonmez/e-commerce-store/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241637149,"owners_count":19994925,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["e-commerce","firebase","pwa","react","redux"],"created_at":"2024-11-14T04:38:17.589Z","updated_at":"2026-02-23T21:44:06.012Z","avatar_url":"https://github.com/adarSonmez.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# My Boutique - E-Commerce Store\r\n\r\nA modern, responsive e-commerce application built with React, TypeScript, and Firebase, featuring a complete shopping experience with user authentication, cart management, and payment processing.\r\n\r\n## 🚀 Live Demo\r\n\r\nVisit the live application: [https://my-boutique.netlify.app/](https://my-boutique.netlify.app/)\r\n\r\n## ✨ Features\r\n\r\n### Core Functionality\r\n\r\n- **Product Catalog**: Browse collections of hats, jackets, sneakers, and clothing for men and women\r\n- **Interactive Product Slider**: Custom-built slider component with smooth animations\r\n- **Shopping Cart**: Add, remove, and manage items with real-time updates\r\n- **User Authentication**: Sign up/in with email or Google OAuth\r\n- **Secure Payments**: Stripe integration for payment processing\r\n- **Responsive Design**: Mobile-first approach with adaptive layouts\r\n\r\n### Technical Features\r\n\r\n- **Progressive Web App (PWA)**: Service worker implementation for offline functionality\r\n- **State Management**: Redux Toolkit with persistence\r\n- **Real-time Data**: Firebase Firestore integration\r\n- **Type Safety**: Full TypeScript implementation\r\n- **Modern Routing**: React Router v6 with protected routes\r\n- **Accessibility**: ARIA labels and semantic HTML\r\n\r\n## 🛠 Tech Stack\r\n\r\n### Frontend\r\n\r\n- **React 18** - Modern React with hooks and concurrent features\r\n- **TypeScript** - Type-safe development\r\n- **Redux Toolkit** - State management with RTK Query\r\n- **React Router v6** - Client-side routing\r\n- **Sass** - Advanced CSS preprocessing\r\n\r\n### Backend \u0026 Services\r\n\r\n- **Firebase Authentication** - User management\r\n- **Firestore** - NoSQL database\r\n- **Stripe** - Payment processing\r\n- **Netlify Functions** - Serverless backend\r\n\r\n### Development Tools\r\n\r\n- **Vite** - Fast build tool and dev server\r\n- **ESLint** - Code linting\r\n- **Workbox** - Service worker management\r\n- **Redux DevTools** - State debugging\r\n\r\n## 🚦 Getting Started\r\n\r\n### Prerequisites\r\n\r\n- Node.js 16+ and npm\r\n- Firebase project with Authentication and Firestore enabled\r\n- Stripe account for payment processing\r\n\r\n### Installation\r\n\r\n1. **Clone the repository**\r\n\r\n   ```bash\r\n   git clone https://github.com/yourusername/e-commerce-store.git\r\n   cd e-commerce-store\r\n   ```\r\n\r\n2. **Install dependencies**\r\n\r\n   ```bash\r\n   npm install\r\n   ```\r\n\r\n3. **Environment Configuration**\r\n   Create a `.env` file in the root directory:\r\n\r\n   ```env\r\n   # Firebase Configuration\r\n   REACT_APP_FIREBASE_API_KEY=your_firebase_api_key\r\n   REACT_APP_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com\r\n   REACT_APP_FIREBASE_PROJECT_ID=your_project_id\r\n   REACT_APP_FIREBASE_STORAGE_BUCKET=your_project.appspot.com\r\n   REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_sender_id\r\n   REACT_APP_FIREBASE_APP_ID=your_app_id\r\n   REACT_APP_FIREBASE_MEASUREMENT_ID=your_measurement_id\r\n\r\n   # Stripe Configuration\r\n   REACT_APP_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key\r\n   STRIPE_SECRET_KEY=your_stripe_secret_key\r\n   ```\r\n\r\n4. **Start development server**\r\n   ```bash\r\n   npm start\r\n   ```\r\n\r\nThe application will be available at `http://localhost:3000`\r\n\r\n## 📱 Usage\r\n\r\n### For Customers\r\n\r\n1. **Browse Products**: Navigate through different collections on the homepage\r\n2. **Product Details**: Use the interactive slider to view products\r\n3. **Shopping Cart**: Add items and manage quantities\r\n4. **Authentication**: Sign up or sign in to access checkout\r\n5. **Payment**: Complete purchases using test card: `4242 4242 4242 4242`\r\n\r\n### Test Payment Information\r\n\r\n- **Card Number**: 4242 4242 4242 4242\r\n- **Expiry**: 01/30\r\n- **CVC**: 123\r\n\r\n## 🏗 Project Structure\r\n\r\n```\r\nsrc/\r\n├── components/          # Reusable UI components\r\n│   ├── cart-dropdown/   # Shopping cart dropdown\r\n│   ├── collection-slider/ # Product carousel\r\n│   ├── custom-button/   # Styled button component\r\n│   ├── form-input/      # Form input with floating labels\r\n│   └── ...\r\n├── pages/              # Route components\r\n│   ├── homepage/       # Landing page\r\n│   ├── shop/          # Product catalog\r\n│   ├── checkout/      # Payment processing\r\n│   └── ...\r\n├── store/             # Redux state management\r\n│   └── features/      # Feature-based slices\r\n│       ├── auth/      # Authentication state\r\n│       ├── cart/      # Shopping cart state\r\n│       ├── shop/      # Product catalog state\r\n│       └── ...\r\n├── utils/             # Utility functions\r\n│   ├── firebase/      # Firebase configuration\r\n│   └── stripe/        # Stripe configuration\r\n└── assets/           # Static assets\r\n```\r\n\r\n## 🎨 Key Components\r\n\r\n### State Management\r\n\r\n- **Auth Slice**: Manages user authentication state with Firebase integration\r\n- **Cart Slice**: Handles shopping cart operations using Redux Toolkit's createEntityAdapter\r\n- **Shop Slice**: Manages product catalog with async thunks for data fetching\r\n- **Directory Slice**: Controls homepage category navigation\r\n\r\n### Custom Components\r\n\r\n- **CollectionSlider**: Interactive product carousel with touch/mouse controls\r\n- **PaymentForm**: Stripe-integrated payment processing\r\n- **CustomButton**: Reusable button with multiple variants\r\n- **FormInput**: Input component with floating label animations\r\n\r\n## 🔧 Scripts\r\n\r\n```bash\r\nnpm start        # Start development server\r\nnpm run build    # Build for production\r\nnpm test         # Run test suite\r\nnpm run eject    # Eject from Create React App (irreversible)\r\n```\r\n\r\n## 🌐 Deployment\r\n\r\nThe application is configured for deployment on Netlify with:\r\n\r\n- Automatic redirects for SPA routing\r\n- Serverless functions for payment processing\r\n- PWA capabilities with service worker registration\r\n\r\n## 🔒 Security Features\r\n\r\n- Firebase Authentication with Google OAuth\r\n- Protected routes for authenticated users\r\n- Secure payment processing through Stripe\r\n- Environment variable protection for sensitive keys\r\n\r\n## 🎯 Performance Optimizations\r\n\r\n- Code splitting with React.lazy (ready for implementation)\r\n- Redux state persistence for improved UX\r\n- Optimized images and assets\r\n- Service worker caching strategies\r\n- Responsive design for various screen sizes\r\n\r\n## 🤝 Contributing\r\n\r\n1. Fork the repository\r\n2. Create a feature branch (`git checkout -b feature/AmazingFeature`)\r\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\r\n4. Push to the branch (`git push origin feature/AmazingFeature`)\r\n5. Open a Pull Request\r\n\r\n## 📄 License\r\n\r\nThis project is licensed under the MIT License - see the LICENSE file for details.\r\n\r\n## 👤 Author\r\n\r\n**Adar Sönmez**\r\n\r\n- LinkedIn: [https://www.linkedin.com/in/adar-sonmez/](https://www.linkedin.com/in/adar-sonmez/)\r\n\r\n## 🙏 Acknowledgments\r\n\r\n- Firebase for backend services\r\n- Stripe for payment processing\r\n- React community for excellent documentation\r\n- All contributors and users of this project\r\n\r\n---\r\n\r\n**Note**: This is a portfolio project demonstrating modern React development practices. Payment functionality uses Stripe's test mode with provided test card details.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadarsonmez%2Fe-commerce-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadarsonmez%2Fe-commerce-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadarsonmez%2Fe-commerce-store/lists"}