Pet projects

It is hard to carve out time for coding apart from your regular job. But that is how you grow as a developer - working on your pet projects.

Most projects are tiny and might have incomplete UI, as I focus more on data and logic, especially in my latest projects. All these pet projects serve one purpose: try a particular new tech or approach I could not try on my production projects

Here they are: from the latest and more advanced ones to the first, naive projects that marked the beginning of my web dev journey.

Advanced examples

  • Family car booking app (backend)
    Date: June 2022
    Difficulty: advanced
    Tech stack: Typescript, AWS Lambda, DynamoDB, AWS CDK, Serverless Stack, API Gateway, Cucumber, Gherkin, Vitest
    This project is a contrived app to book rides on our beloved shared family car, Honda CRV. The car is used by me, my wife and my father, all at different days and time. This is part of my Mentoring Projects series, where I create simple projects that mentees can do and then compare with my version and discuss.
    Why I created this one
    • In this project I separated business logic from Lambda handlers and the storage layer
    • Each layer, be it frontend or backend, is isolated via mappers and adapters
    • I wanted to try AWS CDK as an infrastructure-as-code solution. Then I learned about Serverless Stack, which simplifies workflow
    • I also wanted to try my hand in integration testing of the entire API, without mocking anything. I picked Cucumber/Gherkin and now I'm considering using BDD on more projects as it is an outstanding way of testing main happy and unhappy paths, all to get peace of mind!
    • Try DynamoDB single-table design. ElectroDB is a wonderful lib that helps achieve exactly this and abstracts away lots of Dynamo complexities
  • Meal Tracker
    Date: April 2022
    Difficulty: medium
    Tech stack: Typescript, React, Jest
    A small app to track your daily meals. This is part of my Mentoring Projects series, where I create simple projects that mentees can do and then compare with my version and discuss.
    Why I created this one
    • In this project I tried to clearly separate business logic from the UI and storage layer
    • Each layer is isolated via mappers and adapters, something that's missing from many projects
    • This separation allowed me to start with the core logic and cover it with tests. Adding UI was a breeze knowing that everything's already working. Nice!
    • To teach my wife Jira task management I set up a Jira project for each app and create stories/tech tasks as if it were a real team
    • I also teach my wife Github and version control best practices
    • This project was a good chance to try full e2e app automation and write Cypress tests. I contributed to my wife's repo with Cypress e2e tests, so we know immediately when her app breaks after adding another feature
  • Full-stack Star Wars API
    Date: October 2021
    Difficulty: advanced
    Tech stack: Typescript, React, Redis, Node.js, Express.js
    A small app listing StarWars people, with sorting by name and age, and caching on the backend. Data aggregation is done by a Node.js worker that stores data in Redis.
    Why I created this one
    • Practice React with Typescript
    • Improve Redis skills
    • Work with React hooks
    • Improve REST API knowledge
  • Job Search Organizer
    Date: May 2021
    Difficulty: advanced
    Tech stack: Typescript, React, Redux, Nest.js, Postgres, Sequelize
    I got an idea to create a small organizer for myself, which would pick the best job for me based on project descriptions. It is mostly to practice React independently
    Why I created this one
    • Practice React with Typescript
    • Improve Sequelize skills
    • Work with Nest.js
    • Use Create-React-App to the fullest
    • Practice quick deployment
  • Node.js/AWS shop backend
    Date: April 2021
    Difficulty: advanced
    Tech stack: Javascript, AWS, Serverless Framework, Postgres, Webpack, Jest
    Microservice-based shop API using AWS infrastructure and Serverless framework
    Why I created this one
    • Practice Serverless Framework
    • Hone Lambda skills
    • Embrace microservice approach based on AWS services
    • Separate infrastructure code from business logic, including when testing
  • ilya.online (React-based)
    Date: March 2020
    Difficulty: advanced
    Tech stack: Javascript, React, Next.js, CSS (Grid), Sass; Nest.js, Mongoose, Jest, Docker, AWS
    A re-write of my personal website on Next.js and React
    Why I created this one
    • Practice React
    • Improve Grid knowledge
    • Get familiar with Next.js and its SSR features
    • Try Nest.js just a bit: I will continue working with it in later projects
    • Write some unit tests
    • Write a build script that automates deployment to S3 and invalidates CloudFront cache
    What could be improved
    • add i18n
    • add light theme
    • add some admin dashboard to manage backend stuff instead of using mongodb cloud UI

