https://github.com/codebangla/signal-admin
Singal Admin – Free Angular Admin Dashboard Template A modern, responsive Angular admin template built with Angular 20, Tailwind CSS, and PrimeNG. Singal Admin includes a ready-to-use Angular admin login, fully featured admin dashboard, and modular components. Ideal for enterprise apps, CMS systems, and internal tools.
https://github.com/codebangla/signal-admin
admin-dashboard admin-template admin-ui angular angular20 primeng typescript
Last synced: 4 days ago
JSON representation
Singal Admin – Free Angular Admin Dashboard Template A modern, responsive Angular admin template built with Angular 20, Tailwind CSS, and PrimeNG. Singal Admin includes a ready-to-use Angular admin login, fully featured admin dashboard, and modular components. Ideal for enterprise apps, CMS systems, and internal tools.
- Host: GitHub
- URL: https://github.com/codebangla/signal-admin
- Owner: codebangla
- License: mit
- Created: 2025-07-05T10:25:14.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-07-05T10:38:07.000Z (4 months ago)
- Last Synced: 2025-07-05T11:36:34.356Z (4 months ago)
- Topics: admin-dashboard, admin-template, admin-ui, angular, angular20, primeng, typescript
- Homepage:
- Size: 4.88 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - signal-admin - A modern admin panel built with Angular 20, Angular Material, and Tailwind CSS. Features a responsive design with collapsible sidebar, user management, forms, and UI components. (Site Templates / Free Templates)
- awesome-angular - signal-admin - A modern admin panel built with Angular 20, Angular Material, and Tailwind CSS. Features a responsive design with collapsible sidebar, user management, forms, and UI components. (Site Templates / Free Templates)
README
# Signal Admin Panel
A modern admin panel built with Angular 20, Angular Material, and TailwindCSS. Features a responsive design with collapsible sidebar, user management, forms, and UI components.
## Features
- **Modern Stack**: Angular 20 with standalone components and lazy loading
- **UI Framework**: Angular Material with TailwindCSS for styling
- **Responsive Design**: Mobile-first approach with collapsible sidebar
- **Authentication**: Mock login/signup with route guards
- **User Management**: CRUD operations with search and filtering
- **Form Components**: Comprehensive form examples with validation
- **UI Components**: Showcase of various Material Design components
- **Mock API**: json-server for development and testing
## Project Structure
```
src/
├── app/
│ ├── core/
│ │ ├── models/ # Data models
│ │ ├── services/ # Core services
│ │ └── guards/ # Route guards
│ ├── features/
│ │ ├── dashboard/ # Dashboard feature
│ │ ├── user/ # User management
│ │ └── admin/ # Admin features
│ ├── layouts/
│ │ ├── auth-layout/ # Authentication layout
│ │ └── main-layout/ # Main app layout
│ ├── pages/
│ │ ├── login/ # Login page
│ │ └── signup/ # Signup page
│ └── shared/ # Shared components
├── assets/
│ └── mock-api/ # Mock API data
└── environments/ # Environment configs
```
## Getting Started
### Prerequisites
- Node.js 20+
- npm or yarn
### Installation
1. Clone the repository:
```bash
git clone https://github.com/codebangla/signal-admin.git
cd signal-admin
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm start
```
4. Start the mock API server (in a separate terminal):
```bash
npm run api
```
The application will be available at `http://localhost:4200`
## Available Scripts
- `npm start` - Start development server
- `npm run build` - Build for production
- `npm run api` - Start json-server mock API
- `npm run test` - Run unit tests
- `npm run lint` - Run ESLint
## Authentication
The app includes mock authentication with the following credentials:
- **Email**: admin@example.com
- **Password**: admin123
## Features Overview
### Dashboard
- Overview cards with key metrics
- Recent activity feed
- Quick action buttons
### User Management
- User list with search and filtering
- Add/Edit/Delete operations
- Role-based status indicators
- Avatar support
### Forms
- Comprehensive form examples
- Validation patterns
- Various input types (text, email, select, date, etc.)
- Form submission handling
### UI Components
- Buttons, cards, chips
- Progress indicators
- Badges and icons
- Lists and tabs
- Expansion panels
## Mock API
The project includes a json-server setup with the following endpoints:
- `GET /users` - Get all users
- `GET /users/:id` - Get user by ID
- `POST /users` - Create new user
- `PUT /users/:id` - Update user
- `DELETE /users/:id` - Delete user
## Styling
The project uses:
- **TailwindCSS 3.4.0** for utility classes
- **Angular Material** for components
- **Custom CSS** for specific styling needs
## Development
### Adding New Features
1. Create feature folder in `src/app/features/`
2. Add routes to appropriate layout
3. Create standalone components
4. Add to navigation if needed
### Component Structure
All components are standalone and follow this pattern:
```typescript
@Component({
selector: "app-component-name",
standalone: true,
imports: [
/* Material modules */
],
template: `/* Inline template */`,
})
export class ComponentName {}
```
## Deployment
1. Build the application:
```bash
npm run build
```
2. Deploy the `dist/signal-admin` folder to your hosting provider.
## Contributing
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request
## License
This project is licensed under the MIT License.