Skip to content

This repository hosts a complete shopping website developed using cutting-edge technologies like React, TypeScript, Apollo Client, Redux Toolkit, Firebase, GraphQL, and Tailwind CSS.

Notifications You must be signed in to change notification settings

muhammadshakkeerp/Shopease

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

image

🛒 ShopEase clone

📙 Description

Flikart is a project developed for online shopping inspired from ShopEase. It incorporates various technologies and libraries to achieve Html5, css3, React, typescript, redux, tailwindcss

🛠️ Installation

Before getting started, ensure you have Node.js and npm installed on your machine.

# Clone the repository
https://github.com/muhammadshakkeerp/Shopease.git

# Navigate to the project directory
cd ShopEase_clone

# Install dependencies
npm install

Usage

To run the development server:

npm run dev

To build the project:

npm run build

To run tests:

npm test

🔑 Key Features

  • Add-to-Cart
  • Dark Mode
  • Header + Dropdown menu
  • Image slider
  • Product Details
  • Login Section
  • Order & Wishlist section

👨‍💻 Technologies Used

  • Frontend:

    • React
    • Redux Toolkit
    • Tailwind CSS
    • Apollo Client
    • React Router Dom
    • GraphQL
    • Jest
  • Dev Dependencies:

    • TypeScript
    • ESLint
    • Vite

📁 Folder Structure

flikart/
│
├── src/
│   ├── components/
│   ├── pages/
│   ├── utils/
│   └── App.tsx
│
├── public/
│   ├── index.html
│   └── ...
│
├── package.json
├── tsconfig.json
└── ...

image

Optimized File

import { lazy } from "react";

const Home = lazy(() => import("../pages/Home"));
const Account = lazy(() => import("../pages/Account"));
const Cart = lazy(() => import("../pages/Cart"));
const ProductsGroup = lazy(() => import("../pages/ProductsGroup"));
const NestedHoverNavlink = lazy(
  () => import("../components/NestedHoverNavlink")
);
const ProductGallery = lazy(() => import("../pages/ProductGallery"));
const ProductDatails = lazy(() => import("../components/ProductDetails"));
const Checkout = lazy(() => import("../components/Checkout"));
const PaymentSuccessful = lazy(() => import("../components/PaymentSuccesfull"));
const ChatBot = lazy(() => import("../components/chatbot/ChatBot"));

export {
  Home,
  Account,
  Cart,
  ProductsGroup,
  NestedHoverNavlink,
  ProductGallery,
  ProductDatails,
  Checkout,
  PaymentSuccessful,
  ChatBot,
};

// Account section optimization
const AccountDetails = lazy(() => import("../components/AccountDetails"));
const Login = lazy(() => import("../firebase/Login"));

const Profile = lazy(() => import("../components/Profile"));
const Wishlist = lazy(() => import("../components/WishList"));
const Orders = lazy(() => import("../components/Orders"));
const Rewards = lazy(() => import("../components/Rewards"));

export { AccountDetails, Login, Profile, Wishlist, Orders, Rewards };

About

This repository hosts a complete shopping website developed using cutting-edge technologies like React, TypeScript, Apollo Client, Redux Toolkit, Firebase, GraphQL, and Tailwind CSS.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published