Small/beginner examples

  • Education API
    Date: May 2020
    Difficulty: beginner
    Tech stack: Javascript, Express, Mongoose
    A tiny API where I learn Mongoose ORM
    Why I created this one
    • Practice Mongoose relations
    • Improve knowledge on Mongoose hooks
    • Train Express routing
    What could be improved
    • add unit tests
  • File lister
    Date: March 2018
    Difficulty: beginner
    Tech stack: Javascript, PHP, CSS (Flexbox), jQuery, MySQL
    A project allowing you to store and manage files of particular format in your account
    Why I created this one
    • get familiar with PHP/MySQL
    • practice authentication with custom backend
    • try Materialize.css
  • News website theme
    Date: December 2017
    Difficulty: beginner
    Tech stack: Javascript, CSS (Flexbox), HTML, jQuery, gulp
    I was asked to do a theme for the English version of a news website I worked for. It was based on Drupal so I had to tweak some PHP too
    Why I created this one
    • learn Javascript bundling with gulp
    • learn Drupal
    • become confident with jQuery
    • solve styling problems on a real case
  • Image optimizing script
    Date: December 2017
    Difficulty: beginner
    Tech stack: Javascript, Node.js
    There was a need to optimize image sizes for a news website. I decided to help and wrote a script optimizing the flow. Editors just added every image to a specific folder and the script optimizes all images automatically
    Why I created this one
    • learn Node fundamentals
    • provide users of my script with an easy flow (almost like drag'n drop)
  • ilya.online (Wordpress-based)
    Date: October 2017
    Difficulty: beginner
    Tech stack: Javascript, CSS (Flexbox), HTML, jQuery, a bit of PHP
    The first version of my personal portfolio/CV website
    Why I created this one
    • Get comfortable with Flexbox
    • learn how Wordpress works
    • implement a custom design from scratch
    What could be improved
    • make styles reusable and more consistent
    • use Wordpress API instead of a monolithic app
  • Football score simulator 2017
    Date: July 2017
    Difficulty: beginner
    Tech stack: Javascript, Angular 2, CSS (Flexbox), Firebase
    A project simulating the outcome of a football match based on various pre-game factors
    Why I created this one
    • get familiar with Angular and MVC concept
    • practice styling with Flexbox
    • practice JS functions
    What could be improved
    • make the entire app modular and split the code into smaller functions
    • remove usage of jQuery
    • add tests to this app, because there are lots of potential edge cases
  • Playing with Codepen
    Date: July 2017
    Difficulty: beginner
    Tech stack:
    Several sandboxes to play with CSS and jQuery
    Why I created this one
    • I decided to emulate smoke effect (honestly, it loads the gpu a lot:) ) - repo 1
    • a split screen effect - repo 2
    What could be improved
    • I would definitely optimize the smoke effect by using something like throttle
  • Champions League draw
    Date: July 2017
    Difficulty: beginner
    Tech stack: Javascript, jQuery, CSS (Flexbox)
    You are given 4 pots of 8 random teams which you draw into 8 UEFA Champions League groups
    Why I created this one
    • try JS for something more than single functions or statements
    • practice styling with Flexbox
    • handle some elements of real draw logic
    What could be improved
    • at that time I didn't know imports yet, so now I would split code into small pure functions
    • remove usage of jQuery
    • remove the hardcoding of fixture list at the end
  • First tiny works
    Date: May 2017
    Difficulty: beginner
    Tech stack: Javascript, HTML, CSS Flexbox, jQuery
    A couple of micro-projects I wrote to learn JS, CSS, jQuery and MVC
    Why I created this one
    • create slider and animate preloader
    • learn what MVC is
    • practice some CSS tricks
    What could be improved
    • beginner projects are there to remain cute and tiny and bring up good old memories!
© 2017-2024