Formula = React + GraphQL OXID Storefront

This is FORMULA a React + GraphQL + OXID eSales Storefront, built with NextJS, TypeScript and completely styled with Tailwind CSS.

This is an all-in-one starter kit for OXID eSales frontend shops.

What's inside?

• ReactJS
• NextJS
• TypeScript
• TailwindCSS
• Heroicons
• ApolloClient
• GraphQL Code Generator
• Jest
• Testing Library
• Cypress
• ESLint
• Prettier

Features

• Integrated seamlessly with OXID eShop
• Performant by default
• SEO Ready
• Internationalization
• Responsive
• UI Components
• Theming
• Standardized Data Hooks
• Dark Mode Support

Integration

Formula integrates it out-of-the-box with an OXID eShop GraphQL endpoint, it assumes that you have an OXID eShop (at least oxid-esales/oxideshop_ce: v6.5.0 component, which is part of the v6.2.0 compilation) up and running.

Getting started

1. Clone the project

   git@github.com:OXID-eSales/formula-oxid-storefront.git

2. Access the project directory

   cd formula-oxid-storefront

3. Install dependencies

   yarn install

4. Copy the .env.template file to .env and add your OXID GraphQL Shop endpoint

   cp .env.template .env

5. Generate code from your GraphQL schema and operations

   yarn generate

6. Serve with hot reload at http://localhost:3000

   yarn dev

Recommended VS Code extensions

• ESLint
• Prettier
• TailwindCSS

Build command

yarn build

Start command

yarn start

Lint command

yarn lint

Test commands

• Run tests

  yarn test

• Watch tests

  yarn test:watch

• Run e2e tests with cypress

  yarn test:e2e

Style Guide

All pull requests SHOULD adhere to the Conventional Commits specification

• Message format of $type($scope): $message
• Husky commit message hook available

License

This project is licensed under the MIT License.

Inspired by Next.js Commerce