Web Developer

My name is Rafael Rodriguez. I'm a Computer Scientist (B.Sc), passionate about Web Development and Open Source Software. When I'm not mentoring others atFree Code Camp,you'll see me around New York with my son.

Projects

These series of projects are all open sourced and available online for you to clone or view. I normally use either CodePen for exclusively front end projects, Github Pages for frontend projects with multiple pages or Heroku for full stack or API projects.

(Click the project name to show its description.)

Full Stack Projects

MangaDB

web

MangaDB

close

This project is divided in two parts, standalone API which handles the data, security, user management and more; and the client which displays the data in a user friendly way.

The Client is based on the Material design and is fully responsive. The user can create or delete an account, and create as many new series as wanted, there is quick access to increase the last read chapter by 1 or update multiple information at once.

The user can also edit his information and is able to preview the thumbnails before saving it and much more.

Tools used:

  • Node.js (API & Client)
  • Express (API & Client)
  • Pug (Client)
  • MongoDB (API)
  • JavaScript (API & Client)
  • Sass (Client)
  • Gulp (Client)
  • Travis-CI (API)
  • Jason Web Tokens (API & Client)

React Projects

Recipe Box

web

React Recipe Box

close

This is a simple React based recipe web app that saves your recipes to local storage in your browser. It supports markdown so you can be as creative as you want with your recipes. You also have the ability to delete any and all recipes besides adding new ones.

Tools used:

  • Reactjs
  • Babel
  • Materializecss
  • Browser Local Storage)
  • JavaScript
  • Sass
  • Markdown

Markdown Previewer

web

React: Markdown Previewer

close

This is a simple React based markdown parser that allows users to quickly preview markdown. Simple and useful for those who are new to markdown syntax and need a visual feedback.

Tools used:

  • Reactjs
  • Babel
  • JavaScript
  • Sass
  • Markdown

FCC Leaderboard

web

React: Free Code Camp Leader board

close

A react based leader board that receives the data via JSON API and lets the user organize by the total points in a month or all-time. Clicking the username will take you to the user's profile.

Tools used:

  • React
  • SASS
  • JavaScript
  • jQuery
  • Babel

Data Visualization Projects

D3: Bar Chart

web

D3: Bar Chart

close

Responsive bar chart made using d3.js. It has a simple interface and tooltips to show the graph details. D3 is used for data visualization.

Tools used:

  • D3.js
  • CSS
  • JavaScript
  • SVG
  • Ajax

Back End Projects

Timestamp Micro-service API

web

Timestamp Micro-service API

close

This is a micro-service that will allow get calls to convert Unix time-stamps or natural dates to one or the other. It checks the date given for validity and output either null or a predefined date format.

Tools used:

  • JavaScript
  • Nodejs
  • Expressjs
  • JSON
  • Momentjs
  • Pug

Header Parser Micro-service API

web

Header Parser Micro-service API

close

It is an API that works similar to "whoami" as it displays the real ip address, language and software version from the client side.

Tools used:

  • JavaScript
  • Nodejs
  • Expressjs
  • JSON
  • HTML5

Front End Projects

Simon Says Game

web

Simon Says Game

close

An implementation of the popular Simon Says game where the user can play in two modes, strict mode which does not allow for reties, and normal mode which allows for unlimited retries.

There is a power button that must be used, just as if it was a physical game, and there is sound feedback besides the coloring. The speed increases after the 5th,9th and 13th round. The player wins after the 20th round.

Tools used:

  • HTML5
  • SASS
  • JavaScript
  • Pug
  • Boostrap3
  • jQuery2

Wikipedia Searcher

web
Wikipedia Searcher
close

Simple interface to the Wikipedia API that allows to search articles and display 10 possible article snippets for the user to select one. The snippets have an extract of the article, a title and when clicked, it will take you to the article.

The app also has a random button for opening a random Wikipedia article. The app can easily be adjusted to any MediaWiki installation.

Tools used:

  • HTML5
  • CSS3
  • Wikipedia API
  • JavaScript
  • Boostrap3
  • jQuery2

Twitchtv JSON API

web

Twitchtv JSON API

close

This app is for consuming two of the Twitch API for users and streaming. The client was built with React 15.2.x and MaterializeCSS.

You are able to add and remove streamers where the app is smart enough to tell you when a streamer is online, offline, the account has been closed or the username does not exist. You will get basic information such as bio, logo, current viewers, followers and a preview of the stream along with a link to watch it if the user is online.

Tools used:

  • React
  • SASS
  • Twitchtv API
  • JavaScript
  • MaterializeCSS
  • jQuery3
  • Font Awesome, DevIcons, and other Material design icons.

Pomodoro Timer

web

Pomodoro Timer

close

This web app is great for productivity, it can sit in any corner of your screen, and there is not even the need to keep it in view. Once you set the amount of time you want to work and how long you want to rest for, then just let it run and it will keep looking until you stop it. You are also able to pause it in case you have to step aside from your work for a brief moment.

It has a nice progression animation to let you know how much time you have left and the break and work progress animation have different color to help you figure out in which one you should be if needed.

Tools used:

  • HTML5
  • CSS3
  • Canvas
  • Javascript
  • Boostrap3
  • jQuery2
  • Font Awesome
  • jquery's WaterBubble.js

Local Weather

web

Local Weather

close

The site will request location information, then use that information to get the current weather and other basic information using the OpenWeatherMap API.

The user has the option to display the weather and wind speed using the Metric or Imperial system. It also changes background image depending on the current temperature.

Note that the API does not support https on a free account which this uses.

Tools used:

  • HTML5
  • CSS3
  • JavaScript
  • Boostrap3
  • jQuery2
  • Font Awesome
  • OpenWeatherMap API

Random Quote Generator

web

Random Quote Generator

close

This site will display random quotes using the Forismatic API. You will then have the option to tweet it and share with others.

Tools used:

  • HTML5
  • CSS3
  • JavaScript
  • Boostrap3
  • jQuery2
  • Font Awesome
  • Forismatic API

Tools of the Trade

I use a wide range of tools for front and back-end development. I like to focus on open source tools but I'm also very versatile with non-open source software. Below is a glimpse of the tools I use daily.

Front End Tools

Back End Tools

Contact Me

I'm currently open for new opportunities, if you would like a consult, or have a position for which you would like to consider me then feel free to send me an email.

account_circle
mail
mode_edit