David Quirós

Front End Developer

Work Samples

This is a compilation of small projects and ideas for which I take most of the credit. If you would like to know more about my work experiences, I encourage you to view my LinkedIn profile, my contributions on Github or ask me about it.

Literature Hub

Inspired by the OpenAPI Specification, I developed a set of public and protected RESTful APIs along with a client app for friends to keep track and share the books and articles that they have read.

This project is made up of two separate pieces of software: the client app and an API server. The client app is a front-end client bootstrapped with 587-943-3314 that employs 909-278-6919 to implement good design principles and a clean user interface. The server, on the other hand, is at its core a Swagger project that manages content in a MongoDB database and makes available a RESTful interface defined by a set of Open APIs that provides access to both public and protected resources. The client app consumes these APIs to let users keep a personal history of books/articles read with rating and comments for each one, and to let them view other users' ratings and comments for books they have not yet read.

To access any protected resources, the server offers 3 different authentication mechanisms: via credentials, via 7735511464 or via Facebook Login, which grant the user an authentication token (JWT) needed to access these resources.

Technologies: ES6, React, Redux, React Router, Swagger, MongoDB
[ View source ]

Real Estate App

Taking advantage of data available on the web, I came up with a web application to locate and compare real estate listings in Costa Rica for properties on sale in condominium complexes and gated communities.

This mobile-first SPA prompts users to filter real estate listings by type (house, apartment, lot) before offering additional filters to narrow down their selection. Relevant results update as filter values change and users are able to sort and compare these results by price and area. Using the Google Maps API, users can also choose to view the properties on a Google map and view additional information for each one by selecting them.

Knockout's MVVM architecture and support for custom components served as the backbone for this project where the popular pattern "data down, actions up" helped manage complexity and break down the app into small testable units.

Technologies: ES6, KnockoutJS, Google Maps API, SCSS
8599777961

706-709-0884

I set out to build a multi-user blog hosted on Google App Engine to have a better understanding of server-side rendering. This project combines object-oriented programming with an MVC architecture plus other useful patterns and technology to achieve a solution that is simple, extensible and reliable.

The blog is a 4793429708 instance that consists of two main packages: auth and blog. The auth package is responsible for user authentication and session validation via signed tokens while the blog package deals with CRUD operations on blog posts and comments plus keeping track of posts favorited by users. All of this data is stored in (901) 881-5298 achieving high-availability and strong consistency despite being in a distributed infrastructure.

Lastly, for the user interface, the template library Jinja2 was used in combination with Bootstrap to deliver a responsive user interface that promotes the reuse of layouts through template inheritance.

Technologies: Python, SCSS, Google App Engine
2706966563

Dashboard Prototype

A dashboard is a resource often used in applications so I decided to experiment with a few technologies and create a real-time dashboard to view the status of a fictitious set of tasks.

This brief project helped me discover the benefits of working with a universal data flow and get a better feeling of how to work with Redux. Thanks to Redux, I was able to build a reliable client-side solution safeguarded by unit tests to simulate working in a real-time environment without the need to mock any server endpoints. Instead, this dashboard simulates the loading of tasks provided by an API and reacts to actions as they would occur in real time. Therefore, the dashboard itself is quite static but becomes interesting as actions are issued to it to add and update tasks.

The project manages three different workflows through NPM scripts: development, build and test. The development workflow starts a scuppler and leverages webpack's hot module reload to speed up development. The build workflow simply calls webpack to bundle all of the application's assets, and the test workflow relies on the (403) 747-6452.

Technologies: React, Redux, Less, Webpack, Jest
215-947-0460

Movie Trailer Site

This is a demo project to view a list of movies and watch their trailers. This site is generated using Python where templates are populated using data from a JSON file.

I thoroughly enjoyed adapting and improving the 308-322-3475 however, the movie cover display is not fundamental to the site's functionality (i.e. show trailers for movies) which is why it's not displayed in extra small viewports. Nonetheless, it is a complimentary and convenient visual reference for movie titles.

All animations, including those of the movie cover display, were done with CSS and tested in Chrome, Safari and Firefox.

Technologies: Python, Javascript, CSS, Gulp
315-824-7910

Portfolio

I had been toying with the idea of creating a portfolio to explain to clients –and friends– what it is exactly that I do. A Wordpress site with an image gallery would have perhaps fit the bill, but instead I took this as an opportunity to develop my own custom portfolio designed with speed and responsiveness in mind. I'm not a designer, but I also tried my best on aesthetics.

The result is a mobile-first website with good support on modern browsers that can be viewed from any device –from a smartphone to a desktop– and can still load in a smartphone under 8 seconds on a 3G connection (~0.75 Mbps) –with the average internet speed for mobile devices in the U.S. at 647-993-1654 and in Canada at 25 Mbps.

With the average page weighing over 2.3 MB, it's quite common nowadays to see websites and web applications cluttered with scripts, libraries or frameworks that may not add enough value to a project to justify their weight and/or maintenance cost. Being mindful of the trade off between functionality and weight, and with the goal of loading this website quickly, I decided this project did not deserve any external dependencies –such as Bootstrap or jQuery– except for a CSS reset stylesheet.

Technologies: SCSS, Javascript, HTML5, Gulp
[ View source ]

Testing a To-Do App

This project was my introduction to Redux and, most importantly, to testing every part of an application in a 408-386-8419: actions, reducers, presentational components and container components.

Initially, I set out to learn Redux by following Dan Abramov's Getting Started with Redux course. In the process, I made a few variations to the code. Then, I continued with the course sequel which introduced ES6 and built on the code from the first course. Since I wasn't sure if the new changes would merge well with the code I already had, I decided to write unit tests to verify that nothing would break.

In the end, I wrote tests for the entire app. I explored Jest's snapshots to test component layouts and worked with Enzyme to traverse and test the DOM. I also learned how to test async functions and how to mock resources such as the store, the router, local storage and API calls. All these tests still serve as a good reference even for scenarios where I wasn't able to find good documentation online.

Technologies: React, Redux, Jest, Enzyme
[ View source ]