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.

C++ projects

Sometimes I need a mental break from web developing and keep a focus on something different so I started to learn C++. I believe that the general-purpose programming language like C++ gives me a different perspective on an interpreted programming language like JavaScript.

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 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.

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

#21 URL Shortener Microservice

Release date:

Project Code at Github

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. (This project's task).

application's screen

#20 Request Header Parser Microservice

Release date:

Project Code at Github

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. (This project's task).

application's screen

#19 Timestamp Microservice

Release date:

Project Code at Github

The microservice which parses Unix timestamps to natural language date and vice versa. It returns data in JSON format. (This project's task).

application's screen application's screen

D3.js and Data Visualisation projects

These projects are done to learn how to use the D3.js library and how to show data in a better way.

#18 Map Data Across the Globe

Release date:

Codepen Code at Github

Using a map within D3.js library to show data with geolocation coordinates. (This project's task).

application's screen

#17 National Contiguity with a Force Directed Graph

Release date:

Codepen Code at Github

This project presents data with D3.js and animates the graph. (This project's task).

application's screen

#16 Visualize Data with a Heat Map

Release date:

Codepen Code at Github

This project realizes different method to show data by using D3.js (This project's task).

application's screen

#15 A scatterplot graph

Release date:

Codepen Code at Github

Next small project is written with SVG and the D3.js. It is similar to previous one. (This project's task).

application's screen

#14 Bar Chart Visualisation

Release date:

Codepen Code at Github

First project with using the D3.js library and SVG. A simple bar chart shows data from API. (This project's task).

application's screen

React.js projects

These projects are done to learn how to use React.js

#13 Roguelike Dungeon Crawler Game

Release date:

Codepen Code at Github

The simple RPG game with using React.js. It displays characters as graphic. It consists of four levels, a different monster 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. (This project's task).

application's screen

#12 The Game of Life

Release date:

Codepen Code at Github

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. (This project's task).

application's screen

#11 A Recipe Box

Release date:

Codepen Code at Github

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

application's screen

#10 A Camper Leaderboard

Release date:

Codepen Code at Github

This React.js application shows a list of students at the freeCodeCamp sorted by the most achieved points during last 30 days or list of students which achieved the most points in total. There is a difference between my code at the Github and at the Codepen, because I used npm manager and create-react-app packet to build this application, but later I posted only source code to Codepen with small modifications. (This project's task).

application's screen

#9 Markdown Previewer

Release date:

Codepen Code at Github

In this application, you can type and watch a marked text. I used the React.js and the library Marked. (This project's task).

application's screen

JavaScript projects

These four projects are done to learn basics of JavaScript.

#8 Simon Game

Release date:

Codepen Code at Github

The online version electronic game titled Simon Game with using sounds to training memory. Javascript has used also. (This project's task).

application's screen

#7 Tic Tac Toe Game

Release date:

Codepen Code at Github

Another project with using Javascript. The Tic Tac Toe game against simple AI. The opponent chooses fields randomly. (This project's task).

application's screen