Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/taysir17/googleclubsite

A project created about the Google Club activities at our university. The project demonstrates the use of various Angular concepts and practices learned during our sessions, such as Two-way Data Binding, Event Binding, Routing, Guards, Pipes, and more.
https://github.com/taysir17/googleclubsite

angular css guard html json pipe routing typescript

Last synced: 7 days ago
JSON representation

Host: GitHub
URL: https://github.com/taysir17/googleclubsite
Owner: taysir17
Created: 2023-11-19T19:22:03.000Z (about 1 year ago)
Default Branch: master
Last Pushed: 2024-12-10T11:59:15.000Z (16 days ago)
Last Synced: 2024-12-10T12:36:50.218Z (16 days ago)
Topics: angular, css, guard, html, json, pipe, routing, typescript
Language: SCSS
Homepage:
Size: 9.44 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Google Club Project - Angular Application

A collaborative project created in **November 2023** about the **Google Club activities** at our university. The project demonstrates the use of various Angular concepts and practices learned during our sessions, such as **Two-way Data Binding**, **Event Binding**, **Routing**, **Guards**, **Pipes**, and more.

---

## 🚀 **Getting Started**

Follow these steps to run the project on your local machine.

### 1. **Clone the Repository**

```bash
git clone https://github.com/taysir17/GoogleClubSite.git
cd GoogleClubSite
```

### 2. **Install Dependencies**

Run the following command to install the necessary dependencies:

```bash
npm install
```

### 3. **Set up the JSON Server**

The project uses a JSON file to simulate a backend. To start the JSON server:

```bash
cd json
json-server --watch bdform.json
```

This will start the server at [http://localhost:3000](http://localhost:3000).

### 4. **Start the Angular Application**

In the main project directory, start the Angular development server:

```bash
ng serve
```

The application will run at [http://localhost:4200](http://localhost:4200).

---

## ⚙️ **Features**

This project incorporates various Angular features, including:

- **Two-way Data Binding**
- **Event Binding**
- **Property Binding**
- **String Interpolation**
- **Routing**
- **Guards** for route protection
- **Pipes** for transforming data
- **Reactive Forms** with validators
- **Server HTTP** communication

---

## 📸 **Screenshots**

Here are some screenshots of the project:

### Homepage
![Homepage](screenshots/HomePage.png)

### AboutUs
![Homepage](screenshots/AboutUs.png)

### Login Form
![Form Example](screenshots/LoginForm.png)

### Admin Dashboard
![List of Members](screenshots/AdminDashboard.png)

---

## 🛠 **Technologies Used**

- **Angular**: Framework for building dynamic, single-page web applications.
- **JSON Server**: Mock server to simulate backend API.

---

## 📜 **License**

This project is licensed under the MIT License. Check the [LICENSE.md](LICENSE.md) file for details.

---

## 💬 **Contributing**

Contributions are welcome! Fork the repository, make your changes, and submit a pull request.

---

## 🧑‍💻 **Contact**

For any questions, feel free to reach out!

- Email: [[email protected]](mailto:[email protected])