https://github.com/ktojan/apollo-graphql-ecommerce-shop

Angular-based ecommerce application with Apollo-GraphQL server side
https://github.com/ktojan/apollo-graphql-ecommerce-shop

angular apollo apollographql cypress e2e-tests graphql localstorage-api primeng unit-tests

Last synced: about 7 hours ago
JSON representation

Angular-based ecommerce application with Apollo-GraphQL server side

• Host: GitHub
• URL: https://github.com/ktojan/apollo-graphql-ecommerce-shop
• Owner: Ktojan
• Created: 2025-01-15T21:37:06.000Z (9 months ago)
• Default Branch: master
• Last Pushed: 2025-02-03T19:44:45.000Z (8 months ago)
• Last Synced: 2025-08-02T10:58:19.919Z (2 months ago)
• Topics: angular, apollo, apollographql, cypress, e2e-tests, graphql, localstorage-api, primeng, unit-tests
• Language: TypeScript
• Homepage: https://apollo-graphql-ecommerce-shop.vercel.app/
• Size: 2.91 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          

![ecom-1](https://github.com/user-attachments/assets/0ca6bdc5-efd1-4bcd-9f05-ee9fdb44345b)

![media_icon](https://github.com/user-attachments/assets/557fe6b2-37b7-4112-be8a-6eb9d96a7697) ![gifdemo_icon](https://github.com/user-attachments/assets/a0395b5f-cf3b-4b50-ad7b-24ae14beb649) [ALL THE MEDIA EXPLORE HERE](https://github.com/Ktojan/apollo-graphql-ecommerce-shop/blob/master/READ%20MEdia.md)

# ApolloGraphAngularEShop

Welcome to an advanced Angular-based e-commerce application, designed to provide a seamless shopping experience. This platform enables users to explore a set of products with filtering, sorting, categories, wishlist, cart and saving data across browser sessions (in localstorage). First published in Jan 2025.

## Key Features

- **Product Catalog**: Browse an extensive range of products, categorized for easy navigation.

- **Product Details**: Access comprehensive information about each product, including images, descriptions, and prices.

- **Suggested Products**: Discover related products tailored to your preferences.

- **Search Functionality**: Quickly find products using a robust search feature. 🔍

- **Dynamic Views**: Switch between list and grid views to suit your browsing preferences.

- **Price Range Slider**: Adjust your budget with a responsive price range slider.

- **Shopping Cart & Checkout**: Manage your cart, review your order, and proceed to payment with ease. 🛒

- **Local Storage Integration**: Save wishlist items and cart contents in local storage, ensuring that your selections persist even after refreshing the page.

- **End-to-End Testing**: Ensure quality and reliability with comprehensive tests using Cypress.

## Tech Stack

- **Client:** Angular, PrimeNG, PrimeFlex, Apollo Client, RxJS, client GraphQL

- **Server:** Hasura GraphQL

- **Tests:** Cypress, Karma + Jasmine

To execute the end-to-end tests, navigate to the project root directory and run:

```bash

npx cypress open    or    npx cypress run

```

## Running the Application Locally

1. **Clone the Repository**

   ```bash

   git clone .git

   ```

2. **Install Dependencies**

   ```bash

   npm install

   ```

3. **Start the Angular Development Server**

   ```bash

   npm start

   ```

   The application will be available at `http://localhost:4200`.

![media_icon](https://github.com/user-attachments/assets/557fe6b2-37b7-4112-be8a-6eb9d96a7697) ![gifdemo_icon](https://github.com/user-attachments/assets/a0395b5f-cf3b-4b50-ad7b-24ae14beb649) [ALL THE MEDIA EXPLORE HERE](https://github.com/Ktojan/apollo-graphql-ecommerce-shop/blob/master/READ%20MEdia.md)