{"id":49406863,"url":"https://github.com/saadamir1/mericloset","last_synced_at":"2026-04-28T21:36:56.984Z","repository":{"id":265741610,"uuid":"864885580","full_name":"saadamir1/mericloset","owner":"saadamir1","description":"MeriCloset: Smart fashion discovery across multiple brands","archived":false,"fork":false,"pushed_at":"2025-10-04T01:34:39.000Z","size":5481,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-23T16:43:53.901Z","etag":null,"topics":["admin-dashboard","brand-portal","collaborative-filtering","content-based-filtering","e-commerce","fashion","marketplace","nodejs","personalized-shopping","product-recommendation","react","small-business","web-scraping"],"latest_commit_sha":null,"homepage":"https://mericloset.vercel.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/saadamir1.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-09-29T12:34:31.000Z","updated_at":"2025-10-04T01:34:42.000Z","dependencies_parsed_at":"2024-11-30T19:29:26.284Z","dependency_job_id":"94cef614-2e4f-453b-8afd-c0d814fbb8dc","html_url":"https://github.com/saadamir1/mericloset","commit_stats":null,"previous_names":["saadamir1/mericloset"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/saadamir1/mericloset","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadamir1%2Fmericloset","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadamir1%2Fmericloset/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadamir1%2Fmericloset/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadamir1%2Fmericloset/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saadamir1","download_url":"https://codeload.github.com/saadamir1/mericloset/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saadamir1%2Fmericloset/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32400871,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T19:38:08.556Z","status":"ssl_error","status_checked_at":"2026-04-28T19:37:55.688Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["admin-dashboard","brand-portal","collaborative-filtering","content-based-filtering","e-commerce","fashion","marketplace","nodejs","personalized-shopping","product-recommendation","react","small-business","web-scraping"],"created_at":"2026-04-28T21:36:56.286Z","updated_at":"2026-04-28T21:36:56.977Z","avatar_url":"https://github.com/saadamir1.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MeriCloset Frontend\n\nA modern React-based frontend for MeriCloset - a personalized fashion platform that curates products from various fashion brands, enabling users to make smarter shopping decisions.\n\n## 🚀 Features\n\n- **Personalized Shopping Experience**: AI-powered product recommendations\n- **Product Comparison**: Side-by-side comparison of products from different brands\n- **Advanced Search \u0026 Filtering**: Filter by size, color, price, material, and sustainability\n- **User Closet Management**: Personal wardrobe organization (entities defined, no UI implementation)\n- **Favorites \u0026 Wishlists**: Save and organize favorite products\n- **Brand Discovery**: Explore products from various fashion brands\n- **Secure Payments**: Integrated Stripe payment processing\n- **AI Chatbot**: Gemini-powered shopping assistant for product recommendations\n- **Product Reviews \u0026 Feedback**: User rating and review system\n- **Admin \u0026 Brand Portals**: Separate dashboards for different user roles\n- **Responsive Design**: Optimized for desktop and mobile devices\n\n## 🛠️ Tech Stack\n\n- **Framework**: React 18 with TypeScript\n- **Build Tool**: Vite\n- **UI Library**: Chakra UI + Material-UI\n- **State Management**: Zustand\n- **Data Fetching**: TanStack React Query (React Query)\n- **HTTP Client**: Axios\n- **Routing**: React Router DOM\n- **Authentication**: JWT with express-jwt\n- **Animations**: Framer Motion\n- **Forms**: React Hook Form\n- **File Uploads**: React Dropzone\n- **Payments**: Stripe React Components\n- **Notifications**: React Toastify\n\n## 📋 Prerequisites\n\n- Node.js (v16 or higher)\n- npm or yarn\n- MeriCloset Backend API running\n\n## 🚀 Installation \u0026 Setup\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/saadamir1/mericloset.git\n   cd mericloset/mericloset\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   ```\n\n3. **Environment Configuration**\n   \n   Create a `.env` file in the root directory:\n   ```env\n   VITE_API_URL=http://localhost:3000/api/v1\n   VITE_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key\n   VITE_BASE_URL=http://localhost:5173\n   ```\n\n4. **Start development server**\n   ```bash\n   npm run dev\n   ```\n\n5. **Open in browser**\n   \n   Navigate to [http://localhost:5173](http://localhost:5173)\n\n## 📜 Available Scripts\n\n- `npm run dev` - Start development server\n- `npm run build` - Build for production\n- `npm run preview` - Preview production build\n- `npm run lint` - Run ESLint\n- `npm start` - Start development server with auto-open\n\n## 📁 Project Structure\n\n```\nsrc/\n├── assets/          # Static assets (images, icons)\n├── components/      # Reusable UI components\n├── data/           # Static data and constants\n├── entities/       # TypeScript interfaces and types\n├── hooks/          # Custom React hooks\n├── pages/          # Application pages/routes\n├── services/       # API services and utilities\n├── comparisonStore.ts  # Product comparison state\n├── store.ts        # Main application state\n├── userStore.ts    # User authentication state\n├── theme.ts        # Chakra UI theme configuration\n├── routes.tsx      # Application routing\n└── main.tsx        # Application entry point\n```\n\n## 🔧 Key Features Implementation\n\n### State Management\n- **Zustand** for lightweight, fast state management\n- Separate stores for user authentication, product comparison, and main app state\n\n### Authentication\n- JWT-based authentication\n- Persistent login state\n- Protected routes\n\n### Product Features\n- Advanced filtering and search\n- Product comparison functionality\n- Personalized recommendations\n- Favorites and wishlist management\n\n### Payment Integration\n- Stripe payment processing\n- Secure checkout flow\n- Order management\n\n## 🎨 UI/UX Features\n\n- **Responsive Design**: Mobile-first approach\n- **Dark/Light Mode**: Theme switching capability\n- **Smooth Animations**: Framer Motion integration\n- **Accessible Components**: Chakra UI accessibility features\n- **Loading States**: Skeleton loaders and spinners\n- **Toast Notifications**: User feedback system\n\n## 🔗 API Integration\n\nThe frontend communicates with the MeriCloset backend API for:\n- User authentication and management\n- Product catalog and search\n- Order processing\n- Recommendation engine\n- Brand management\n- Admin dashboard data\n\n## 🚀 Deployment\n\n### Build for Production\n```bash\nnpm run build\n```\n\n### Deploy to Vercel\nThe project includes `vercel.json` configuration for easy Vercel deployment.\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📝 License\n\nThis project is part of a BSc Computer Science Final Year Project.\n\n## 👨‍💻 Author\n\n**Saad Amir** - BSc Computer Science Student\n\n---\n\n**Note**: This is a Final Year Project (FYP) for BSc Computer Science degree, showcasing modern web development practices and technologies in the fashion e-commerce domain.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaadamir1%2Fmericloset","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaadamir1%2Fmericloset","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaadamir1%2Fmericloset/lists"}