Event Management System

A modern, scalable event management application built with Angular 21 and TailwindCSS. This system provides comprehensive tools for creating, managing, and coordinating events with a responsive user interface.

📋 Table of Contents

• Features
• Tech Stack
• Prerequisites
• Installation
• Development
• Building for Production
• Testing
• Project Structure
• Available Scripts
• Configuration
• Contributing
• License

✨ Features

• Event Creation & Management: Create and manage events with detailed information
• User-Friendly Interface: Responsive design that works on desktop and mobile devices
• Real-time Notifications: Toast notifications for user feedback (ngx-toastr)
• Modern UI Framework: Built with TailwindCSS for beautiful and maintainable styling
• Type-Safe Development: Full TypeScript support with strict mode enabled
• Server-Side Rendering: SSR capability with Angular Universal
• Component Scaffolding: Quick component generation with Angular CLI

🛠 Tech Stack

• Framework: Angular 21.0.3
• Language: TypeScript 5.9.3
• Styling: TailwindCSS 3.4.18
• UI Components: ngx-toastr 19.1.0
• Build Tool: Angular CLI 21.0.1
• Testing: Vitest 4.0.8
• Package Manager: npm 9.8.0
• Server: Express 5.1.0 (for SSR)

📦 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js: v20.x or higher
• npm: v9.8.0 or higher (comes with Node.js)
• Angular CLI: v21.0.1 or higher

To verify your installations:

node --version
npm --version
ng version

🚀 Installation

1. Clone the repository

   git clone https://github.com/Grantlinkz/Event-Management-Project.git
   cd Event-Management-Project

2. Install dependencies

   npm install

3. Configure environment variables (if needed)

   • Create or modify .env file in the root directory
   • Add necessary configuration variables

💻 Development

Start the Development Server

npm start

Or using Angular CLI directly:

ng serve

The development server will be available at http://localhost:4200/. The application automatically reloads whenever you modify any source files.

Debugging

• Open Chrome DevTools (F12 or Cmd+Option+I)
• Use Angular DevTools extension for better debugging
• Check the console for error messages and warnings

🏗 Building for Production

Create a Production Build

npm run build

Or using Angular CLI:

ng build

Build artifacts will be stored in the dist/ directory. The production build optimizes your application for performance and speed.

Build with Watch Mode

npm run watch

This continuously watches for changes and rebuilds the project.

Server-Side Rendering

To run the application with SSR:

npm run serve:ssr:frontend

🧪 Testing

Unit Tests

Run unit tests using the Vitest test runner:

npm test

Or using Angular CLI:

ng test

End-to-End Tests

For end-to-end testing:

npm run e2e

Or:

ng e2e

Note: Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs (e.g., Cypress, Protractor).

📁 Project Structure

Event-Management-Project/
├── src/                          # Source code
│   ├── app/                       # Application components and services
│   ├── assets/                    # Static assets (images, styles)
│   ├── index.html                 # Main HTML file
│   └── main.ts                    # Application entry point
├── dist/                          # Build output (generated)
├── public/                        # Public assets
├── .vscode/                       # VS Code settings
├── angular.json                   # Angular CLI configuration
├── package.json                   # Project dependencies and scripts
├── tailwind.config.js             # TailwindCSS configuration
├── tsconfig.json                  # TypeScript configuration
├── tsconfig.app.json              # TypeScript app configuration
├── tsconfig.spec.json             # TypeScript testing configuration
└── README.md                      # This file

📝 Available Scripts

Command	Description
npm start	Start the development server
npm build	Build the project for production
npm watch	Build with watch mode enabled
npm test	Run unit tests with Vitest
npm run serve:ssr:frontend	Run application with Server-Side Rendering

⚙️ Configuration

TailwindCSS

TailwindCSS configuration can be modified in tailwind.config.js:

module.exports = {
  content: [
    './src/**/*.{html,ts}',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
};

TypeScript

TypeScript settings are configured in tsconfig.json. Key settings:

• strict: true - Enables strict type checking
• target: ES2023 - Target JavaScript version
• module: ESNext - Module system

Prettier

Code formatting configuration in package.json:

{
  "printWidth": 100,
  "singleQuote": true,
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "angular"
      }
    }
  ]
}

🔧 Useful Commands

Generate Components

ng generate component component-name

Generate Services

ng generate service service-name

View All Schematics

ng generate --help

Format Code with Prettier

npx prettier --write src/

Lint the Project

ng lint

📚 Additional Resources

• Angular Official Documentation
• Angular CLI Overview and Command Reference
• TailwindCSS Documentation
• ngx-toastr Documentation
• TypeScript Documentation

🐛 Troubleshooting

Port 4200 Already in Use

ng serve --port 4300

Clear Cache and Reinstall Dependencies

rm -rf node_modules package-lock.json
npm install

Build Issues

ng cache clean
npm cache clean --force
npm install
npm run build

🤝 Contributing

Contributions are welcome! Please follow these guidelines:

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

📄 License

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

---

Last Updated: December 2025 Developer: @Grantlinkz