Carlos

About - The site

This site has 3 web applications in it. You can find the source code in Github, but as a summary for non-coders (TL;DR):

  • Back application: This is the back-end that creates the server and uses Expressjs to connect with databases, santise server requests, connect third party APIs... that is the BACK-END
  • Hub application: This is the front-end admin application. It works as a content mangement portal, that modifies the data as in a typical Content Management system and sends back the new or modified data to Back application.
  • Web application: This is the front-end website that you actually are seeing right now. As opposed to Hub, it does has minimal state management (in terms of React.js this means most of the data is populated using props instead of state).

If you want to know more, keep reading.

The logic

The back-end application is developed using Node.js and Express.js. It handles CRUD for the database which is a MongoDB that uses and ODM called Mongoose. Most database queries are automated, that is, with CRUD and the few REST requests it is enough to create any front-end application using Mongoose. For specific database changes, I use the MongoDB shell, in which case I use the methods provided by MongoDB instead of Mongoose. But I have a basic understanding of both.

UX

The front-end Web application, it is your typical informational website. The purpose of it is to show information that I keep sending out to prospective employers, recruiters and other interested third parties. Because a lot of times it requires repetition and finding the files, I decided to make some of this information public. Therefore, this site is quite straight-forward, having speed in mind, not only in terms of performance but also navigation. It tries to get to the point in 1 click, skipping index pages, filters or duplicated menus, and leaving enough space to read whilst at the same time, taking up all the space in your screen without leaving empty sides.

The design tries to break out of the typical square, rounded shapes that have become the mainstream in the last decade on the web. It uses inspirational magazine layout as a starting point. The problem I found was that screens are usually squared or rectangular, therefore unusual shapes such as triangles that are creative and popular in magazine-style layout do not fit the responsive paradigm. Therefore, I used a mix of triangles and rectangles: trapezoids. As a former WordPress theme developer, we name all our designs, I named this "Trapezoidal" which gives to this geometrically ugly, asymmetric shape a new life. Furthermore, blue color, which is a cold color, is used to give it a professional trait, transparecy unveils my name under it and adds an "atmospheric" feeling to it.

Hub: The integrated career management tool

The front-end application Hub is intended to be used as a central "hub" for everything. It is built using React, as I believe it is great for increasingly scalable (features are added progressively) applications such as this one. The application has many containers and this is convenient for several reasons:

  • Over time, more features are added. Every new feature uses a component, which could be seen as a WordPress plugin. Therefore, I do not need to dig into the complexity of the old application and see where it fits, I just write a new component and hook it inside. I could use the index component or a parent/presentational component (which does not have or has very little logic) to do this.
  • Data convenience. Usually a document based database such as MongoDB in this case, is an Object, which has several levels depth. The way I do it, each level of depth (objects and arrays of objects) are split into a children containers, which keeps data structure simple (one level of depth per component). When you log it into the browser console you are not going to see an endless nested Object, you will see one or two levels of depth only. And this could be made available across the application with Redux (also used in this application)

Regarding the uses of Hub, it goes far more complex than the back end or the Web application. My intial idea was to make it a "integrated career management tool", which comprises of:

  • Analytics (web analytics, and career analytics, which would be jobs length, roles, type of companies, number of employees... to analyze which is the best type of company for me -or the candidate, over the years)
  • Job site integration (e.g. LinkedIn jobs with matched roles, although this is no longer possible for the free API version)
  • CV builder. Which is the feature already in. The plan would be to make it drag-and-dropable and be able to create and copy multiple instances of CVs and link portfolio of projects to difference CVs using categories.