Nataliia Sokolova

An innovative <web developer/> you are looking for.

About Me

As a passionate web developer, I enjoy pushing boundaries and exploring new frontiers, whether that's in my work or on a hiking trail. Here, you'll find a showcase of my skills and projects that reflect my love for creativity and innovation.
my photo
What is my story?
My journey began with a PhD in Food Science and extensive experience in designing and building factories, as well as developing innovative food products. However, my passion for creative problem-solving and design has led me to explore the exciting world of web and application development. I'm a versatile individual who can adapt to different working styles and collaborate effectively with team members of all levels of experience. I thrive in team environments and value collaboration, taking direction from team leads while also contributing my own ideas and suggestions. With my strong problem-solving skills and attention to detail, I ensure that every project I work on is a success.

Welcome to my projects section!

Here, you can explore some of my latest web development projects that showcase my skills and passion for creating engaging and user-friendly websites. So, take a look around and get inspired by the possibilities of what we can create together.

The Gym

Tech Stack: HTML, Sass, JavaScript, Public API

Rentsy

Tech Stack: React, JavaScript, Sass, Node.js, Express.js, Knex.js, MySQL, MUI, Bootstrap, Google Map API

rhi.zone

Tech Stack: React, TypeScript, MUI, Node, Jest, Docker, MySQL, Express

EA SharePlay

Tech Stack: HTML, Sass, React, JavaScript

Vancity for U

Tech Stack: HTML, CSS, Bootstrap

InStock

Tech Stack: React, Sass, JavaScript, Node.js, Express.js, Knex.js, API

Portfolio

Tech Stack: React, Sass, TypeScript, MUI, Framer Motion

Mini-projects

Chrome extention Snap Leads 2.0

HTML, CSS, JavaScript

It offers a sleek user interface with a modern and intuitive design, improving the overall user experience. One of the key features of the extension is the ability to save leads. Users can manually enter leads or save the URL of the active tab with just a click. These leads are then stored in the extension's local storage, ensuring they are accessible even after closing the browser. User can export leads in two different formats: text and HTML. The text format provides a simple list of leads, while the HTML format offers a visually appealing table view with clickable links for easy navigation.

Candy Tracker

HTML, CSS, JavaScript

Candy Tracker - an app that combines my passion for web development with my love for my daughter. Created as a fun and interactive tool, Candy Tracker allows parents to monitor their child's candy consumption. To add a touch of whimsy, Candy Tracker features a charming candy-themed background image, creating a delightful experience.

BlackJack

BlackJack

HTML, CSS, JavaScript

Blackjack Game - a thrilling project that brings the excitement of the popular card game right to your screen. Step into the shoes of the player and test your luck. The game begins with two random cards dealt from the deck, and the sum of these cards is calculated. To keep things fair, the deck is generated using random numbers, ensuring an unpredictable gameplay experience. The game also includes logic to handle special cases, such as when an ace needs to be treated as 1 to avoid exceeding 21.

App

Listify

HTML, CSS, JavaScript, Firebase

Using Firebase, I built a simple shopping list application. Working with Firebase was a breeze, thanks to its comprehensive JavaScript SDK and intuitive documentation.

Landing Page

Airbnb clone landing page

HTML, CSS, React, JavaScript

I recently created an Airbnb experience landing page to practice working with props. The central component, called Card, is designed to be reusable and showcases essential details of each listing, including the cover image, rating, review count, location, title, and price per person. To add some dynamic elements, I implemented a badge feature. When a listing has no available spots, the badge displays SOLD OUT, while for listings with the location set as Online, it shows ONLINE.

Blog

A Practical Guide to Developing an Accessible Toggle Button Component in React on medium.com

React, Redux, TypeScript

Switches are commonly used UI elements for toggling between two states, such as turning a feature on or off. However, it is important to ensure that these elements are accessible to all users, including those with disabilities. The use of TypeScript in the project also helped to enforce type checking and improve the overall robustness of the codebase. This blog post will provide a practical guide to developing an accessible switch component in React with TypeScript.

Skills

Frontend
HTML logo

HTML

Sass logo

Sass

CSS logo

CSS

JavaScript logo

JavaScript

TypeScript logo

TypeScript

React logo

React

Bootstrap logo

Bootstrap

Mui logo

Mui

Redux logo

Redux

Backend
Node logo

Node

MySql logo

MySql

Knex logo

Knex

Express logo

Express

Docker logo

Docker

Tools
Git logo

Git

Jest logo

Jest

Figma logo

Figma

GitLab logo

GitLab

Soft Skills

Product Thinking

Learning on the Fly

Interpersonal Awareness

Following Directions

Driving Alignment

Conveying role value

Customer-oriented

Handling change

Let's Talk!

I am always on the lookout for exciting projects or roles that require my expertise. If you have an idea that you would like to bring to life, let's work together and make it happen!