Full Stack Web Developer

Procodific

Sep 17 - Mar 19

Table of contents

Role

As a remote full time developer I worked along with the dev team for some projects, and on my own for one of them, always under SCRUM framework. Other of my activities included: review pull requests from other developers and giving advice about the technologies I know. We had daily/weekly 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).

Projects

CountN

CountN (not released yet) helps musicians to connect with live venues to schedule and perform gigs.

The main goal was to create a Restful API to be consumed by mobile app.

  • App had Stripe as payment option.
  • App had a escrow system which required payments to be in hold until a gig was performed.
  • App had a chat system linked to events system.
  • API needed custom search and filtering so I developed a mini framework for it. Used Mongo's aggregation framework and created a pagination module.
  • API needed to be fully documented for mobile dev so I used Apidoc to generate inline docs.

Backend

  • Hosted on AWS EC2
  • Nginx for server
  • Let’s Encrypt for HTTPS certificate
  • MongoDB + Mongoose for database.
  • Node + Express for API
  • Apidoc.js for API inline documentation
  • Socket.io for realtime
  • Ansible for provisioning and deployment
  • Passport + JWT for authentication
  • Stripe for payments
  • Mailgun for email delivery
  • Multer for binaries
  • Nunjucks for templates
  • Babel + Gulp for ES6/modules transpiling
  • Eslint + Lint Staged for code linting

Data Markets Inc.

Data Markets Inc. develops an electronic commerce platform for data. It’s a hybrid between eBay and a commodities exchange for data.

I was in charge of the complete redesign of dmi.io site by implementing given UI mockups (from Invision) using a React stack, and upgrading backend's RoR stack.

  • Frontend had to be SEO friendly. Server side rendering was mandatory.
  • Frontend should behave as a SPA. I decided to use React on Rails library which provides SSR and helpers to keep React code separated from backend.
  • New design came along with new features to the platform, so besides backend "upgrade", a few modules where also refactored.
  • A Restful API based on existing code was needed to be consumed by frontend.

Backend

  • Hosted on Heroku
  • Ruby on Rails
  • PostgreSQL for database
  • Webpacker + React on Rails to support SSR with frontend as a SPA
  • Devise + JWT for API authentication

Backend project has a larger list of dependencies. I only mention the relevant ones for the parts of code I worked with.

Frontend

  • Hosted on Heroku
  • Invision mockups
  • React
  • Rails/webpacker to generate react starter project
  • React on Rails to get props + context from backend
  • Custom Bootstrap + SASS
  • Reactstrap instead of boostrap's jQuery parts
  • Other libraries: font awesome icons, date-fns, download.js, validate.js, react-autosuggest, lodash, react-dropzone, react-infinite-scroller, react-number-format, react-slick, rxjs

Tech for reporters

TechForReporters is a place where reporters can ask questions about the latest tech news and where technologists – programmers, engineers, designers, and thinkers – can answer in an anonymous or open forum.

I just developed a few features and perform some changes for this project, however I upgraded frontend to React 16 and started site redesign from material UI to a custom one (which hasn't been released yet).

Backend

  • Hosted on DigitalOcean
  • Node + Express for API
  • MongoDB + Mongoose for database.
  • Apidoc.js for API inline documentation
  • Ansible for provisioning
  • Passport + JWT for authentication
  • Mailgun for email delivery
  • Nunjucks for templates
  • Babel + Gulp for ES6/modules transpiling
  • Eslint + Lint Staged for code linting

Frontend

  • Hosted on DigitalOcean
  • Zeplin mockups
  • React
  • Babel
  • Webpack
  • Redux + Redux-saga + Inmutable + Reselect for state management
  • Enzyme + Jest for testing
  • Material UI (at first stage)
  • Styled components (at second stage to generate custom UI/UX)
  • Storybook
  • React-intl
  • Other libraries: date-fns, react-autosuggest, lodash, fuse.js