https://github.com/ant0ni0us/storeify
An E-commerce project that allows users to browse and select multiple products, add items to their cart with custom quantities, mark favorites, and checkout by providing their shipping details. Users can also view a comprehensive list of all their orders.
https://github.com/ant0ni0us/storeify
css3 date-fns ecommerce emailjs-browser firebase html5 react react-hook-form react-hot-toast react-icons react-multi-carousel react-redux react-router-dom react-select redux tailwindcss typescript
Last synced: 2 months ago
JSON representation
An E-commerce project that allows users to browse and select multiple products, add items to their cart with custom quantities, mark favorites, and checkout by providing their shipping details. Users can also view a comprehensive list of all their orders.
- 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: 2025-08-31T08:50:12.000Z (5 months ago)
- Last Synced: 2025-08-31T10:21:57.036Z (5 months ago)
- Topics: css3, date-fns, ecommerce, emailjs-browser, firebase, html5, react, react-hook-form, react-hot-toast, react-icons, react-multi-carousel, react-redux, react-router-dom, react-select, redux, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://storeify-website.netlify.app/
- Size: 2.04 MB
- Stars: 2
- 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.