A production-ready starter template for Northwestern MPD2 master's students, featuring a dual-app architecture designed to accelerate development while learning the BMAD methodology.
This starter template provides MPD2 students with:
- A Document Viewer - Interactive markdown viewer to reference BMAD methodology documentation while coding
- A Shell Main App - A starter structure that students replace with their own project ideas
- Production-Ready Setup - TDD framework, TypeScript, Tailwind CSS, and best practices pre-configured
A built-in markdown documentation viewer that helps students:
- Reference BMAD methodology while coding
- View project documentation with syntax highlighting
- Render Mermaid diagrams for visual understanding
- Keep methodology docs accessible during development
This viewer stays with your project - use it to document your own app as you build!
A minimal starter application that students replace with their own ideas:
- Clean layout with header, main content, and footer
- Example component showing React hooks and state management
- Links to helpful resources
- Ready for you to build your unique application
# The template is already set up and running
# Access at port 5000 in your Replit webview.
├── app/ # Your main application
│ ├── page.tsx # 👈 Start here! Replace with your app
│ ├── components/ # 👈 Add your components here
│ │ └── ExampleComponent.tsx # Example to learn from (delete when ready)
│ ├── api/ # API routes
│ └── markdown-preview/ # Document viewer (keep this!)
│
├── tests/ # Your tests (TDD is required!)
├── types/ # TypeScript type definitions
└── replit.md # Project rules & guidelines
- Replace the home page (
app/page.tsx) with your app's main interface - Add your components in
app/components/ - Create API routes in
app/api/as needed - Write tests first (TDD) in
tests/ - Document as you go using markdown files
Replace the shell app with YOUR idea:
- 🛍️ E-commerce platform
- 📊 Data visualization dashboard
- 🎮 Interactive game
- 📱 Social media app
- 🤖 AI-powered tool
- 📚 Educational platform
- Whatever you imagine!
This template includes a working Supabase database example to help you learn how to integrate a database into your app:
- Live Demo: Visit
/tasksto see it in action - Full CRUD Operations: Create, Read, Update, Delete tasks
- Complete Code Examples: API routes, UI components, and TypeScript types
- Security Best Practices: Row Level Security (RLS) setup and environment variable configuration
The guide includes:
- ✅ Step-by-step Supabase project setup
- ✅ SQL schema and sample data
- ✅ Environment variable configuration
- ✅ Security and RLS best practices
- ✅ API endpoint documentation
- ✅ Troubleshooting tips
Study the example code in app/tasks/, app/api/tasks/, and lib/supabase.ts to understand how to build database-backed features in your own app!
| Category | Technology | Why It's Included |
|---|---|---|
| Framework | Next.js 16 | Industry-standard React framework |
| Language | TypeScript | Type safety and better IDE support |
| Styling | Tailwind CSS | Rapid UI development |
| Testing | Jest + React Testing Library | TDD methodology (required) |
| Markdown | marked + DOMPurify | Documentation & security |
| Diagrams | Mermaid | Visual documentation |
# Write test first
# Create: tests/unit/app/components/MyComponent.test.tsx
# Run tests (they should fail - RED)
npm test
# Write code to pass tests - GREEN
# Create: app/components/MyComponent.tsx
# Run tests again (they should pass)
npm testnpm run dev
# Opens on port 5000npm run test:coverage
# Minimum 80% coverage requiredThe markdown viewer at /markdown-preview helps you:
- Keep BMAD methodology docs open while coding
- Reference your own project documentation
- View code examples with syntax highlighting
- Understand architecture with Mermaid diagrams
Pro tip: Add your own markdown docs as you build - they'll automatically appear in the viewer!
- Home Page: Edit
app/page.tsx - Global Styles: Modify
app/globals.css - Layout: Update
app/layout.tsx - Colors: Adjust Tailwind config in
tailwind.config.js
- New Page: Create
app/your-feature/page.tsx - API Route: Create
app/api/your-endpoint/route.ts - Component: Create
app/components/YourComponent.tsx - Test: Create
tests/unit/app/components/YourComponent.test.tsx
The /markdown-preview route is independent - your styling changes won't affect it!
- XSS protection via DOMPurify
- Path traversal prevention
- TypeScript for type safety
- Environment variables via Replit Secrets
- TDD: Write tests before code
- Coverage: Maintain >80% test coverage
- Types: Use TypeScript types
- Secrets: Never commit API keys (use Replit Secrets)
Before submitting your project:
- Replaced shell app with your unique idea
- All features have tests (TDD)
- Test coverage >80%
- TypeScript types defined
- Documentation in markdown files
- No hardcoded secrets
- Code follows project structure
- BMAD Docs: Use the
/markdown-previewviewer - Next.js Docs: https://nextjs.org/docs
- Tailwind CSS: https://tailwindcss.com/docs
- TypeScript: https://www.typescriptlang.org/docs
- React: https://react.dev
Changes not showing?
- Restart the workflow in Replit
- Check the console for errors
- Clear browser cache
Tests failing?
- Read error messages carefully
- Check test file location
- Ensure proper imports
Type errors?
- Define types in
types/index.ts - Use proper TypeScript syntax
- Check tsconfig.json
This starter template helps you learn:
- Modern web development with Next.js and React
- Test-Driven Development methodology
- TypeScript for production code
- Component-based architecture
- API development with Next.js routes
- Professional documentation practices
When ready to deploy:
- Ensure all tests pass
- Build production version:
npm run build - Use Replit's deployment features
- Set environment variables in Replit Secrets
ISC - This is your starter template to build upon!
Remember: This is YOUR canvas. The shell app is just a starting point - replace it with your creative vision and make something amazing! 🌟
Happy Coding! Northwestern MPD2 Program