This is a simple 🛒 Shopping Cart application built using modern web technologies. It allows users to seamlessly add and remove items from their cart. The project demonstrates practical use of Jotai for state management, TailwindCSS for styling, and TailwindCSS Motion for animations.
- Add and remove items from the cart with ease.
- Fully responsive design for optimal viewing on all devices.
- Smooth animations for an enhanced user experience.
-
Clone the repository:
git clone https://github.com/AbdurRahman-Khalil/cartify.git
-
Navigate to the project directory:
cd cartify -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and go to:
http://localhost:5173/cartify/ -
Interact with the application by adding or removing items from the cart.
Jotai is utilized for managing the global state of the shopping cart. Key aspects include:
- Cart Items: The list of items in the cart.
- Item Count: Quantity of an item in the cart and its price based on quantity.
- Cart Total: The cumulative price of all items in the cart.
Smooth and responsive animations are implemented using TailwindCSS Motion. Examples include:
- Product Entry Animation: Items smoothly appear when displayed on the product list.
- Cart Products Enter Animation: Items animate into view when added to the cart.
- Cart Page Enter Animation: The cart page animates when navigated to.
TailwindCSS provides utility-based styling, making it easy to build responsive designs. Custom configurations are managed in the tailwind.config.js file.
Contributions are encouraged! Follow these steps to contribute:
- Fork the repository.
- Create a new branch:
git checkout -b feature-name
- Make your changes and commit them:
git commit -m "Add feature-name" - Push your branch:
git push origin feature-name
- Submit a pull request for review.
- ReactJS Documentation
- TailwindCSS Documentation
- Jotai Documentation
- TailwindCSS Motion Documentation