Reacterial

Reacterial is a versatile boilerplate for building modern web applications like CRM systems, admin dashboards, and enterprise portals. Built with Next.js, React, Material-UI (MUI), and Redux for scalable state management.

Deployed on Vercel

https://www.reacterial.com/

Stacks

• Next.js
• React
• MUI
• Vercel
• TypeScript
• Redux
• Auth (NextAuth and Google API Oauth)
• Jest: Unit Test
• MongoDB Atlas
• pnpm Workspaces - Monorepo management
• Turborepo - Smart caching & build orchestration

TODO

• Storybook
• Playwright: UI Automated test
• Presentable landing page
• Theming: Light/Dark theme in UI

Local development

Step 1: Install Dependencies

pnpm install

Step 2: Set Up Environment Variables

Create apps/admin/.env.local file with your credentials:

# Copy the example file
cp apps/admin/.env.local.example apps/admin/.env.local

# Edit with your MongoDB URI and secrets
nano apps/admin/.env.local

Required variables:

• MONGODB_URI - Your MongoDB connection string
• NEXTAUTH_SECRET - Generate with: openssl rand -base64 32
• NEXTAUTH_URL - http://localhost:3000 (for local dev)

See Environment Setup Guide for detailed instructions.

Step 3: Run Development Server

pnpm dev

Open http://localhost:3000 with your browser to see the result.

Default Credentials

• Email: admin@reacterial.com
• Password: admin123

Database

1. cd db
2. pnpm install
3. pnpm run reset

Using NPM (Legacy)

If you prefer npm, you can still use it:

1. npm install
2. npm run dev

⚡ Turborepo Features

This project leverages Turborepo for lightning-fast builds:

• ✅ Smart Caching - Never rebuild the same code twice (141x faster on cache hits!)
• ✅ Parallel Execution - Run tasks across packages simultaneously
• ✅ Dependency-Aware - Automatically builds packages in the correct order
• ✅ Remote Caching - Share build cache with your team (optional)

Example Performance:

First build:  17.3s
Cached build: 123ms  ⚡ >>> FULL TURBO

📚 Documentation

Comprehensive documentation is available in the docs/ directory:

• 🎉 Monorepo Implementation - Complete migration guide and new structure
• ⚡ Turborepo Setup - Smart caching & performance optimization
• 🔒 Git Hooks - Code quality enforcement with Husky
• 🚀 Vercel Deployment - Deploy to Vercel (production guide)
• 🔧 Environment Setup - Configure MongoDB and environment variables
• ⭐ Decision Matrix - Choose the right architecture for your needs
• Monorepo Architecture - Build multiple apps with shared components
• Component Organization Guide - UI component structure and best practices
• PNPM Migration Summary - NPM to PNPM conversion details
• Documentation Index - Full documentation overview
• TypeScript Strict Config - Strict type checking setup

🧪 Testing

# Run tests in watch mode
pnpm test

# Run tests in CI mode
pnpm test:ci

📦 Building

# Format, lint, and build for production
pnpm build

# Start production server
pnpm start