https://github.com/ANT0NI0US/STOREIFY
Ecommerce-related project. That allow users browse and select multiple products, add items to their cart with custom quantities, mark favorites, and checkout by providing their shipping details. Admins can easily manage the platform by adding new products, viewing orders, and managing users.
https://github.com/ANT0NI0US/STOREIFY
css3 firebase framer-motion html5 react-hook-form react-icons react-multi-carousel react-redux react-router-dom react-select react-toastify redux-toolkit tailwind-css tailwindcss typescript
Last synced: 5 months ago
JSON representation
Ecommerce-related project. That allow users browse and select multiple products, add items to their cart with custom quantities, mark favorites, and checkout by providing their shipping details. Admins can easily manage the platform by adding new products, viewing orders, and managing users.
- Host: GitHub
- URL: https://github.com/ANT0NI0US/STOREIFY
- Owner: ANT0NI0US
- Created: 2024-04-02T19:17:40.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-22T23:20:09.000Z (about 1 year ago)
- Last Synced: 2024-12-22T23:27:55.691Z (about 1 year ago)
- Topics: css3, firebase, framer-motion, html5, react-hook-form, react-icons, react-multi-carousel, react-redux, react-router-dom, react-select, react-toastify, redux-toolkit, tailwind-css, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://storeify-website.netlify.app/
- Size: 1.84 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **STOREIFY** [Demo](https://storeify-website.netlify.app/)
E-commerce platform that delivers an engaging and seamless shopping experience with a beautifully designed interface.
## 📦 **Installation**
1- Clone the Repository:
```bash
git clone https://github.com/ANT0NI0US/.git
cd ANT0NI0US-STOREIFY
```
2- Install Dependencies:
```bash
npm install
```
3- Configure Firebase: Update the `firebase.config.ts` file with your Firebase project credentials.
4- Start the Development Server:
```bash
npm run dev
```
5- Build for Production:
```bash
npm run build
```
## 📄 **Usage**
- Home Page: Browse featured products, offers, and new arrivals.
- Shop: Explore and filter products by category, and view detailed product descriptions.
- Cart: Manage selected items, adjust quantities, and proceed to checkout.
- Favorites: Save and organize your favorite products for easy access.
- Orders: Track your purchase history and view order details.
- About: Learn about Storeify’s mission, vision, and services such as fast shipping, secure payments, exceptional customer support, and hassle-free returns.
- Contact: Reach out for inquiries or feedback through an integrated email form.
## 🚀 **Features**
- Browse products with filters and categories.
- Add items to the cart with custom quantities.
- Mark favorite products and manage a wishlist.
- Proceed to checkout.
- View order details and status updates.
- Interactive user authentication (Sign Up, Login, Logout).
- Responsive design optimized for all devices.
- Dark mode toggle for a customizable user experience.
- Reusable components for buttons, modals, and forms.
- Dynamic navigation with protected routes.
- Global state management using Redux.
## 🛠️ **Technologies Used**
- [React](https://reactjs.org/): For building the user interface.
- [TypeScript](https://www.typescriptlang.org/): Ensuring type safety and scalability.
- [Tailwind CSS](https://tailwindcss.com/): For fast and responsive styling.
- [Redux](https://redux.js.org/): Managing the global state of the application.
- [Firebase](https://firebase.google.com/): Authentication and data storage.
- [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5): The latest version of HTML, providing new elements and APIs for modern web development, enhancing structure, multimedia handling, and mobile performance.
- [React-icons](https://react-icons.github.io/react-icons/): For beautiful icons.
- [React-router-dom](https://reactrouter.com/): Navigation and routing.
- [React-hook-form](https://react-hook-form.com/): Simplified form handling.
- [React-multi-carousel](https://www.npmjs.com/package/react-multi-carousel): Elegant product carousels.
- [EmailJS](https://www.emailjs.com/): For integrating the contact form.
- [React-hot-toast](https://react-hot-toast.com/docs): Interactive toast notifications.
## 📷 **Gallery**
![Home](https://i.ibb.co/nQz14y2/Storeify.webp")
![Shop](https://i.ibb.co/G0T6xtx/Shop.png")
![Orders](https://i.ibb.co/wgz7v8J/Orders.png")
![About](https://i.ibb.co/WKtXwMM/About.png")
![Contact](https://i.ibb.co/gdjXkvc/Contact.png")
![Cart](https://i.ibb.co/HNNRJRF/Cart.png")
![Favourites](https://i.ibb.co/tcNwHvz/Favourites.png")
![Check-out](https://i.ibb.co/HNyGSTN/Check-out.png")
## 🤝 **Contributing**
Contributions are welcome! Please follow these steps:
1- Fork the repository.
2- Create a feature branch: `git checkout -b feature-name`.
3- Commit your changes: `git commit -m 'Add new feature'`.
4- Push to the branch: `git push origin feature-name`.
5- Open a Pull Request.
## 👤 **Author**
Project Title was created by [Antonious Nasr Kamel](https://github.com/ANT0NI0US) - [Linkedin](https://www.linkedin.com/in/antonious-nasr/) - [Portfolio](https://antonious-portfolio.netlify.app/).
Contact me via [email](mailto:antoniousnasr3@gmail.com) for any inquiries.