Programming

I became interested in programming in high school, where I had experience with C++ and HTML because my class had an extended math and computer science program. I returned to this interest during my PhD studies. I started learning Python, then moved on to other technologies.

I focus on frontend development (HTML/CSS, JavaScript, TypeScript, React, Next.js). I also have experience in backend (Prisma ORM, building API in Next.js), SQL and graphic design (Figma).

Below you can see details about some of my projects:

Screenshot of the This Website project.

This Website

My portfolio full-stack website with blog and admin panel/CMS. Designed from scratch in Figma and developed in Next.js 14 + TypeScript using the latest tech stack.

  • Building a RESTful API in Next.js
  • Integration with a database (Supabase - PostgreSQL) using ORM (Prisma)
  • Authentication access to admin panel (and some API routes) using NextAuth.js
  • Sending emails with Nodemailer
  • React Hook Form + Zod
  • Toast notifications (React Hot Toast)
  • Markdown editor (SimpleMDE)
  • Styling: CSS modules
Screenshot of the E-commerce Project (1/2) project.

E-commerce Project (1/2)

Dashboard and backend made from scratch that allow you to manage multiple online shops. You can add products and their properties as well as payments statuses and statistics.

  • Full stack application built in Next.js and TypeScript
  • Authentication using Clerc
  • Client-side state management (modals) using Zustand
  • Database connection using Prisma ORM (db: MySql, hosted on Aiven)
  • Forms using React Hook Form and Zod
  • Uploading and hosting images with Cloudinary
  • Charts with Recharts
  • Styling: Shadcn/ui
Screenshot of the E-commerce Project (2/2) project.

E-commerce Project (2/2)

Online store connected to dashboard and backend built from scratch. Contains featured products section displayed on the landing page and related products displayed on the card of a specific product. You can filter and preview (modals) products.

  • Build with Next.js and TypeScript
  • Client-side state management (shopping cart, product preview modals) using Zustand
  • Toast notifications with React Hot Toast
  • Payments with Stripe (test-mode)
  • Styling: Headless UI
Screenshot of the Issue Tracking App project.

Issue Tracking App

A full-stack application for tracking bugs and assigning them to team members. The landing page includes a dashboard that displays recent bugs and statistics. Adding, Editing and deleting issues only available after login

  • Full-stack app built in React (Next.js 14) + TypeScript
  • Building RESTful API in Next.js for add, edit & delete issues
  • Integrating with database using Prisma (Database: Supabase – PostgreSQL)
  • User authentication with NextAuth.js (Credentials)
  • Getting users (with caching) with React Query & Axios
  • Forms with React Hook Form + Zod
  • Pagination, filtering and sorting issues
  • Dashboard with Recharts
  • Adding content in a markdown editor (EasyMDE)
  • Styling: Tailwind CSS & Radix UI
Screenshot of the Film App project.

Film App

The app allows you to search the API with movies (OMDb API). In addition, you can view movie details and rate individual movies when you click on a movie. Rated movies are available under "My Movies" and stored in local browser storage.

  • Built with React + TypeScript
  • Routing with createBrowserRouter()
  • Fetching data using fetch()
  • Implementing star rating component and dark-light mode switch
  • Adding and removing movies from watched list
  • Storing rated movies in Local Storage. Editing rating.
  • Styling: daisyUI & TailwindCSS
Screenshot of the Movies Rental API project.

Movies Rental API

RESTful API using Node and Express.js with movies rental system

  • Db: MongoDB
  • Authorization and Authentication with JWT tokens
  • Logging Errors
  • Data validation with Joi
  • Tests with Jest and Supertest
Screenshot of the Packing List project.

Packing List

The Packing List app lets you add items to the list, check items that are already packed, sort items, and clear the list.

  • Built in React & JavaScript
  • Form submission handling with useState hook
  • Implemented sorting
  • Practicing passing props
  • Dark/light mode switch
  • styling: Chakra UI
Screenshot of the To-Do List App project.

To-Do List App

To-do app in which I practice Vanilla JavaScript. Allows you to add, check and delete todos stored in the local browser storage. The newest todos appear at the top of the list and are moved to the bottom of the list when checked.

  • Built in Vanilla JavaScript and HTML/CSS
  • Storing todos in the browser local storage
  • Editing, toggle checking and removing todos
  • Icons: Phosphor Icons
Screenshot of the Company Landing Page project.

Company Landing Page

Landing page of an concept company written in HTML/CSS from a ready-made graphic design as part of a tutorial.

  • Built in HTML/CSS
  • Using BEM naming convention
  • Bottom-up approach (components first, then sections)
  • Responsive design
  • Mobile-first approach
  • Animations
  • Image optimalization (WebP image format)
Screenshot of the Website Figma Design project.

Website Figma Design

Designed in Figma, the Collaboration App website design. Includes landing page, blog collection page and single blog post

  • Figma design
  • Graphic design of three subpages: landing, blog collection and blog post page
  • The project also includes wireframes on a separate page in Figma.
Screenshot of the Landing Page Design project.

Landing Page Design

Designed in Figma, the Chat App landing page design.

  • Figma design
  • Graphic design of the landing page