/payload-react-router7-auth

A modern, full-stack application template combining React Router v7 for the frontend and Payload CMS for the backend, with SQLite database integration.

Primary LanguageTypeScript

Full-Stack React Router(Remix) + Payload CMS Authentication Application

A modern, full-stack application template combining React Router v7 for the frontend and Payload CMS for the backend, with SQLite database integration.

Video

Project Structure

This project is organized into two main parts:

  • client-app/ - React Router v7 frontend application
  • server/ - Payload CMS backend server

Features

Frontend (client-app)

  • 🚀 React Router v7 with SSR support
  • 🎨 TailwindCSS for styling
  • 📦 TypeScript support
  • 🔒 Authentication flow with Payload CMS
  • 🔄 Hot Module Replacement (HMR)

Backend (server)

  • 🛠 Payload CMS with SQLite database
  • 👤 User authentication system
  • 🔑 Role-based access control (Admin/User roles)
  • 🌐 REST API endpoints
  • 📁 Media collection support

Authentication Features

  • User registration
  • Login/Logout functionality
  • Role-based access control
  • Session management with HTTP-only cookies
  • Protected routes

Development

Both applications include:

  • TypeScript configuration
  • ESLint and Prettier setup
  • Docker support
  • Development and production configurations

License

MIT