feat: Add powerful features and updates to Shofy eCommerce app

In this commit, we've introduced a range of exciting features and enhancements to the Shofy eCommerce web application. The updates include: - Implemented dynamic Next.js for improved performance and scalability. - Enhanced backend with robust Express.js for efficient data handling. - Integrated MongoDB with Mongoose for seamless application data modeling. - Added secure and reliable payment options through Stripe integration. - Implemented user authentication with Google login and email verification. - Introduced Redux Toolkit for efficient state management. - Implemented fast data fetching and caching with RTK Query. - Leveraged TypeScript + Next.js for more reliable codebase. - Ensured responsive and touch-friendly design for optimal user experience. - Improved form validation and utilized Bootstrap 5 framework. Additionally, we've introduced several powerful additional features to enhance the eCommerce experience: - Variation Swatch for captivating product pages. - Pagination, Filters by Size & Color for improved user experience. - Video Gallery for detailed product views. - Sale Countdown Timer to increase engagement. - Product Quick View and Quantity Select for convenience. - Google and Email Password-based Authentication for secure accounts. - User Profile and Information Update for easy data management. - Powerful Payment Gateway Integration using Stripe for seamless transactions. Thank you for choosing Shofy! We hope you enjoy the new features. If you have any questions or encounter any issues, feel free to reach out to our support team at [email protected]. Happy selling! 🚀🛍️
Hamed-Hasan · Jul 29, 2023 · d4f289f · d4f289f
1 parent ce6410c
commit d4f289f
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -1,38 +1,143 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Shofy – Full Stack eCommerce Web Application + Admin Panel
 
-## Getting Started
 
