Portfolio

Front End Developer

My projects

The Voting App logo

The Voting App is my biggest project which I made. This is a simple app where users can register and login. After that, they can create, modify and delete their own polls. Other users (unregistered also) can vote them by clicking the answers. They can see the results and a simple bar chart. Used technology stack: MongoDB, Express.js, React, Node.js.

The projects
from the course

I'm learning web developing at the path of the freeCodeCamp course. I am going to achieve skills in Front End and Back End Developing. Recently the learning path was changed and improved. I'm completing missing tasks and projects now.

Side projects

On 25th July 2018, I started a new side project called "Simple Task Planner" for more practice and try new tools like the create-react-app package. I'm going to build a "to-do" app which helps me organize my personal tasks.

Legacy projects
from the course

This section contains the legacy projects, which was required to build in the old version of the freeCodeCamp course. I made them in the past.

The Voting App

Release date:

application's screen

This app is a full stack JavaScript app. It means that I created both Front End and Back End code myself. I used HTML, CSS, JavaScript, React and D3.js by the client side and Node.js, Express.js and MongoDB at the server side. The app and the database are working on my own hosting account. I used Forever as the process manager to keep the app working nonstop.

The projects from the freeCodeCamp course

These five projects were made to achieve Responsive Web Design Certificate. It is the first certificate in the freeCodeCamp course. The main technologies used by me were HTML and CSS. Of course, these projects are very simple. The aims were to learn the basics of visual design, accessibility, media queries, responsive images, and building layouts.

Build a Random Quote Machine

Release date: March 20, 2019

This simple app shows a random quote after loading. It has two buttons. The first one is to draw a random quote. The second button pastes a quote to tweeter form. This project was refactored by me to new requirements and to pass the new test from the new version of the freeCodeCamp course. This project is very easy to make in vanilla JavaScript (and I used jQuery before), but the course suggests to use React because this section of the course is about learning frontend frameworks.

Build a Personal Portfolio Webpage

Release date: October 14, 2018

This project was made on January 31, 2017, as a task from the old version of the FreeCodeCamp course. I rebuilt it to pass some new tests which were added in the new version of FCC course. I'm also modifying it to make it more responsive. The content was a bit changed. Of course, it is only a task. My real portfolio is here at the Mybytes.pl.

Build a Product Landing Page

Release date: September 9, 2018

This project is a dummy product landing page with embedded video.

Build a Survey Form

Release date: August 7, 2018

This project is a simple form example without using any back-end service. Some id attributes were added to pass tests.

Build a Tribute Page

Release date:

This project was made on Dec 5, 2016. Two years later on July 25, 2018, I refactored it to pass some new tests which were added in the new version of FCC course. I also modified it to make it more responsive. The content was not changed, but two unnecessary images were deleted. Now the page has only one main image.

Legacy projects

Legacy projects were built as required the old certifications. I used the jQuery, JavaScript, React.js, and D3.js to built them. These projects are in the new section of the freeCodeCamp course now (Coding Interview Prep > Take Home Projects) and may have different requirements than years ago.

URL Shortener Microservice

Release date:

This app can pass a URL as a parameter and you will receive a shortened URL in the JSON response. Then you can visit the shortened URL and it will redirect you to the original page. This app uses MongoDB from Mlab.com in the code at Glitch.com and the code at Github uses localhost database.

Request Header Parser Microservice

Release date:

This app shows some information from your request header (which is sent by your browser to the server). The server responses by sending JSON object. The response contains your IP address, your language setting in your browser and your operating system. The property "about" in the response is added by me.

Timestamp Microservice

Release date:

The microservice which parses Unix timestamps to natural language date and vice versa. It returns data in JSON format.

Map Data Across the Globe

Release date:

Using a map within D3.js library to show data with geolocation coordinates.

Show National Contiguity with a Force Directed Graph

Release date:

This project presents data with D3.js and animates the graph.

Visualize Data with a Heat Map

Release date:

This project realizes different method to show data by using D3.js

Visualize Data with a Scatterplot Graph

Release date:

Next small project is written with SVG and the D3.js. It is similar to the previous one.

Visualize Data with a Bar Chart

Release date:

First project with using the D3.js library and SVG. A simple bar chart shows data from API.

Build a Roguelike Dungeon Crawler Game

Release date:

The simple RPG game using React.js library. It displays characters as graphic. It consists of four levels, different monsters on each level and some weapons to find. The game has a full or limited view. It is an educational project so the game is not good balanced.

Build the Game of Life

Release date:

It is a simulation based on famous Conway's Game of Life. The task was to start simulation automatically after page loading. If the game is stopped you can add or remove cells. The button Clear is to clear all the board only. After that, you can draw your own pattern and start your own simulation. If you want to start randomly a simulation you need to refresh the page. I used React.js to render this game.

Build a Recipe Box

Release date:

The application is similar to a TODO list or CRUD application. It uses React.js and Local Storage in a browser. You can read, add, edit and delete a recipe.

Build a Markdown Previewer

Release date:

In this application, you can type and watch a marked text. I used the React.js and the library Marked.

Build a Tic Tac Toe Game

Release date:

Another project with using Javascript. The Tic Tac Toe game against simple AI. The opponent chooses fields randomly.

Build a Pomodoro Clock

Release date: March 22, 2017

This project was made to fulfill requirements the old version of course task. I will review it in the future. The clock written in JavaScript is used to work with Pomodoro technique. You can also change work time, break time and numbers of repeats. My first project when I was using GitHub.

Build a JavaScript Calculator

Release date: March 15, 2017

This project was made to fulfill requirements the old version of course task. I will review it in the future. This simple calculator was written in JavaScript.

Build a Wikipedia Viewer

Release date: February 16, 2017

This project was made to fulfill requirements the old version of course task. I will review it in the future. The search engine shows links to search results in Wikipedia with a short description. There is also a random search button. This application uses the Wikipedia API and jQuery.

Show the Local Weather

Release date:

This project uses jQuery and browser navigator to get geolocation coordinates and then gets data from external API and presents them. This task has a new version now, but this project fulfills old requirements.

Build a Random Quote Machine

Release date: February 5, 2017

This project was made to fulfill requirements the old version of course task. I will review it in the future. This was my first project jQuery and Javascript. The app has one button to press and then it draws a random quote after that.

Back End API Projects

These projects was made to learn Node.js, Express.js and Mongo database.

#23 File Metadata Microservice

Release date:

Project Code at Github

This simple app uses multer package to read file size sent by the form and return JSON object which contains this parameter. (This project's task).

application's screen

#22 Image Search Abstraction Layer

Release date:

Project Code at Github

This simple app inserts query with a date to the database and takes these queries back to show it. The code at Github uses localhost database, but the code at Glitch.com was modified and it uses mLab database. (This project's task).

application's screen