Create E2e Saas
React + Vite This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. Currently, two official plugins are available: - @vitejs/plugin-rea...
Technical Architecture & Engineering Overview
Detailed system design and core implementation
The project is bootstrapped via npx create-e2e-saas <app-name>, which triggers a Node.js CLI that copies the template files into the target directory using fs-extra. The CLI also installs dependencies and generates a .env file with placeholders for SMTP credentials and client URLs.
Once the scaffold is ready, the frontend is a Vite‑powered React 19 app that leverages Tailwind CSS for styling and Shadcn UI components for a consistent design system. Authentication state is managed through a global Auth Context that stores a JWT in an HTTP‑only cookie, ensuring protection against XSS. Routing is handled by React Router 7, with protected routes guarded by a custom hook that checks the authentication context.
The backend is an Express server exposing a set of REST endpoints under /api/auth and /api/user. Routes are defined in authRoutes.js and userRoutes.js, with middleware such as userAuth enforcing JWT validation. Controllers implement business logic: register, login, logout, send-verify-otp, verify-account, send-reset-otp, and reset-password. Passwords are hashed with bcrypt, and email verification is performed via Nodemailer.
Security guardrails include rate limiting on all auth endpoints, input validation with Joi, and sanitization to prevent injection attacks. Tokens are stored in HTTP‑only cookies, and the API uses CORS with a whitelist of the frontend origin. The build topology is split: the frontend is built with Vite into frontend/dist, while the backend is bundled with ES modules and run with node --experimental-modules.
Data ingestion flows from the frontend to the backend through Axios calls that include the JWT cookie. The backend validates the token, performs the requested action, and returns JSON responses. The database layer uses Mongoose schemas for users, with indexes on email and OTP fields to optimize lookups.
System Diagrams & Flow Visualizations
Interactive Mermaid architecture & execution flows
Core System Features
Key capabilities & architectural features
Full MERN stack scaffold with React 19 and Vite
Full MERN stack scaffold with React 19 and Vite
Tailwind CSS and Shadcn UI components for rapid UI development
Tailwind CSS and Shadcn UI components for rapid UI development
JWT‑based authentication with HTTP‑only cookies
JWT‑based authentication with HTTP‑only cookies
Email verification and OTP flows via Nodemailer
Email verification and OTP flows via Nodemailer
Password hashing with bcrypt
Password hashing with bcrypt
Rate limiting on all auth endpoints
Rate limiting on all auth endpoints
Input validation and sanitization
Input validation and sanitization
Protected routes on both frontend and backend
Protected routes on both frontend and backend
Comprehensive README with environment setup and API docs
Comprehensive README with environment setup and API docs
ESLint configuration for code quality
ESLint configuration for code quality
Engineering Challenges & Solutions
Problem statements & resolution strategies
Balancing CLI simplicity with comprehensive scaffolding without overcomplicating the user experience
Balancing CLI simplicity with comprehensive scaffolding without overcomplicating the user experience
Ensuring secure cookie handling across different browsers and environments
Ensuring secure cookie handling across different browsers and environments
Implementing OTP verification while preventing brute‑force attacks
Implementing OTP verification while preventing brute‑force attacks
Managing environment variables for both frontend and backend in a single repository
Managing environment variables for both frontend and backend in a single repository
Integrating Nodemailer with SMTP credentials securely in local dev and production
Integrating Nodemailer with SMTP credentials securely in local dev and production
API Reference & Endpoints
REST API surface & route documentation
| METHOD | ENDPOINT PATH | DESCRIPTION | COPY |
|---|---|---|---|
| POST | /register | Endpoint defined in template/server/routes/authRoutes.js | |
| POST | /login | Endpoint defined in template/server/routes/authRoutes.js | |
| POST | /logout | Endpoint defined in template/server/routes/authRoutes.js | |
| POST | /send-verify-otp | Endpoint defined in template/server/routes/authRoutes.js | |
| POST | /verify-account | Endpoint defined in template/server/routes/authRoutes.js | |
| GET | /is-auth | Endpoint defined in template/server/routes/authRoutes.js | |
| POST | /send-reset-otp | Endpoint defined in template/server/routes/authRoutes.js | |
| POST | /reset-password | Endpoint defined in template/server/routes/authRoutes.js | |
| GET | /data | Endpoint defined in template/server/routes/userRoutes.js | |
| GET | / | Endpoint defined in template/server/server.js |
Key Code Modules & Architecture
Core file entrypoints and service responsibilities
template/clientModule component managing client source logic
template/client/srcModule component managing src source logic
template/client/src/componentsModule component managing components source logic
template/client/src/pagesModule component managing pages source logic
template/serverModule component managing server source logic
template/server/configModule component managing config source logic
template/server/controllersModule component managing controllers source logic
template/server/middlewareModule component managing middleware source logic
template/server/modelsModule component managing models source logic
template/server/routesModule component managing routes source logic
User Journey Pipeline
- 1User accesses application user interface via browser
- 2User triggers action invoking HTTP/WebSocket API endpoints
- 3Data persisted or retrieved from database storage layer
Execution Code Flow
- 1Client or caller initiates request to application entrypoint
- 2Backend router validates request parameters and applies middleware
- 3Database ORM/client executes storage query
- 4Application serializes JSON/audio/data response back to client
System FAQ & Technical Specifications
Frequently asked questions and core architecture details
Q: What technologies are used in Create E2e Saas?
Create E2e Saas is engineered using modern full-stack frameworks.
Q: What core engineering problem does Create E2e Saas solve?
React + Vite This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. Currently, two official plugins are available: - @vitejs/plugin-rea...
Q: How is 'Balancing CLI simplicity with comprehensive scaffolding without overcomplicating the user experience' resolved in Create E2e Saas?
Resolved through specialized system architecture and resilient state handling.
Related Systems & Case Studies
Explore similar technical architectures and projects