This project was generated using Nx.

• Setup Monorepo with Nx
• Install NextJS with Typescript support
• Support for styled-components
• Shared ui-components
• Storybook configuration for existent components
• Install main React dependencies: react-query, formik
• Absolute paths for apps in tsconfig.base.json
• Microfrontends POC: embed app within another
• Support for NextJS Dynamic routing to redirect Experiments
• Feature Flag support with Optimizely
• Test SSR component and route
• State management using React hooks (Redux style)
• Define Styled Components Theme
• PWA configuration
• Consider Tailwind as addition of styled-components
• Document nx code generators to maximize reusability and structure
• Docker container
• Deployment with Github Actions
• Playwright for E2E testing

• UI Components
  • Navbar
  • Bottom navbar (mobile)
  • Journal
  • Notifications (push nots?)
• New insights-app
  • Daily insights (education)
• New discussions-app
  • Secret Chats
• New daily-notes
  • Edit text

• Nx (Nrwl)
• React
• NextJS
• Storybook
• React Query
• Styled Components
• Formik

Run nx g @nrwl/react:app my-app to generate an application.

Run nx g @nrwl/react:lib my-lib to generate a library.

You can also use any of the plugins above to generate libraries as well.

Libraries are shareable across libraries and applications.

When using Nx, you can create multiple applications and libraries in the same workspace.

💡 You can use any of the plugins in the community to generate applications

Create new React app

npx nx g @nwrl/react:app <app_name>

Create new NextJS app

npx nx g @nrwl/next:app <app_name>

Create a new React Component library

npx nx g @nwrl/react:lib <lib_name>

Whit the help of generators, Nx allows to do code scaffolding

Generate a new Reacn Component

npx nx g @nrwl/react:component BottomNav --project=ui-components --style=styled-components --export

npx nx dep-graph

To Run the dev server.

npx nx insights-app:serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

nx g @nrwl/react:storybook-configuration <project-name>
`

> This also regenerates `stories` for all components that don't have any defined

#### Run storybook
```sh
npx nx run ui-components:storybook
`

## Build

Run `nx build my-app` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.

## Running unit tests

Run `nx test my-app` to execute the unit tests via [Jest](https://jestjs.io).

Run `nx affected:test` to execute the unit tests affected by a change.

## Running end-to-end tests

Run `ng e2e my-app` to execute the end-to-end tests via [Cypress](https://www.cypress.io).

Run `nx affected:e2e` to execute the end-to-end tests affected by a change.

## Learning resources

- [Nx Official Documentation](https://nx.dev)
- [Full React and Nx Course – Egghead](https://egghead.io/courses/scale-react-development-with-nx-4038)
- [Using Storybook and Nx to build your Design System](https://blog.nrwl.io/build-your-design-system-with-storybook-nx-e3bde4087ad8)