OC|CS Bootcamp Cohort 3 - Graduated!

That’s right! I graduated from Orange County Code School‘s Cohort 3!

I’m now officially unemployed! So, a couple of house keeping things:

Hire me!

Resume: http://www.duncanleung.com/portfolio/Duncan-Leung-Full-Stack-Javascript-Developer.pdf
LinkedIn: https://www.linkedin.com/in/duncanleung
GitHub: https://github.com/duncanleung

For those who are just joining us

(or… whoever even reads this blog because I don’t actually track my analytics. I know, you’re probably saying:
*
“And you used to do SEO? Don’t you guys live on Page Views or some other vanity metric?”.
**Nope, I blog for the fun of it! *//I digress)

As I was saying. For those who are just joining us, Orange County Code School (OC|CS) is a Full-Stack JavaScript Immersive Bootcamp, where students engage in over 540 hours of intensive coding in Full-Stack Javascript, over 3-months.

During these past 3 months I learned full-stack web development primarily focusing on the MEAN stack (MongoDB, Express, Angular.js, Node.js).
I say primarily focusing on, because I got over-eager and also researched and implemented Socket.io, React.js, and D3.js into my second project (It ain’t a bootcamp until you’re feeling the burn, right?).

Was it worth it? For me, it was worth it. The 6-hours-a-day in-class work environment was exactly what I needed to zone in and pick up the skills to be able to build apps using modern web technologies.

Here’s a summary and key achievements of what I built during the course:

Project 1: TravelGram – An Instagram geolocation photo discovery web app

Travelgram is a photo discovery app that allows users to search for a location in the world and view geolocated Instagram photos that were taken at the searched location.

The Google Places API is used to retrieve the latitude/longitude of the searched location and a request is made to Instagram to retrieve geolocated photos within that latitude/longitude.

The returned Instagram photo data is used to dynamically render DOM elements into a gallery. At the same time, markers are plotted into Google Maps according to the specific latitude/longitude of where each individual photo was taken.

Hovering over each photo will highlight the corresponding marker to show you where the photo was taken (and vice versa), which is achieved by tracking each Goole Maps marker and corresponding photo with an array.

Github – http://github.com/duncanleung/travelgram
Live Demo – http://travelgram.herokuapp.com/
(Search Paris, London, or Shanghai for demo. Limited results due to Instagram Developer Sandbox)

Key Acheivements:

  • Learned and implemented API calls, Sass, CSS flexbox, and map-marker highlighting, through self-study
  • Dynamic DOM generation with Javascript to populate Instagram gallery and map markers depending on user search
  • Javascript event-listeners highlight map-markers on hovering over a Photo (and vice versa)
  • Responsive design and positioning with CSS3 flexbox and media-queries
  • Dynamic grid layout as screen size decreases, with Bootstrap 3 column classes
  • Generated DOM elements from returned JSON data, from AJAX calls to Instagram API and Google Maps API

Skills: Javascript, Traversing Arrays, AJAX, Instagram API, Google Maps API, Google Places API, Git, Github, HTML5 (Jade), CSS 3 (Sass), Bootstrap 3, Responsive Design, Balsamiq 3

Project 2: Twitterment – A Real-Time Twitter Sentiment Dashboard

Twitterment (Twitter Sentiment) Is a real-time Twitter sentiment dashboard that analyzes and graphs the sentiment of a tracked keyword.

Twitterment listens to the Twitter Streaming API for the searched keyword. Received Tweets are analyzed with an AFINN-based sentiment analysis npm module, and the analyzed Tweet object is sent to the client.

Node.js (Express) and Socket.io is used on the backend to achieve real-time client-server updates when new tweets are received on the server. React.js is used as the view layer to manage DOM rendering of new Tweets in real-time with a reusable React TweetCard.jsx component. D3.js is used to render each sentiment analyzed Tweet onto a line graph to show the sentiment trend since the search started.

Regarding D3 and React integration, Twitterment uses React to handle DOM manipulations for plotting Data Points (DataPoints.jsx) and Line Paths (LinePath.jsx) for the line graph. This decision was made since React already knows when to rerender the graph when new tweets are received and the tweet counts are updated in the app.

Github – http://github.com/duncanleung/twitter-sentiment
Live Demo – http://twitterment.herokuapp.com/
(Note, there is a Twitter API limit on the live demo. If it doesn’t work, please try again the next day!)

Key Achievements:

  • Learned and implemented React.js, Socket.io, and D3.js through self-study (was not taught in class curriculum)
  • Websocket server on Node.js, Express, and Socket.io to enable real-time ‘push-data’ functionality from server to client
  • React.js front-end with modularized and reusable React.js components for maintainability
  • Utilized React.js component lifecycle to animate sentiment analysis hit-counters
  • D3.js real-time multi-line graph visualize sentiment Tweet data over time
  • Use user-entered keywords to monitor the Twitter Stream API in real-time

Skills: Javascript, React.js, D3.js, Node.js, Express, Socket.io, Twitter API, Git, Github, HTML5, CSS 3, Sass, Bootstrap 3, Webpack, npm, Balsamiq 3

Project 3: Twitterment – A Real-Time Twitter Sentiment Dashboard

ToDoIt is a full-stack MEAN (MongoDB, Express.js, Angular.js, Node.js) app that allows users to sign up for an account and store To Do items to their account.

TodoIt was built with a RESTful ‘API first’ process on Node.js, Express, and MongoDB. This approach provided helpful constraints to focus development on creating functional CRUD processes that could be tested using Postman. With functioning REST API endpoints, development could be focused on the frontend.

A normalized data structure with two separate MongoDB collections are used to store User accounts (with password hashing) and Todo items. Each To Do document stores a reference to the User ID that the To Do item belongs to. A MongoDB search on the Todo collection, by user ID, ensures that each user only sees To Dos they own.

Passport.js is used to authenticate users and create a session which is stored as a cookie, and Passport attaches req.userwhen a user is logged into a session. req.user is attached to the window object as window.user to allow Angular.js to conditionally show/hide elements, like a Logout link, if the user is logged in.

API endpoints that require user authentication are also protected using a custom middleware that uses Passport’s req.isAuthenticated() to either return next(), or returns a status code of 401.

On the frontend, a custom Angular.js factory service allows the Todo controller to make AJAX CRUD requests to the aformentioned API endpoints. TodoIt uses Angular’s $routeProvider to serve partial html views according to defined URL routes, and ngRepeat is used to render To Do items. ngShow provides a simple method of conditionally showing/hiding UI elements depending on whether there are To Dos and completed To Do items.

Github – https://github.com/duncanleung/todo
Live Demo – http://todo-mean.herokuapp.com/

Key Achievements:

  • RESTful server API endpoints built on Node.js, Express
  • MongoDB stored todos and user-accounts with hashed passwords for security
  • Username/Password login authentication and cookie session management with Passport.js
  • Modularized AngularJS modules and controllers to separate functionality and improve code maintainability
  • Reusable AngularJS service with $resource to CRUD todo items with backend API

Skills: Javascript, Angular.js, Node.js, Express, MongoDB, Mongoose, Passport.js, Bcrypt, Git, Github, HTML5, EJS, CSS 3, Sass, Bootstrap 3, Bower, Gulp, npm, Balsamiq 3

Duncan Leung

Front End Developer at iHerb.com

Irvine, CA

Subscribe to Duncan Leung: Javascript and Front End Development

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!