RX CMS Demo

A modern, full-featured Content Management System built with SvelteKit, TypeScript, and PostgreSQL.

🚀 Features

• Authentication & Authorization: Secure login with role-based access control (Admin/Editor/Viewer)
• Rich Text Editor: Quill editor with formatting, links, images, and more
• Media Management: Upload and organize images with easy URL copying
• Post Management: Create, edit, and publish posts with draft/published status
• Public Blog: Beautiful, responsive blog with SEO optimization
• Form Validation: Zod schemas for robust form validation
• Modern Stack: SvelteKit, TypeScript, Prisma, PostgreSQL, TailwindCSS

🛠️ Tech Stack

• Frontend: SvelteKit with TypeScript
• Styling: TailwindCSS with Typography plugin
• Database: PostgreSQL with Prisma ORM
• Authentication: Lucia with bcrypt password hashing
• Rich Text: Quill editor
• Validation: Zod schemas
• Deployment: Ready for Vercel

📋 Prerequisites

• Node.js 18+
• Docker (for local PostgreSQL)
• npm or yarn

🚀 Quick Start

1. Clone and Install

git clone <your-repo-url>
cd rx-cms-demo
npm install

2. Database Setup

Start PostgreSQL with Docker:

docker-compose up -d

Run database migrations:

npx prisma migrate dev

Seed the database with sample data:

npm run db:seed

3. Environment Variables

Create a .env file in the root directory:

# Database
DATABASE_URL="postgresql://postgres:password@localhost:5433/rx_cms_demo?schema=public"

# Auth
AUTH_SECRET="your-secret-key-here-change-in-production"

4. Start Development Server

npm run dev

Visit http://localhost:5173 to see the application.

🔐 Default Login

After seeding, you can log in with:

• Email: [email protected]
• Password: admin123

📁 Project Structure

src/
├── lib/
│   ├── auth/           # Authentication setup
│   ├── components/     # Reusable components
│   └── validations/    # Zod validation schemas
├── routes/
│   ├── admin/          # Admin panel routes
│   │   ├── login/      # Login page
│   │   ├── posts/      # Post management
│   │   └── media/      # Media management
│   └── blog/           # Public blog routes
├── app.html            # HTML template
└── hooks.server.ts     # Server-side hooks

prisma/
├── schema.prisma       # Database schema
├── migrations/         # Database migrations
└── seed.ts            # Database seeding script

static/
└── uploads/           # Media uploads directory

🎯 Key Features Explained

Authentication

• Secure session-based authentication with Lucia
• Role-based access control (ADMIN, EDITOR, VIEWER)
• Protected admin routes with automatic redirects

Post Management

• Full CRUD operations for blog posts
• Automatic slug generation from titles
• Draft/Published status management
• Rich text editing with Quill

Media Management

• Image upload with validation (5MB limit, image types only)
• Organized file storage in static/uploads/
• Easy URL copying for inserting into posts

Public Blog

• Responsive design with TailwindCSS
• SEO-optimized with meta tags
• Clean, modern interface
• Individual post pages with proper routing

🚀 Deployment

Vercel Deployment

1. Database: Set up a PostgreSQL database (e.g., Neon, Supabase, or Railway)

2. Environment Variables: Add to Vercel:

   DATABASE_URL=your-production-database-url
   AUTH_SECRET=your-production-secret-key
   

3. Build Command: npm run build

4. Deploy: Connect your repository to Vercel

Local Production Build

npm run build
npm run preview

🛠️ Development Commands

# Development server
npm run dev

# Database operations
npm run db:seed          # Seed database
npm run db:reset         # Reset and reseed database
npx prisma studio        # Open Prisma Studio
npx prisma migrate dev   # Create new migration

# Type checking
npm run check
npm run check:watch

# Build for production
npm run build
npm run preview

📝 API Routes

Admin Routes (Protected)

• POST /admin/login - User login
• POST /admin/logout - User logout
• GET /admin - Dashboard
• GET /admin/posts - List posts
• POST /admin/posts/new - Create post
• GET /admin/posts/[id]/edit - Edit post
• POST /admin/posts/[id]/edit - Update post
• DELETE /admin/posts/[id] - Delete post
• GET /admin/media - Media library
• POST /admin/media - Upload media

Public Routes

• GET / - Home page
• GET /blog - Blog listing
• GET /blog/[slug] - Individual post

🔧 Customization

Adding New User Roles

1. Update the Role enum in prisma/schema.prisma
2. Run npx prisma migrate dev
3. Update authentication logic in src/lib/auth/

Styling

• Modify TailwindCSS classes in components
• Update tailwind.config.js for custom themes
• Add custom CSS in src/app.css

Database Schema

• Modify prisma/schema.prisma
• Run npx prisma migrate dev to create migration
• Update seed script if needed

🐛 Troubleshooting

Database Connection Issues

• Ensure Docker container is running: docker-compose ps
• Check database URL in .env file
• Verify PostgreSQL is accessible on port 5433

Authentication Issues

• Clear browser cookies and try again
• Check AUTH_SECRET in environment variables
• Verify user exists in database

Build Issues

• Clear node_modules and reinstall: rm -rf node_modules && npm install
• Check Node.js version compatibility
• Ensure all environment variables are set

📄 License

This project is open source and available under the MIT License.

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📞 Support

For questions or issues, please open an issue on GitHub or contact the development team.

---

Built with ❤️ using SvelteKit, TypeScript, and modern web technologies.