🚀 Shopify Community App Template (NodeJS)

📚 Overview

This template, owned by Interactiv4, is a community-driven initiative aimed at creating a high-quality and fully open-source template for Shopify apps. The goal is to empower developers to contribute and enhance the overall quality of Shopify applications.

🎯 Project Purpose

The primary purpose of this project is to provide a template that serves as a foundation for building top-notch Shopify applications. By being completely open-source, it encourages collaboration and contributions from the community, fostering a collective effort to elevate the standards of Shopify app development.

🛠️ Technologies Used

• Frontend:

  • React: A popular JavaScript library for building user interfaces.
  • TypeScript: A typed superset of JavaScript that adds static types.
  • React Router: A declarative routing library for React.
  • React Query: A library for managing, caching, and updating remote and local data.
  • Vite: A fast development server and build tool for modern web development.

• Backend:

  • Node.js: A JavaScript runtime for server-side development.
  • Express: A minimal and flexible Node.js web application framework.
  • TypeScript: Used for adding static types to the backend code.
  • Prisma ORM: A modern database toolkit for Node.js and TypeScript.
  • Node Dependency Injection: A library for managing dependencies in Node.js applications.
  • Hexagonal Architecture: An architectural pattern that promotes separation of concerns.
  • Domain-Driven Design (DDD): A design approach that aligns software design with the user's mental model of the problem domain.
  • ESLint: A tool for identifying and fixing problems in JavaScript and TypeScript code.
  • Prettier: An opinionated code formatter.
  • Husky: A tool that ensures code quality by running scripts before commits.

• Shopify Integration:

  • Shopify API Library: A library for interacting with the Shopify Admin API.
  • App Bridge React: A set of React components that make it easy to embed Shopify into your app.
  • Polaris: Shopify's design system for building consistent and accessible user interfaces.
  • Webhooks: A mechanism for Shopify to notify external services about events in a shop.

⭐ What Sets Our Template Apart?

• TypeScript Support: The template is fully integrated with TypeScript for both frontend and backend, enhancing code reliability and maintainability.

• Database Persistence: We have replaced the default persistence with Prisma ORM, allowing compatibility with PostgreSQL, MySQL, MongoDB, as well as services like Supabase and Planet Scale.

• API Routing: API routes are now organized into separate files using a wildcard approach, promoting better project structure and maintainability.

• Dependency Injection: Leveraging Node Dependency Injection for managing dependencies, improving code organization, and facilitating testing.

• Architectural Enhancements: The template adopts Hexagonal Architecture and Domain-Driven Design (DDD) principles, promoting clean and modular code.

• Code Quality Tools: ESLint and Prettier are integrated to ensure consistent code style and quality, with Husky enforcing pre-commit hooks for additional reliability.

🚀 Installation Guide

1. Install dependencies:

   npm install
   cd web/backend
   npm install

2. Configure database:

   Create a .env file in the web/backend folder and set the database connection details.

   cd web/backend
   npx prisma migrate dev --name init

3. Start the development server:

   npm run dev

🤝 Feedback and Contributions

We welcome feedback, bug reports, and contributions. Feel free to submit an issue or create a pull request. Let's make this template even better together!