React accelerator (beta)
A headless, single page storefront application
It is not recommended to use beta versions in projects. Release candidate is the first pre-release stage that is recommended to use and officially supported.
Read more about prerelease stages
Technologies and frameworks
- NextJS framework
- React, React Server Components
- TailwindCSS
- Apollo Client to query data from GraphQL server
- ESLint to find and fix problems in JS/TS
- Prettier to format code
- Typescript
- Jest for running unit tests
- Playwright for running end-to-end tests
Development
Please check the Get started on how to configure and start development.
Folder structure
The project was created by using create-next-app tool and is pre-configured with Typescript, Tailwind, ESLint, Prettier, Jest and Playwright. All client resources are located in the src\client folder. It includes the following items:
app: NextJS's app directory which was introduced in NextJS 13, which supports React Server Components.
components: React components.
e2e: End to end tests.
models: model interfaces.
operations: GraphQL's fragments and mutations.
public: static files like icons, images.
scripts: scripts to be used when building project.
services: service functions.
stores: state management's stores
styles: Tailwind's base styles and extensions.
utils: utility functions.
.env: environment variables configuration file. For more information, please check Get started page on how to set variables values.
tailwind.config.js: Tailwind's configuration file. To make it easier to override and extend stylings, the project is configured and using abstract color names and Tailwind's scale units. The theme then can be modified or extended by updating tailwind.config.js file. Please check Theme configuration for more information .
Related