ABP React

A modern, high-performance React UI implementation for the ABP Framework. This project serves as a drop-in replacement for the default Angular UI, offering improved performance, better SEO capabilities, and a more modern development experience.

📋 Table of Contents

• ABP React
  • 📋 Table of Contents
  • 🚀 Demo
  • ✨ Features
  • 🚀 Getting Started
    • Prerequisites
    • Installation
    • Configuration
    • Running the Project
  • 📚 Project Overview
  • 📊 Performance
  • 🤝 Contributing
  • 💬 Support
  • 📄 License
  • 🙏 Acknowledgments
  • 👥 Contributors

🚀 Demo

Check out the live demo at https://abpreact.antosubash.com/

✨ Features

• 🎨 Modern UI/UX

  • Responsive design
  • Dark/Light theme support
  • Tailwind CSS styling

• 🔐 Authentication & Authorization

  • Login/Logout functionality
  • User registration
  • Password recovery
  • Role-based access control

• 🌐 Multi-tenant Support

  • Tenant management
  • Tenant switching
  • Tenant-specific configurations

• 👥 User Management

  • User CRUD operations
  • Role management
  • Permission management
  • Profile management

• ⚙️ System Features

  • Multilingual support
  • Theme customization
  • Settings management
  • Feature management

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (LTS version recommended)
• pnpm (Package manager)
• .NET 8 (Backend framework)
• ABP Framework (Backend framework)

Installation

1. Install the ABP React .NET Template:

dotnet new install Anto.Abp.React.Template

2. Create a new project:

dotnet new abp-react -o my-project-name --apiUrl your-api-url

Note: Use kebab-case for project names (e.g., my-project-name) as it will be used for package organization.

Configuration

1. Copy the environment variables:

cp .env.sample .env

2. Update the .env file with your project-specific values:

• API URL
• Authentication settings
• Other configuration options

Running the Project

1. Navigate to your project directory:

cd my-project-name

2. Install dependencies:

pnpm install

3. Start the development server:

pnpm dev

📚 Project Overview

ABP React is built with modern web technologies:

• Next.js - React framework for production
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework

The project aims to provide a production-ready React UI for ABP Framework applications, focusing on:

• Performance optimization
• SEO friendliness
• Modern development experience
• Full ABP Framework integration

📊 Performance

The project maintains high performance scores across all Lighthouse metrics. View the detailed report here.

🤝 Contributing

We welcome contributions! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Commit your changes (git commit -m 'Add amazing feature')
5. Push to the branch (git push origin feature/amazing-feature)
6. Open a Pull Request

Please ensure your code:

• Follows the existing code style
• Includes appropriate tests
• Updates documentation as needed
• Passes all CI checks

💬 Support

For support, please:

• Open an issue in the GitHub repository
• Contact [email protected]
• Join our community discussions

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Special thanks to:

• ABP Framework - The foundation of this project
• React - The UI library
• Next.js - The framework
• TypeScript - The language
• Tailwind CSS - The styling

👥 Contributors

• Anto Subash - Project Maintainer
• Sajan - Contributor