๐๏ธ ShopTrend Ecommerce App (https://akash-prasad-shoptrend.netlify.app/)
email:[email protected]
pass:12345678
Welcome to ShopTrend! ๐ This is a cutting-edge e-commerce app built with Vite, React.js, GraphQL, Redux, and Apollo Client. The app leverages the power of the Graphbase serverless GraphQL API for seamless product management.
-
Grafbase local Setup:
npx grafbase dev
Navigate to http://127.0.0.1:4000/ to grafbase Pathfinder.
-
Clone the repository:
git clone https://github.com/AKASH-PRASAD7/Disney-clone.git cd client
-
Install Dependencies: Choose your favorite package manager!
Using Yarn:
yarn install
Or npm:
npm install
Here are some example GraphQL queries you can use:
query ProductDetailsCollection {
productDetailsCollection(first: 15) {
pageInfo {
hasNextPage
}
edges {
node {
title
description
price
discountPercentage
rating
brand
thumbnail
category
id
images
}
}
}
}
query ProductDetails($id: ID) {
productDetails(by: { id: $id }) {
title
description
price
discountPercentage
rating
brand
thumbnail
category
id
images
}
}
query ProductDetailsSearch($input: String) {
productDetailsSearch(query: $input, first: 30) {
pageInfo {
hasNextPage
}
edges {
node {
title
description
price
discountPercentage
rating
brand
thumbnail
category
id
images
}
}
}
}
mutation UserCreate {
userCreate(
input: { name: "John Doe", email: "[email protected]", password: "1234568" }
) {
user {
name
}
}
}
Rename .env.example
to .env
and update it with your API endpoints or authentication keys.
Kickstart the development server:
yarn dev
Or with npm:
npm run dev
Navigate to http://localhost:5173 to see your app in action.
When you're ready to deploy to production:
yarn build
Or using npm:
npm run build
Deploy your finely crafted app to your chosen hosting platform. Don't forget to configure environment variables and server settings!
- ๐ฆ Browse products with dynamic category filters
- ๐ Cart functionality: Adjust quantities and breeze through checkout
- ๐ค User authentication and profile management
- ๐ State management via Redux
- ๐ Data fetching using Apollo Client and GraphQL
- ๐ Graphbase integration for efficient product data handling
- ๐ Filter products by categories
- ๐ Sort products by price and rating
- ๐ฑ Responsive design catering to mobile and desktop users
- โก Vite: Rapid and efficient build tooling
- โ๏ธ React.js: Crafting beautiful UI components
- ๐ GraphQL: Unleash the power of query language for APIs
- ๐ Redux: Taming complex app states
- ๐ Apollo Client: Fetching data with style
- ๐ Graphbase: Lightning-fast serverless GraphQL API
- ๐งถ Yarn or npm: The magic wands of dependency management
This project is licensed under the MIT License.