Portfolio

Front End Developer

My projects

My own projects

These projects were built by me and there are not connected with my learning at the freeCodeCamp course except one project.

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.

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.

My own projects

The most recent project which I'm building now is a simple RPG game. I started to build it in March 2019. I also built a simple task manager before. I worked at it from August 2018 to March 2019. I'm going to upgrade it in the future. The third project which I built earlier was a polling app. It was built as a task from the old version of the freeCodeCamp course. I added it to this section because it's my first app with backend stuff.

The Adventure game

Development time: from March 2019 to now

application's screen

This app will be a simple RPG online board game for one player. It is not working yet. When I finish Alpha 1 version a player will be able to move on the map and hunt. The game content will be in polish language.

The task planner

Development time: from August 2018 to March 2019

application's screen

The Task Planner is a simple 'to-do list' app to store and manage a tasks list. The main goal is to create an app which will be well suited to organize my time. I also want to practice coding. Key features are: to-do-list app and holding data in the local storage in the browser. The main idea is to use it in one place only (ex. at home every morning and every evening).

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

This project was to achieve Data Visualization Certificate. The main technology used by me in this section of the freeCodeCamp course is D3.js library, which is helpful to draw charts.

Visualize Data with a Bar Chart

Release date: August 23, 2019

A simple bar chart takes data from API and by using D3 library shows it. This project was made on August 14, 2017, and on August 23, 2019, I slightly refactored it to pass the tests in the new version of the course.

These projects were made to achieve Front End Libraries Certificate. It is the third certificate in the freeCodeCamp course. The second one names JavaScript Algorithms and Data Structures and it finishes by five small algorithmic tasks. The main technology used by me there was React. Of course, these projects are very simple too.

Build a Pomodoro Clock

Release date: July 12, 2019

Pomodoro clock is helpful in the Pomodoro Technique. This project was refactored to achieve new requirements and refactored from vanilla JS to React.

Build a JavaScript Calculator

Release date: June 9, 2019

I think this is a classic app to build for everyone learns JavaScript. It uses formula logic to count expressions.

Build a Markdown Previewer

Release date: April 20, 2019

This app has two text fields. In the left one, you can type some text and inside the right text field, you will see text changed by using the marked.js library.

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.

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.

File Metadata Microservice

Release date:

This simple app uses multer package to read file size sent by the form and return JSON object which contains this parameter.

Build an Image Search Abstraction Layer

Release date:

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 the mLab database.

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.

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.