---
menu: Overview
---

# GraphCommerce

## Technology

Besides React and Next.js, Graphcommerce uses the following
technologies/libraries worth exploring.

<span>![mui](https://user-images.githubusercontent.com/1251986/227551619-3f737bd2-90ac-4653-b49c-a1f1b4849938.svg)</span>
<span>![ts](https://user-images.githubusercontent.com/1251986/227548900-70ca92ff-e4f0-426c-9042-540827ff49fa.svg)</span>
<span>![graphql](https://user-images.githubusercontent.com/1251986/227549037-87a5a00a-38cf-4050-840d-1a7387c25483.svg)</span>
<span>![graphql-generator](https://user-images.githubusercontent.com/1251986/227549515-91f8b8f8-3a74-4d92-a703-f3073aab93ab.svg)</span>
<span>![apollo](https://user-images.githubusercontent.com/1251986/227547294-c5b8386d-96d9-42bf-b743-b63778f1e737.svg)</span>
<span>![framer](https://user-images.githubusercontent.com/1251986/227549722-aae583f4-4c6c-461b-88c4-0f673d9c7c55.svg)</span>

**Mui Core**  
Google's pre-built component library is utilized to build high-quality, robust
GraphCommerce components.

**Typescript**  
Is used to guard code quality, maintainability, and productivity by catching
errors during development. With Typescript, setting up
[VSCode](../framework/vscode.md) correctly enables autocomplete, simplifying the
exploration of GraphCommerce's codebase.

**GraphQL**  
A query language for APIs, utilized for fetching and modifying data in Magento.

**GraphQL Code Generator**  
Simplifies GraphQL query usage in components by auto-generating types from the
schema.

**Apollo Client**  
Used for managing data fetching, caching, and state management.

**Framer Motion**  
For creating fluid, interactive animations, accounting for browser limitations
and performance.