🚀 Admin Starter Angular

A modern, production-ready Angular admin panel boilerplate that you can use as a starting point for your projects. This template provides a solid foundation with all the essential features needed for building admin dashboards.

🎯 Purpose

This project is designed to be a starting point for developers who want to build admin panels with Angular. It's open-source and free to use, providing a solid foundation with modern features and best practices. Whether you're building a small admin dashboard or a large enterprise application, this boilerplate will help you get started quickly.

📋 Features

• 🎨 Modern UI/UX Design: Clean and professional interface with a dark theme
• 📱 Fully Responsive: Works seamlessly on desktop, tablet, and mobile devices
• 🔄 Collapsible Sidebar: Toggle sidebar for more screen space
• 📊 Dashboard Components: Stats cards, charts, and data tables
• ⚙️ Settings Management: Comprehensive settings interface with tabs
• 🎯 Component-Based Architecture: Modular and reusable components
• 🛠️ Built with Latest Technologies: Angular 19, Tailwind CSS 4, TypeScript 5
• 🔔 Toast Notifications: Integrated @ngneat/toast for beautiful notifications
• 🎨 Tailwind CSS: Modern utility-first CSS framework
• 📦 Production Ready: Optimized for production builds

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm (v9 or higher)

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/admin-starter-angular.git
   cd admin-starter-angular
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm start
   

4. Open your browser and navigate to http://localhost:4200

🏗️ Project Structure

src/
├── app/
│   ├── components/
│   │   ├── dashboard/       # Dashboard component with stats and charts
│   │   └── settings/        # Settings component with tabs
│   ├── layout/
│   │   ├── main-layout/     # Main layout with header and content area
│   │   └── sidebar/         # Collapsible sidebar navigation
│   ├── app.component.ts     # Root component
│   ├── app.config.ts        # Application configuration
│   └── app.routes.ts        # Application routes
├── assets/                  # Static assets
└── styles.css               # Global styles

🧩 Key Components

📊 Dashboard

• Stats cards showing important data
• Charts for data visualization
• Recent activity tables

⚙️ Settings

• Profile management
• Security settings
• Notification preferences
• User preferences
• Help and support

🔔 Toast Notifications

Integrated @ngneat/toast for beautiful, customizable notifications:

• Success messages
• Error alerts
• Warning notifications
• Info messages
• Custom styling support

🧭 Navigation

• Collapsible sidebar for efficient space usage
• Responsive header with user profile
• Intuitive navigation between sections

🛠️ Technologies Used

• Angular 19: Latest version of the Angular framework
• Tailwind CSS 4: Utility-first CSS framework
• @ngneat/toast: Beautiful toast notifications
• Lucide Icons: Beautiful, consistent icons
• TypeScript: Type-safe JavaScript
• RxJS: Reactive programming library

📝 License

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

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

📞 Support

For support, email deepakchettri877@gmail.com or open an issue in the GitHub repository.

Made with ❤️ by Deepak Chettri