# Final Project- Five One Labs Website
**Codepen Link: https://codepen.io/tl3250/pen/qBwzQxa**

**Global Networking Hub for Refugee Entrepreneurs**
This project aims to build an internal and global networking website for Five One Labs, a client that I have worked with for this semester for the Design for Social Innovation Class at SIPA, Columbia.

Five One Labs a nonprofit based in Iraq and Colombia, currently operating incubator/accelerator and other programs for displaced refugee entrepreneurs to start businesses in their new locations. Five One Labs aims to expand to new areas with the goal of establishing a global brand and integrative startup ecosystems in different regions. As they scale, it's crucial for them to provide robust post-program support and foster this global community.

# Midterm Design
Therefore, I designed a website for them, featuring a networking hub, acting as an internal LinkedIn for individuals who have participated in the Five One Labs program. In my midterm project, I used just Vue.js to store information in the parent component and create entrepreneur cards with "v-for," as well as options to filter and sort.

# Final Project Improvements
To enhance this further,
1. I have migrated the networking hub to store all entrepreneur data with a Firestore database and configurated the codepen with my API.
2. **Sorrt, Filter, Reset**: I used multiple methods, computed, and getdocs, query, and collections to include the original feature of *sort, filter, and reset*for entrepreneurs to find quickly who they want to connect with.

methods: {
  readEntrepreneurs() {
    let q = query(entrepreneursRef);
    if (this.filterCountry || this.filterField) {
      let filters = [];
      if (this.filterCountry) {
        filters.push(where("country", "==", this.filterCountry));
      }
      if (this.filterField) {
        filters.push(where("field", "==", this.filterField));
      }
      q = query(entrepreneursRef, ...filters);
    }
    const querySnap = await getDocs(q);
    this.entrepreneurs = querySnap.docs.map(doc => ({ id: doc.id, ...doc.data() }));
    this.sortEntrepreneurs();
  },

  sortEntrepreneurs() {
    if (this.sortYear) {
      this.entrepreneurs.sort((a, b) => this.sortYear === "asc" ? a.year - b.year : b.year - a.year);
    }
  },

  resetFilters() {
    this.filterCountry = "";
    this.filterField = "";
    this.sortYear = "";
    this.readEntrepreneurs();
  },
}

3. **Connect and Remove Buttons**: I implemented the connect and remove functionality to manage the entrepreneur connections using array manipulations. I added methods and emitted child component with parentto to handle the connection status of each entrepreneur, where a button click would update the list and change the connection state of the selected entrepreneur:

methods: {
  connectEntrepreneur(name) {
    if (!this.connections.includes(name)) {
      this.connections.push(name);
      const index = this.entrepreneurs.findIndex(entrepreneur => entrepreneur.name === name);
      if (index !== -1) {
        this.entrepreneurs[index].isConnected = true;
      }
    }
  },

  removeEntrepreneur(name) {
    this.connections = this.connections.filter(connection => connection !== name);
    const index = this.entrepreneurs.findIndex(entrepreneur => entrepreneur.name === name);
    if (index !== -1) {
        this.entrepreneurs[index].isConnected = false;
    }
  }
}

methods: {
    connect() {
      this.$emit("connect-entrepreneur", this.entrepreneur.name);
    },
    remove() {
      this.$emit("remove-entrepreneur", this.entrepreneur.name);
    }
  }

4. **Changing Color of Buttons to Show Status**: To visually indicate whether an entrepreneur is connected or not, I used dynamic classes in Vue.js. This involved binding a class based on the entrepreneur's connection status, which is determined by checking if their name is in the connections array. Once the entrepreneurs are added to the "Requested Connection List", users could also use the remove button to remove connections:

<button :class="{'connected': connections.includes(entrepreneur.name)}" @click="connectEntrepreneur(entrepreneur.name)">
  Connect
</button>

<button class="btn-remove" @click="removeEntrepreneur(connection)">Remove</button>

5.**Message Modal**:To enhance interaction within the application, I introduced a message modal feature. This modal allows users to send a message to an entrepreneur after they have connected. The implementation involves both Vue.js for the front-end interaction and Firebase for storing the messages securely. Due to time constraints, I have only built the modal as a placeholder that the messages are not stored in collections in Firebase which could be improved on:

<template>
  <div v-if="showModal" class="message-modal">
    <textarea v-model="messageText" placeholder="Type your message here..."></textarea>
    <button @click="sendMessage">Send</button>
    <button @click="closeModal">Close</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
      messageText: '',
    };
  },
  methods: {
    sendMessage() {
      this.$emit('send', this.messageText);
      this.messageText = ''; // Clear the text field after sending
      this.showModal = false; // Close the modal
    },
    closeModal() {
      this.showModal = false;
    }
  }
}

6. **User Authentication**: For authentication, I used Firebase to handle user sign-ups, logins, and session management. This is especially important for this website because it's aimed to build an internal global system for current and alumni entrepreneurs of Five One Labs. These people need to log in first to access the network for security and resource sharing reasons. I used catch error method but still could not figure out why the Google Signin is not working :

methods: {
  signIn() {
    signInWithEmailAndPassword(auth, this.email, this.password)
      .then(userCredential => {
        this.currentUser = userCredential.user;
        this.isLogin = true;
        this.readEntrepreneurs();
      })
      .catch(error => {
        console.log("Error:", error.code, error.message);
      });
  },

  register() {
    createUserWithEmailAndPassword(auth, this.email, this.password)
      .then(data => {
        this.currentUser = getAuth().currentUser;
        this.isLoginMode = true;
        this.isSignUpMode = false;
      })
      .catch(error => {
        console.log("Error:", error.code);
      });
  },

  loginWithGoogle() {
    signInWithPopup(auth, provider)
      .then(result => {
        this.currentUser = result.user;
        this.isLogin = true;
        this.readEntrepreneurs();
      });
  }
}

7. **Other Styling Considerations**: This website was designed carefully using Five One Lab's theme color including:

 background-color: #fccc3b; and
 background-color: #f4f4f4;

Each part considers the consistency of color and ease to read. For example:
* a. The shadow of both login/signup page and entrepreneur cards when hovered or static is consistent

.entrepreneur-info:hover {
  box-shadow: 0 4px 8px 0 rgba(252, 204, 59, 0.5); /* Orangy-yellow shadow */
}

* b. As mentioned previously, the connect button changes color to grey after clicking (added to the requested list), and remove button turns red when hovered over.

.btn-remove:hover {
  background-color: #c82333;
}