An application which helps a team of developers to track project's tasks.

• Repository
• Deploy

• React
• TypeScript
• React Router
• React Bootstrap, SASS
• React Hook Form
• React Beautiful DnD
• Vite

• boards display in a grid with a board preview
  • accessible confirmation modal window on creation, editing, and deletion of a board, a column, a task
• drag & drop for tasks reordering, moving to other columns, and columns reordering
• user registration, authentication & authorization
• editing & deletion of a user profile
• accessible log-in forms with validation
• routes protection
• redirects to the Main page on log-in, or when a user's token expires, or when a user is logged in and tries to reach the log-in form
• a column with a scrollbar in case of tasks overflow
• a header with a changing set of buttons:
  • "Sign up" & "Sign in" for unregistered users,
  • "Create board", "Edit Profile", "Main page", and "Sign out" for logged-in users
• custom 404 page
• custom scrollbars
• user-friendly toast notifications
• adaptive & responsive layout, burger menu

E-commerce "Lalasia" is a prototype of an online store with the ability to register, chose goods and make orders, which will be listed in a customer profile.

• Repository
• Deploy

• React
• TypeScript
• MobX
• React Router
• SASS
• React Hook Form
• Webpack

• products search with title & filter by category
• infinite scroll
• user registration, authentication & authorization, logout
• the flow of making an order (add to cart -> modify the number of products -> checkout -> pay -> see the order in profile)
• accessible sign up, sign in and payment forms with validation
• routes protection & redirect to "Sign in" page
• custom 404 page
• cart items and user orders beeing saved and restored from localStorage
• accessible filter dropdown on "Products" page, accessible modal window on "Cart" page while deleting a product
• "About us" with random facts generator about me
• user-friendly annotations on empty, private or non-existing pages; transitions & hover effects
• adaptive & responsive layout for all pages, burger menu

A recipe portal, a clone of allrecipes.com.

• Repository
• Deploy

• TypeScript
• noUiSlider, SwiperJS
• SASS
• Webpack

• NodeJS (Express JS) + MongoDB (mongoose)
• open API + Recipes API is used as a data source

• user registration, authentication & authorization, a user session is saved; forms with validation
• the main page contains quick access blocks to recipes categories
• the recipes page has dozens of filters, several sorting options, and a search bar to find suitable recipes
• recipes constructor shows relevant recipes, which can be cooked with the ingredients you have
• article page has relevant recipes at the end of the page
• add recipe and article to favorite or save for later by clicking on a bookmark or a heart icon - for registered users
• watch (and modify) saved and favorite articles and recipes, as well as products and a shopping list on the user profile page
• adaptive & responsive layout, burger menu

• implemented REST API with GET/POST requests handling
• API documentation is implemented (using openAPI 3.0)
• implemented MVC pattern (DB entities are divided to model, router, service)
• user registration, authentication & authorization with JWT tokens + cookies
• configured CORS settings and correct error handling, implemented custom error object and custom error messages, grouped in configs

A virtual keyboard, which represents physical keys pressing and can be used to type via the UI.

• Repository
• Deploy

• vanilla JavaScript bundled with Webpack

• keys highlighting while pressing physical buttons
• text navigation using arrow keys
• clearing the text field on pressing a cross icon
• expanding text field within certain limits
• layout changes on language change and on special keys press (CapsLock, Shift...)
• responsive design
• an easter egg on pressing Win key

A two-page site of pets' shelter.

• Repository
• Deploy

• JavaScript
• SASS

• a burger menu
• a custom slider
• a custom pagination
• an adaptive design
• interactive elements with hover effects
• a smooth scroll

A task to practice asynchronous requests for cars' race and detecting winners.

• Repository
• Deploy (Note: to be able to watch working version ones need to start up a local server with cars data. The code and instructions can be found here.)

• TypeScript, bundled with Webpack
• SASS

• cars generation & updating with a name and a color, also a random generation of 100 cars to start the app quickly from scratch
• starting/stopping & position reset for all the cars on the current page (implemented via fetch requests)
• starting/stopping a particular car
• a car stops if an HTTP 500 status code is returned
• a winner detection
• a pagination
• the winners page gets updated via an HTTP query

An online store with filtering, sorting, and searching for keyboards.

• Repository
• Deploy

• TypeScript bundled with Webpack
• SASS
• Jest

• goods filtering by multiple criteria
• goods sorting and search
• dynamic cards generation
• adding of goods to the cart
• adaptive design

• Repository

4 mini-projects in JavaScript:

1. A photographer's landing page
2. An audio player (media usage in a browser)
3. Images gallery (a work with an API)
4. A browser game (a runner game with JavaScript)\