Web App Projects
by Alex Kozlov
About
My name is Alex Kozlov and this webpage contains my web development projects, completed as a part of freeCodeCamp web development certifications.
Frontend apps are implemented with HTML, CSS/SASS, JavaScript, React, Redux, D3, and are built with Parcel. Fullstack apps are implemented with Node, Express, Mongoose/MongoDB and contain React components at the frontend.
To view app demos and source, please see the sections below. In addition, frontend source for all projects can be viewed in browser developer tools ("Ctrl + Shift + I", then select the "Source/Debugger" tab).
Fullstack Node Apps
Apps implemented with Node and Express; the first two also use Mongoose / MongoDB. At the frontend these apps contain React or React / Redux components for posting and getting data from the backend.
Please note that these apps hibernate while inactive; they may take a few seconds to start up when first opened.
Exercise Tracker
- Description: creates and retrieves users and exercise logs from a database. A user has an exercise log, which is an array of exercise records. Each record consists of a description, duration and a date. Exercise logs can also be filtered on retrieval.
- Technologies used: Node, Express, Mongoose / MongoDB, React / Redux web forms to create and get users and exercises.
- Source: Exercise Tracker source on Github.
URL Shortener
- Description: stores a URL in a database, returning a short URL ID. This ID can then be used to visit the stored URL.
- Technologies used: Node, Express, Mongoose / MongoDB, React / Redux web forms to create and visit short URLs.
- Source: URL Shortener source on Github.
File Analyser
- Description: uploads a file to the server for analysis. Returns file metadata information: name, type and size.
- Technologies used: Node, Express, React web form to upload a file for analysis.
- Source: File Analyser source on Github.
Timestamp App
- Description: accepts a date string and returns UTC and Unix Epoch timestamps.
- Technologies used: Node, Express, React component for fetching and displaying the timestamp.
- Source: Timestamp App source on Github.
Header Parser
- Description: returns the IP address, preferred languages and system information for the client device.
- Technologies used: Node, Express, React component for fetching and displaying the request header info.
- Source: Header Parser source on Github.
React Apps
Interactive web apps implemented with React or React/Redux. You can optionally use the React Developer Tools browser extension to view the runtime component hierarchy and state (after installing the extension, "Ctrl + Shift + I", then select the "Components" tab).
Markdown Previewer
- Description: previews markdown text as it is typed into the editor. The editor and the preview panels can be individually maximised.
- Technologies used: React, implemented as a single stateful component and a couple of stateless functional child components.
- Source: Markdown Previewer source on Github.
Drum Machine
- Description: plays audio drum samples when keys are pressed or the buttons are clicked.
- Technologies used: React in combination with Redux for state management.
- Source: Drum Machine source on Github.
Calculator
- Description: a calculator which performs basic integer and floating point arithmetic.
- Technologies used: React in combination with Redux for state management.
- Source: Calculator source on Github.
Clock
- Description: a countdown timer that alternates between session and break periods. Rings a chime when each period completes. Can be paused and resumed, and the session and break durations can be changed.
- Technologies used: React in combination with Redux for state management.
- Source: Clock source on Github.
Quote Generator
- Description: displays a random quote from the provided array of quotes. The array of available quotes is passed in as a property.
- Technologies used: implemented in React as a single stateful component.
- Source: Quote Generator source on Github.
D3 Plots
Interactive data plots implemented with the D3 data visualisation library. The data for plotting is fetched in JSON format using the Fetch API or XMLHttpRequest.
Treemap
- Description: a treemap chart subdivides the plot area into rectangular cells, where the size of each cell is proportional to an associated value. This treemap plots the top most sold video game titles by platform. The area of each cell indicates the relative volume of sales of the video game title. The color of each cell indicates the gaming platform.
- Technologies used: D3, Fetch API.
- Source: Treemap source on Github.
Choropleth
- Description: a choropleth is a geographic map which uses color to encode additional information. This choropleth plots a map of the U.S. by state and county. Each county is color coded to show the education level of its residents. On hover a tooltip shows the county name and the exact percentage education level.
- Technologies used: D3, Fetch API.
- Source: Choropleth source on Github.
Heatmap
- Description: plots a heat map visualising global land surface temperature over months and years. Each cell shows the temperature for a given month of a given year. The temperature value is color coded using the color scale shown in the legend. Each cell also displays a tooltip showing the exact temperature value.
- Technologies used: D3, Fetch API.
- Source: Heatmap source on Github.
Scatterplot
- Description: plots a scatterplot which presents doping allegations data in professional cycling. The data points are color-coded to differentiate between cyclists with and without doping allegations. A tooltip presents additional information about each data point.
- Technologies used: D3, XMLHttpRequest.
- Source: Scatterplot source on Github.
Barchart
- Description: plots a bar chart of US GDP data over time. On mouse-over the given bar is highlighted and a tooltip is displayed.
- Technologies used: D3, Fetch API.
- Source: Barchart source on Github.
JavaScript Algorithms
Pure JavaScript/ES6 algorithms that can be interacted with through the browser console ("Ctrl + Shift + I", then select the "Console" tab).
Cash Register
- Description: a cash register drawer function that accepts a purchase price, cash payment amount, and a "cash-in-drawer" array of available currencies. Calculates the required change for the purchase, in the currencies available in the "cash-in-drawer" array.
- Technologies used: JavaScript, ES6.
- Source: Cash Register source on Github.
Roman Converter
- Description: converts a whole decimal number into a Roman Numeral. The accepted range is 1 - 3999 ("I" - "MMMCMXCIX").
- Technologies used: JavaScript, ES6.
- Source: Roman Converter source on Github.
Phone Validator
- Description: checks whether the given string has the format of a valid US phone number. Involves removing invalid characters, accounting for separators, and checking for valid formats.
- Technologies used: JavaScript, ES6.
- Source: Phone Validator source on Github.
Caesars Cipher
- Description: in Caesars Cipher, also known as Shift Cipher, the meanings of the letters are shifted by a set amount. This program implements the ROT13 cipher where the letters are shifted by 13 places. E.g. 'A' becomes 'N', 'B' becomes 'O', etc. It takes a ROT13 encoded string and returns a decoded string.
- Technologies used: JavaScript, ES6.
- Source: Caesars Cipher source on Github.
Palindrome Checker
- Description: a palindrome is a word or sentence that is spelled the same way both forward and backward, ignoring punctuation, case and spacing. This program filters the input string to remove all non-alphanumeric characters and then checks whether the string is a palindrome.
- Technologies used: JavaScript, ES6.
- Source: Palindrome Checker source on Github.
Orbital Period
- Description: orbital period is the time a given astronomical object takes to complete one orbit around another object. This program computes the orbital period of objects around the Earth, given their average altitude.
- Technologies used: JavaScript, ES6.
- Source: Orbital Period source on Github.
HTML Web Pages
Web pages implemented purely with HTML/CSS. You can also view the portfolio page source on Github.
Doc Page
- Description: an introductory JavaScript documentation page with a side nav bar.
- Technologies used: HTML, CSS.
- Source: Doc Page source on Github.
Shop Page
- Description: a parody shop information page with a top nav bar and an embedded video.
- Technologies used: HTML, CSS.
- Source: Shop Page source on Github.
Tribute Page
- Description: a tribute page to a heavy metal musician.
- Technologies used: HTML, CSS.
- Source: Tribute Page source on Github.
Web Form
- Description: an example web form with different kinds of inputs.
- Technologies used: HTML, CSS.
- Source: Web Form source on Github.
Contact
Email: akoz002@aucklanduni.ac.nz