MagicFit is an e-commerce platform built with React and TailwindCSS that allows users to compare the sizes of different clothing items with their own measurements. This tool provides a better shopping experience by ensuring the clothes you buy online fit you perfectly. Simply enter your body measurements in the MagicFit section and browse the clothes to find the perfect fit!
- MagicFit Section: Input your body measurements and compare clothing sizes available on the platform.
- Detailed Comparison: Compare chest, waist, hips, and other important size aspects.
- Add to Cart: Easily add clothes that fit well directly to the shopping cart.
- User Authentication: Secure sign-in and sign-out functionality using the
authsystem. - Responsive Design: Built with TailwindCSS for mobile-friendly, responsive layouts.
- Redux Integration: Manage the cart and MagicFit comparison state efficiently with Redux.
The project follows a well-organized structure for easy scalability and maintainability.
src/
│
├── assets/ # Static assets like images (e.g., react.svg)
├── auth/ # Authentication-related components
│ └── SignIn.jsx # Sign-in page component
├── components/ # Reusable UI and feature-based components
│ ├── cart/ # Cart-related components
│ ├── custom/ # Custom components
│ ├── footer/ # Footer component
│ ├── header/ # Header component
│ ├── magicfit/ # MagicFit-specific components
│ ├── products/ # Product-related components
│ └── ui/ # Generic UI components like buttons, dialogs, inputs
│ ├── button.jsx # Button component
│ ├── dialog.jsx # Dialog component
│ └── input.jsx # Input component
├── home/ # Home page component
│ └── Home.jsx
├── lib/ # Shared utility functions
│ └── utils.js
├── redux/ # Redux slices and store configuration
│ ├── Slices/ # Redux slices for cart and MagicFit
│ │ ├── CartSlice.js # Cart management logic
│ │ └── MagicFitSlice.js # MagicFit comparison logic
│ └── Store.js # Redux store configuration
├── App.jsx # Main App component
├── index.css # Global styles (tailwind imports)
├── main.jsx # Entry point for React app
├── .eslintrc.cjs # ESLint configuration
├── tailwind.config.js # Tailwind CSS configuration
└── vite.config.js # Vite configuration for development/build
- React.js: JavaScript library for building user interfaces.
- TailwindCSS: A utility-first CSS framework for styling.
- Redux: For managing global application state, such as cart and MagicFit data.
- Vite: A fast build tool and development server.
- ESLint: For maintaining code quality and enforcing best practices.
- PostCSS: For processing CSS and utilizing TailwindCSS.
Ensure you have Node.js and npm (or yarn) installed on your local machine.
-
Clone the repository:
git clone https://github.com/your-username/magicfit.git cd magicfit -
Install the dependencies:
npm install
-
Start the development server:
npm run dev
-
Open the application in your browser:
http://localhost:3000
- MagicFit Section: Enter your body measurements in the MagicFit form to receive tailored size comparisons.
- Browse Products: Explore clothing items and use MagicFit to compare them with your measurements.
- Add to Cart: Add perfectly fitting clothes to your shopping cart for easy checkout.
We welcome contributions to improve MagicFit!
To contribute:
- Fork the repository.
- Create a new feature branch:
git checkout -b feature-name
- Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin feature-name
- Open a pull request and describe your changes.
This project is licensed under the MIT License. See the LICENSE file for details.
MagicFit - Where finding the perfect fit is just a click away! ✨👗👚👕