Full Stack Web Developer

Kimetrics

Feb 16 - Sep 17

Table of contents

Role

Full time developer and freelancer for later projects. I worked on-site along with other developers for most of the projects, always under SCRUM framework. We had daily meetings with the team and/or clients. We used JIRA for projects management, Slack for team communication and Git (Github and Bitbucket) for version control (following git flow branching model). My main responsibilities were to implement new features for new versions of platform (v2 and v3). I also were in charge of sites deployment and maintenance and attending requests from other departments.

Some of the challenges I faced when developing the following projects included: real-time data acquisition, data visualization, geolocation and role-based administration.

Projects

Kimetrics Backend

Restful API designed to be consumed by mobile application (Android) and feed a data warehouse. This project went through 2 major updates: v2 and v3. I started working on v2 features and maintenance, and later I participated designing and implementing v3.

  • Hosted on AWS EC2
  • Nginx for server
  • Django (from 1.9 to 1.11)
  • Django Rest Framework for API
  • PostgreSQL on AWS RDS
  • PIP + venv for package management
  • Fabric for deployment
  • Celery + RabbitMQ for asynchronous tasks
  • Other libraries: django-tenants, django-filters, openpyxl, requests

Kimetrics Frontend

Single Page Application for administration and monitoring of mobile users activity. Frontend views included: CRUDs for most of backend models, users activity visualized in map and event-based schedules in calendar.

  • Due to users activity it was required to render a huge amount of elements. This caused a lot of performance issues due to Angular's design. I developed custom directives to remove useless watchers in maps and calendar views. This improved site speed substantially.
  • Settings and permissions were in constant change so I developed "recursive" directives to render views based only on those objects structures
  • The survey builder component (based on angular-surveys) could be a separated project due to its complexity, which included nested CRUDS, a lot of drag and drop interaction, strong forms validation among other features.
  • Hosted on AWS S3
  • Based on a Yeoman generator
  • Angular.js
  • NPM and Bower for package management
  • Gulp task automation
  • Fabric for deployment
  • Angular Material for UI
  • Pug (Jade) for templates
  • SASS
  • Jasmine + Karma for testing
  • Survey builder (forked from angular-surveys)
  • Other libraries: ui-router, moment, google-maps, full-calendar, angular-permissions, dragula

Flow Builder

Frontend tool to generate flowcharts-like surveys. These "designs" were later used as base for survey answering in mobile app. This project was build with excellent user experience in mind. Grommet was chosen as UI framework and JsPlumb to generate SVG elements free to move in viewport and create connections between nodes. This tool was the first piece of new frontend project based on React.

  • This tool required excellent user experience due to survey's complex design.
  • New surveys model supports versions management, so the UI.
  • It was hard to find an adequate library for the flow-chart-like part. JSPlumb proved to be the right answer by providing a graph-like approach with great performance (it's SVG based).
  • I faced some issues due to JsPlumb DOM management and had to carefully connect event listeners with React components lifecycle.
  • Surveys design included a custom query language (based on react-query-builder) to be strong directly over backend's ORM.
  • Implemented a first time walkthrough using react-joyride
  • Hosted on AWS S3
  • Fabric for deployment
  • Yarn for package management
  • React + Webpack + Babel
  • Redux + Redux thunk + Immutable for state management
  • Grommet + SASS
  • JSPlumb
  • Other libraries: react-router, eslint, axios, validate.js, lodash, moment, react-query-builder, react-joyride

Photos Report

Frontend tool to generate a report using photographs taken by mobile application users. Backend categorizes photos using elasticsearch so I used the Searchkit project which provides a great number of powerful components to consume elastic APIs.

  • The report was easily created using specified photos. But non-inclusive filters were required, so I had to carefully manage elastic query exposed by Searchkit and pass it to backend with the desired changes.
    • Searchkit boiler plate (similar to create-react-app) which includes React + Webpack + Babel + Searchkit components
    • Redux + Redux thunk for state management
    • Some react-semantic-ui components
    • Styled components
    • Standard + Husky + lint-staged for code linting
    • Other libraries: axios, date-fns, react-loaders, react-responsive-carousel

    Issues Report

    Frontend tool to administrate issues created by platform users (mobile and web). This project is based on react-admin and is meant to be the starter project of kimetrics frontend next version.

    • Although react-admin provides a component for date filtering, a range filter was needed so I created a custom filter component based on react-date-range.
    • Developed my own data provider to allow react-admin to handle Django REST Framework based APIs.
    • UI included a chat-like dialog with a mentions system easily implemented with react-mentions.
    • Project generated using create-react-app
    • Redux + Redux Sagas + Reselect for state management
    • Redux Form
    • Other libraries: react-date-range, axios, date-fns, normalize.css, react-scroll, react-mentions