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
MangaDB
closeThis 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
React Recipe Box
closeThis 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
React: Markdown Previewer
closeThis 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
React: Free Code Camp Leader board
closeA 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
D3: Bar Chart
closeResponsive 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
Timestamp Micro-service API
closeThis 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
Header Parser Micro-service API
closeIt 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
Simon Says Game
closeAn 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
Wikipedia Searcher
closeSimple 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
Twitchtv JSON API
closeThis 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
Pomodoro Timer
closeThis 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
Local Weather
closeThe 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
Random Quote Generator
closeThis 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
Click for All Projects
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.