Magento 2 & React Case Study

Introduction

This project began as a case study on Magento 2—exploring its modules, patches, and data/product insertion. Over time, it evolved into a comprehensive study of modern frontend development using React, TailwindCSS, Apollo Client, and GraphQL, including handling CORS issues and implementing a GraphQL-based API integration.

Technologies Used

• Magento 2: Backend e-commerce framework
• React: Frontend framework for a dynamic UI
• TailwindCSS: Utility-first styling approach
• Apollo Client: GraphQL state management for React
• GraphQL: API query language for Magento data retrieval
• CORS Proxy: Middleware to bypass request errors in development

Magento 2 Backend Case Study

1. Modules & Patches

• Implemented custom modules for product management.
• Applied Magento patches to enhance stability.
• Explored Magento's admin panel for configuration changes.

2. Data & Product Insertion

• Programmatically inserted products into Magento 2 database.
• Examined Magento’s catalog and attribute management.
• Utilized Magento’s Admin UI and CLI tools.

3. Usage of Mysql CLI

• Efficently used mysql CLI to modify said data patches when at some point became problematic.
• Further Refined and increased knowledge in sql queries to debug and or delete items from Database.
• Modified Admin User/s using said knowledge in sql queries

Frontend Overhaul with React

1. Migrating UI to React

• Developed a React-based shop interface.
• Used TailwindCSS for styling and UI components.

2. Handling CORS Issues

• Faced CORS restrictions when making GraphQL API calls.
• Implemented a proxy in React to bypass CORS errors in development.

GraphQL Integration

1. Fetching Magento Data via GraphQL

• Utilized Magento’s /graphql endpoint to retrieve product data.
• Constructed GraphQL queries for fetching product listings, categories, and details.

2. Apollo Client for State Management

• Integrated Apollo Client in React to cache and manage GraphQL data.
• Improved performance with query batching and caching strategies.

Conclusion

This case study provided an extensive exploration of Magento 2 backend development, React frontend implementation, and GraphQL API integration. It tackled common challenges like CORS handling, efficient state management, and seamless product retrieval from the Magento backend.

---

Next Steps

• Enhancing authentication & user management.
• Implementing real-time updates with GraphQL subscriptions.
• Further refine performance optimizations.