Skip to content
/ projectx Public template

Tame full-stack chaos with Temporal workflows and React wizardry, the ultimate event-driven architecture for your apps πŸ§™β€β™‚οΈβœ¨

Notifications You must be signed in to change notification settings

proyecto26/projectx

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

29 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

ProjectX

Nx for Monorepo Remix for Website ProjectX logo NestJS for Services Temporal for Durable Executions

ProjectX is a comprehensive full-stack template designed to simplify the development of scalable and resilient applications using React and Temporal. By integrating Temporal’s advanced workflow orchestration with React’s dynamic frontend framework, ProjectX enables developers to build applications with durable executions and seamless communication between services.

Notable Links πŸ€“

Public Courses

Why Temporal? πŸ€”

Challenges of Maintaining State in Distributed Systems

  • Consistency
  • Fault Tolerance
  • Scalability
  • Concurrency Control
  • Security

Temporal is introduced here as a Workflow Orchestration tool for managing long-running operations (durable execution), humans in the loop and system lifecycle (state management, guaranteed completion with compensations and uniqueness). You can use Temporal today for implementing a sequence of steps/actions in certain order for your business processes (workflows), not only for communication between services (Microservices Orchestration) but also for Monolith apps. Workflows can react to async and external events (signals, updates), aggregating data and then doing some actions (activities) with exponential retries (retry policy) and run for extended periods (heartbeat) if needed, then you can check the state of these executions at any time (queries). Additionally, workflows support scheduled and time-based executions with configurable delays for recurring business logic (scheduling).

Use Cases

β€’ Order Processing Systems: Managing the lifecycle of orders from placement to fulfillment, including inventory checks, payment processing, and shipping.

β€’ User Onboarding: Coordinating steps involved in onboarding new users, such as account creation, email verification, and initial setup tasks.

β€’ Data Pipelines: Orchestrating data ingestion, transformation, and storage processes with reliability and scalability.

β€’ Batch Processing: Handling large-scale batch jobs with retry mechanisms and progress monitoring.

Setting Up πŸ› οΈ

Requirements 🧰

From Linux/Mac ο£Ώ

  • Install Homebrew
  • Install tools using Homebrew:
brew install node
brew install git
brew install docker-compose
npm add --global nx@latest

Documentation πŸ“š

  • FrontEnd: Commands used to create the project and frontend structure (Nx, RemixJS, etc) here.

  • BackEnd: Commands used to create the services (NestJS, Temporal, etc) here.

Usage πŸƒ

Monorepo

Instructions to use Nx CLI here.

For more information on using Nx, refer to the Nx documentation.

Project Structure Overview

image
Markmap format 🍬
#### Root Directory

- **package.json**: Contains the dependencies and scripts for the entire monorepo.
- **nx.json**: Configuration for Nx, which manages the monorepo structure and build processes.
- **tsconfig.base.json**: Base TypeScript configuration shared across the project.

#### Apps

- **apps/auth**: 
  - **Purpose**: Handles user authentication and data retrieval.
  - **Key Features**: Login, registration, and user profile management.

- **apps/order**: 
  - **Purpose**: Manages order processing, checkout, and payment handling.
  - **Key Features**: Cart management, order tracking, and payment integration.

- **apps/web**: 
  - **Purpose**: The main web application interface.
  - **Key Features**: User interaction with the system.
  - **Configuration**: 
    - **tsconfig.json**: TypeScript configuration specific to the web app.

#### Libs

- **libs/backend/core**: 
  - **Purpose**: Contains business logic and common utilities.
  - **Key Features**: Shared functions and services used across backend applications.

- **libs/backend/db**: 
  - **Purpose**: Manages database access using Prisma and the Repository pattern.
  - **Key Features**: Database schema definitions and data access layers.
  - **Documentation**: 
    - **README.md**: Provides details on database setup and usage.

- **libs/backend/email**: 
  - **Purpose**: Handles email template creation and sending.
  - **Key Features**: Uses MJML for templates and provides email sending services.

- **libs/models**: 
  - **Purpose**: Defines DTOs and common types.
  - **Key Features**: Ensures consistency across web and backend services.

- **libs/frontend/ui**: 
  - **Purpose**: Contains UI components and themes.
  - **Key Features**: Built with React and TailwindCSS, includes Storybook for component visualization.
  - **Configuration**: 
    - **package.json**: Dependencies and scripts for the UI library.
    - **tsconfig.json**: TypeScript configuration for the UI library.

#### Additional paths

- **prompts**: Contains initial project prompts or guidelines to be used with your AI tools (Cursor, etc).

Run the web app

npm run dev:web

Run the ui lib (See all the UI components)

npm run storybook

Run services with Docker Compose

  • Build the images:
docker-compose build --no-cache
  • Run the services:
docker-compose up -d
  • Delete the services:
docker-compose down --volumes

Explore the project πŸ‘€

npx nx show projects
npx nx graph

View the Database diagram here.

Do you want to change the path of a project to decide your own organization? No problem:

npx nx g @nx/workspace:move --project core libs/backend/common

Update project ⚑

npx nx migrate latest
npx nx migrate --run-migrations

Docker 🚒

All the images needed to run this project in development are listed in the docker-compose.yml file.

Supporting 🍻

I believe in Unicorns πŸ¦„ Support me, if you do too.

Donate Ethereum, ADA, BNB, SHIBA, USDT/USDC, DOGE, etc:

Wallet address: jdnichollsc.eth

Please let us know your contributions! πŸ™

Happy coding πŸ’―

Made with ❀️