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:
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)
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.
- Learned and implemented API calls, Sass, CSS flexbox, and map-marker highlighting, through self-study
- 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
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!)
- 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
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.
- 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