fxrazor / console

Qovery Web Console V3 ⚡️

Deploy On-demand Environments on AWS, Remarkably Fast

Website: https://www.qovery.com

At Qovery for our Console, we use a couple of technologies, like NX, React, Redux, Tailwind, and Storybook.

Getting Started

First use

yarn && yarn setup

Start the project on http://localhost:4200

yarn start

Start Storybook on http://localhost:4400

yarn storybook

Generate a library

nx g @nx/react:lib my-lib

Generate a component

nx g @nx/react:component my-component

Run unit tests with Jest

nx affected:test

Run end-to-end tests with Cypress

nx affected:e2e

Contributing

Qovery Console V3 is in its early stage of development and we need some help, you are welcome to contribute. To better synchronize consider joining our #v3 channel on our Discord. Otherwise, you can directly propose improvements from the issues pages or add them directly from your pull request for the changes.

Community support

For help, you can use one of the channels to ask a question:

• Forum: (Bug reports, Questions)
• GitHub: (Bug reports, Contributions)
• Twitter: (Get the news fast)

FAQ

Why does Qovery exist?

At Qovery, we believe that the Cloud must be simpler than what it is today. Our goal is to consolidate the Cloud ecosystem and makes it accessible to any developer, DevOps, and company. Qovery helps people to focus on what they build instead of wasting time doing plumbing stuff.

Why do we use NX?

• NX works like a strong framework and it's very helpful for React app.
• It allows us to make mono-repo and we can divide our application into several entities/libraries that can reuse.
• Offers helpers to facilitate generating components, libraries, applications, and tools to check the health of our applications (circular dependencies).
• Using NX cloud, cache to deploy the application, run tests and build only what has been modified.
• Provides Framework to facilitate unit tests with Jest and e2e tests with Cypress.

How is the project structured?

Our project is divided into several libraries, we are going to have 4 major categories of libraries:

• Domains: all our store logic is separated by domain, for each we find the slices with Redux, our providers, and mock for tests.
• Pages: each of the pages includes sub-pages.
• Shared: several elements of sharing between all components, UI components for the Storybook, enums, helpers, layout.
• Store: store initialization

We have separated the logical components “feature” and the UI components “UI” for each of the libraries. Requests and data are always called in features and flow to UI components. The goal is really to separate our features as much as possible to avoid circular dependencies and facilitate understanding of the project.

It’s an NX-proven approach, feel free to read the book “effective react with NX”, very interesting and well detailed.