Eventify Frontend

The front end for Eventify is built using Angular to provide a dynamic user interface for our Event Management System. This repository contains all the source code and assets needed for the frontend application.

Technologies Used

• Framework: Angular
• Styling: SCSS, Bootstrap, Angular Material
• Routing: Angular Router for navigation
• Real-Time Communication: SignalR for notifications and updates

Project Structure

Eventify-Frontend/
├── src/                         
│   ├── app/                    # Main application folder
│   │   ├── components/          # Reusable components
│   │   ├── guards/              # Route guards for access control
│   │   ├── helpers/             # Utility functions and helpers
│   │   ├── interceptors/        # HTTP interceptors
│   │   ├── interfaces/          # TypeScript interfaces
│   │   ├── models/              # Data models
│   │   ├── pages/               # Application pages
│   │   ├── pipes/               # Custom pipes
│   │   ├── services/            # Services for business logic and API interaction
│   ├── assets/                  # Static assets like images and icons
│   ├── environments/            # Environment configuration
│   ├── styles/                  # Global styles (SCSS)
│   └── index.html               # Main HTML file
├── angular.json                 # Angular configuration file
├── package.json                 # Project metadata and dependencies
└── README.md                    # Project documentation

How to Run the Application

Follow these steps to set up and run the application:

1️⃣ Clone the Repository

git clone https://github.com/XoCode-Software-development-team/Eventify-event_management_system-frontend
cd Eventify-event_management_system-frontend

2️⃣ Install Dependencies

npm install

3️⃣ Set Up Firebase Cloud Storage

• Configure Firebase in your project.
• Obtain your Firebase credentials from the Firebase console.

4️⃣ Get a Google Maps API Key

To use Google Maps in your application, follow these steps to obtain an API key:

1. Go to the Google Cloud Console.
2. Create a new project or select an existing one.
3. Navigate to APIs & Services > Credentials.
4. Click Create Credentials > API Key.
5. Enable the following APIs for your project:
   • Maps JavaScript API
6. Copy the generated API key.

5️⃣ Create environment.ts

• Navigate to the environments/ directory.
• Create a new file named environment.ts.
• Copy the structure from example.environment.ts and update the credentials.

Example environment.ts File:

export const baseApiUrl = {
    Url: 'your-api-url'
};

export const environment = {
    firebaseConfig: {
        apiKey: "your-firebase-apiKey",
        authDomain: "your-authDomain",
        projectId: "your-projectId",
        storageBucket: "your-storageBucket",
        messagingSenderId: "your-messagingSenderId",
        appId: "your-appId",
        measurementId: "your-measurementId"
    }
};

export const mapEnvironment = {
    production: false,
    googleMapsApiKey: 'your-googleMapAPIKey'
};

6️⃣ Start the Application

ng serve

Now, the application should be running!

Acknowledgments

Special thanks to all the contributors and mentors who supported this project!