-First, run the development server:
+![Shofy Image Banner](https://i.ibb.co/KsDDmmg/shofy-banner.png)
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-```
+Shofy is a powerful and modern full stack eCommerce web application built using Next.js, Express.js, MongoDB with Mongoose, Redux Toolkit, RTK Query, Stripe payment method, Bootstrap 5, and Sass. It includes a feature-rich admin panel for easy management and control of your online store.
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Features Overview
 
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+- **Next.js:** Next.js is The React Framework for Production, providing a fast and scalable foundation for your eCommerce website.
+- **Express.js:** Express.js is a minimal and flexible Node.js web application framework that offers a robust set of features for web and mobile applications.
+- **MongoDB:** MongoDB is a developer-friendly data platform that provides the services and tools necessary to build distributed applications at scale.
+- **Mongoose:** Mongoose provides a straightforward, schema-based solution to model your application data, offering built-in type casting, validation, and query building.
+- **Stripe:** Stripe offers online payment solutions, allowing you to create a secure and reliable website with e-commerce functionality.
+- **Nodemailer:** Nodemailer is a module for Node.js applications that facilitates easy email sending, keeping your users informed and engaged.
+- **Authentication:** Shofy includes features for Google login, user registration, email verification, forgot password, reset password, and profile updates.
+- **Redux Toolkit:** Manage state effortlessly with Redux Toolkit, providing a convenient and efficient way to handle state in your application.
+- **RTK Query:** RTK Query is a powerful data fetching and caching tool, ensuring efficient data retrieval for a smoother user experience.
+- **Typescript + Next.js App Directory:** Shofy leverages TypeScript in combination with Next.js, enhancing code reliability and maintainability.
+- **Form Validation:** Ensure data accuracy and consistency with form validation capabilities.
+- **Bootstrap 5 (latest Version) Framework:** Bootstrap is a popular HTML, CSS, and JS framework for responsive, mobile-first projects.
+- **Responsive Layout Design:** Shofy is fully responsive across all devices, providing a seamless experience for your customers.
+- **Touch Friendly:** The web application is designed for easy browsing on touch devices, making it accessible to a wide range of users.
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+## Full Features List
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+- **React JS:** Utilize the power of React.js to create dynamic and interactive user interfaces.
+- **Next.js:** The React Framework for Production, optimizing your web application's performance.
+- **Express.js:** Create a robust backend for your eCommerce website using Express.js.
+- **MongoDB:** Store and retrieve data efficiently with the flexibility and scalability of MongoDB.
+- **Mongoose:** Model your application data effortlessly with Mongoose's schema-based solution.
+- **Stripe:** Integrate secure and reliable payment solutions into your online store.
+- **Nodemailer:** Keep your users informed with easy email sending capabilities.
+- **Authentication:** Enable secure user registration, login, and profile updates, including Google login option.
+- **Redux Toolkit:** Efficiently manage state in your application with Redux Toolkit.
+- **Dynamic Routes:** Create dynamic and user-friendly URLs for enhanced navigation.
+- **Based on Bootstrap 5.x:** Utilize the latest version of Bootstrap for responsive and customizable design elements.
+- **Free Premium Quality Support:** Enjoy premium support for a smooth development experience.
+- **Logo Slider Integration:** Showcase your brand and products with a logo slider.
+- **Sticky Header:** Improve user navigation with a sticky header that remains visible as users scroll.
+- **Google Fonts:** Access a wide range of fonts from Google Fonts for creative typography.
+- **100% Responsive:** Ensure a seamless experience on all devices with a fully responsive layout.
+- **Nice and Clean Design:** Present your products with a clean and professional design.
+- **Clean and Commented Code:** Maintainable and well-organized code for easy customization.
+- **Customizable Components:** Tailor the components of each page to match your brand identity.
+- **Integrated with FontAwesome:** Utilize FontAwesome icons to enhance the visual appeal of your website.
+- **Multiple Home Pages:** Choose from a variety of home page designs to best suit your business.
+- **Inner Pages:** Access a range of inner pages for various sections of your eCommerce website.
+- **Image Background:** Customize page backgrounds with visually appealing images.
+- **Flexible and Multi-Purpose:** Shofy is versatile and can be adapted to various eCommerce niches.
+- **Valid CSS3:** Comply with modern CSS standards for a better user experience.
+- **24/7 Awesome Support:** Get continuous support for any inquiries or issues you may encounter.
+- **Detailed Documentation:** Access comprehensive documentation for easy development and setup.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+## Powerful Additional Features
 
-## Learn More
+- **All E-commerce Features and Apps Included:** Shofy provides a comprehensive eCommerce solution with all the essential features and apps needed for a successful online store.
+- **Variation Swatch:** Create clean and professional product pages with variation swatches that capture your customer's attention and allow easy selection of product variations.
+- **Filter Variations, Pagination, Filters by Size & Color:** Improve user experience and boost conversion rates by reducing the time needed for customers to complete their orders through filtering options and pagination.
+- **Video Gallery:** Offer customers a detailed view of products with an engaging video gallery that showcases products from different angles or in use.
+- **Sale Countdown Timer:** Increase sales and engagement for special occasions or limited-time offers with sale countdown timers that create a sense of urgency for shoppers.
+- **Product Quick View:** Enable customers to view product details without leaving their current page, providing a convenient and efficient shopping experience.
+- **Quantity Select:** Provide users with two options for selecting product quantities: a dropdown select box or manual input for more flexibility.
+- **Google and Email Password-based Authentication:** Secure user accounts with authentication methods, including Google login and email-based password authentication.
+- **User Profile and Information Update:** Allow users to update their profile information, ensuring accurate and up-to-date data for future interactions.
+- **Powerful Payment Gateway Integration using Stripe:** Securely process payments with Stripe integration, providing a smooth and reliable shopping experience for customers.
 
-To learn more about Next.js, take a look at the following resources:
+## Installation and Usage
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+To get started with Shofy, follow these steps:
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+1. Clone the repository:
 
-## Deploy on Vercel
+   ```bash
+   https://github.com/Hamed-Hasan/shofy-ecommerce-client.git
+   ```
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+2. Install dependencies:
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+   ```bash
+   npm install
+   ```
+
+3. Configure environment variables.
+
+4. Build the project:
+
+   ```bash
+   npm run build
+   ```
+
+5. Start the server:
+
+   ```bash
+   npm run dev
+   ```
+
+6. Access the application at the specified URL.
+
+## Client Side Live Link
+
+[Shofy Client Side Live Link](https://shofy-front-end.vercel.app)
+
+## Server Side Live Link
+
+[Shofy Server Side Live Link](https://shofy-backend.vercel.app)
+
+## Client Side Repo
+
+[Shofy Client Side Repo](https://github.com/Hamed-Hasan/shofy-ecommerce-client.git)
+
+## Server Side Repo
+
+[Shofy Server Side Repo](https://github.com/Hamed-Hasan/shofy-ecommerce-backend.git)
+
+## Sources and Credits
+
+- Twitter Bootstrap
+- Swiper Slider
+- Google Fonts
+- Free Font Awesome Icons by Fontawesome
+
+## Thank You for Choosing Shofy!
+
+We hope you find Shofy to be a powerful and effective solution for your eCommerce needs. Should you encounter
+
+ any issues or have any questions, please feel free to reach out to our support team at [email protected]. Happy selling!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/data/social-data.js b/src/data/social-data.js
@@ -2,19 +2,19 @@
 const social_data = [
   {
     id:1,
-    link:'https://www.facebook.com/',
+    link:'https://www.facebook.com/hamed.y.hasan0',
     icon:'fa-brands fa-facebook-f',
     title:'Facebook'
   },
   {
     id:2,
-    link:'https://twitter.com/',
+    link:'https://twitter.com/HamedHasan75',
     icon:'fa-brands fa-twitter',
     title:'Twitter'
   },
   {
     id:3,
-    link:'https://www.linkedin.com/',
+    link:'nkedin.com/in/hamed-hasan/',
     icon:'fa-brands fa-linkedin-in',
     title:'Linkedin'
   },

diff --git a/src/layout/footers/footer.jsx b/src/layout/footers/footer.jsx
@@ -23,7 +23,7 @@ const Footer = ({ style_2 = false, style_3 = false,primary_style=false }) => {
                         <Image src={logo} alt="logo" />
                       </Link>
                     </div>
-                    <p className="tp-footer-desc">We are a team of designers and developers that create high quality WordPress</p>
+                    <p className="tp-footer-desc">We are a dynamic team of full stack developers and designers crafting high-quality web applications</p>
                     <div className="tp-footer-social">
                       {social_data.map(s => <a href={s.link} key={s.id} target="_blank">
                         <i className={s.icon}></i>
@@ -69,7 +69,7 @@ const Footer = ({ style_2 = false, style_3 = false,primary_style=false }) => {
                   <div className="tp-footer-widget-content">
                     <div className="tp-footer-talk mb-20">
                       <span>Got Questions? Call us</span>
-                      <h4><a href="tel:670-413-90-762">+670 413 90 762</a></h4>
+                      <h4><a href="tel:670-413-90-762">+966 595 035 008</a></h4>
                     </div>
                     <div className="tp-footer-contact">
                       <div className="tp-footer-contact-item d-flex align-items-start">
@@ -79,7 +79,7 @@ const Footer = ({ style_2 = false, style_3 = false,primary_style=false }) => {
                           </span>
                         </div>
                         <div className="tp-footer-contact-content">
-                          <p><a href="mailto:[email protected]">shofy@support.com</a></p>
+                          <p><a href="mailto:[email protected]">swe.hamedhasan@gmail.com</a></p>
                         </div>
                       </div>
                       <div className="tp-footer-contact-item d-flex align-items-start">
@@ -89,7 +89,7 @@ const Footer = ({ style_2 = false, style_3 = false,primary_style=false }) => {
                           </span>
                         </div>
                         <div className="tp-footer-contact-content">
-                          <p><a href="https://www.google.com/maps/place/Sleepy+Hollow+Rd,+Gouverneur,+NY+13642,+USA/@44.3304966,-75.4552367,17z/data=!3m1!4b1!4m6!3m5!1s0x4cccddac8972c5eb:0x56286024afff537a!8m2!3d44.3304928!4d-75.453048!16s%2Fg%2F1tdsjdj4" target="_blank">79 Sleepy Hollow St. <br /> Jamaica, New York 1432</a></p>
+                          <p><a href="https://www.google.com/maps/place/Sleepy+Hollow+Rd,+Gouverneur,+NY+13642,+USA/@44.3304966,-75.4552367,17z/data=!3m1!4b1!4m6!3m5!1s0x4cccddac8972c5eb:0x56286024afff537a!8m2!3d44.3304928!4d-75.453048!16s%2Fg%2F1tdsjdj4" target="_blank">79 Sleepy Hollow St. <br /> Jamaica, Jeddah 1432</a></p>
                         </div>
                       </div>
                     </div>
@@ -106,7 +106,7 @@ const Footer = ({ style_2 = false, style_3 = false,primary_style=false }) => {
                 <div className="col-md-6">
                   <div className="tp-footer-copyright">
                     <p>© {new Date().getFullYear()} All Rights Reserved  |  Next js Template by
-                      <Link href="/">{" "}ThemePure</Link>.
+                      <Link href="/">{" "}❤</Link>.
                     </p>
                   </div>
                 </div>