In March 2018, I completed the C#/JavaScript/.Net course at Epicodus. Epicodus is a 7 month full time intensive coding bootcamp for aspiring programmers. I’ve met many people who completed the program and have gone on to do great things and was looking to sharpen my skillset as a digital strategist so I decided to enroll. Not only did I complete their course, but I also managed their social media to help pay for tuition while I was in school.

 

JavaScript was my favorite language we studied, and I was happy to use what I learned to tackle a real world business problem for one of my clients outside of school. While learning about JS and API’s, I created a dispensary TV display menu using Greenbits POS Software API. You can read more about the project here!

 

After six grueling months behind a computer, it was time to move on to our internships. I was very happy to be selected for a dev internship with Flight! Flight is a website/app development firm that works with entrepreneurs and startups to get their business started and off the ground.

As a dev intern, I helped redesign the company’s website and worked extensively on their Scatter School project. Coming from a marketing background, I also helped Flight rebrand by designing their color palette and creating a brand identity guidelines plans book. The internship was a mix of frontend and backend coding, and a little bit of marketing expertise while learning about the local startup community. The majority of the work was done using Angular 5, SCSS, Firebase, Angular Material, and Angular Animations.

Flight Brand Identity Guidelines:

Click here to see the full BID presentation

ScatterSchool is the founder’s passion project. It’s a website with community posted tutorials on almost anything, focusing mainly on DIY and coding projects. Along with my fellow intern, we set out to build a notification component to add to the website. It was an exciting project to work on because we learned how notification logic is built and got to play with Firebase’s FireStore service. We built notification triggers for:

  • Getting a new follower
    • Would take the user to the follower’s profile
  • If  someone a user was following posted a new article 
    • Takes user to the follower’s article
  • If a user’s article was featured on the homepage
    • Takes user to the homepage where the article was feature
  • If someone edited a user’s article
    • Takes user to article history

Here are some of the methods used to call these notifications in our notification service. More can be read about it here.

 getNewUserNotifications(userId: string) {
    return this.db.collection(`userData/${userId}/notifications`, ref => ref
    .where('timeViewed', '==', null).orderBy('timestamp', 'desc'));      
  }

  getNotificationHistory(userId: string) {
    const time = new Date(0);
    return this.db.collection(`userData/${userId}/notifications`, ref => ref
    .where('timeViewed', '>', time));
  }

  getAllUserNotifications(userId: string): AngularFirestoreCollection<{}> {
    return this.db.collection(`userData/${userId}/notifications`);
  }


  setAllNotificationsViewed(userId: string, notificationIds: string[]) {
    const batch = this.db.firestore.batch();
    for (const id of notificationIds) {
      batch.update(this.db.doc(`userData/${userId}/notifications/${id}`).ref, 
      {timeViewed: firebase.firestore.FieldValue.serverTimestamp()})
    }
    batch.commit();
  }

  setNotificationViewed(userId: string, notificationId: string):void {
    this.db.doc(`userData/${userId}/notifications/${notificationId}`)
    .update({timeViewed: firebase.firestore.FieldValue.serverTimestamp()});
  }

  createFeatureNotification(authorId: string):void{
    const id = this.db.createId();
    const notification = {
      id: id,
      userId: authorId,
      notificationType: "articleFeature",
      timestamp: firebase.firestore.FieldValue.serverTimestamp(),
      timeViewed: null
    }  
    this.db.doc(`userData/${authorId}/notifications/${id}`).set(notification);
  }

 

After creating the logic behind the notifications component it was time to build out the design. Using Sketch, I came up with a mockup and we started implementing the design based on our team’s feedback.

Sketch Mockup:

 

Final Design:

 

I was glad I got to do both frontend and backend projects at my internship because it helped me figure out how I want to forge ahead on my coding career pathway. Even though I chose the backend track at Epicodus, I am more fit to be a frontend dev. Having a clear understanding of how backend logic works makes me a stronger frontend dev, and having plenty experience as a graphic designer helps too. The notification feature also got my brain ticking about UX, as it’s constantly something I think about when I interact with a website or app. I think forging ahead as a UX Strategist and frontend developer is the right path for me, and if there’s a chance to flex my branding and marketing skills, it’ll be even better!

 

Link to all my Github Projects

 

Back to Portfolio