ReactJS Project

Kanban Board

GitHub Live Demo
This front-end project is a comprehensive task management system designed to enhance collaboration and streamline workflows. It allows users to create and manage board, columns, and tasks with features like rich text descriptions, task prioritization, and dependency management. Collaboration is effortless with task assignment, visualization of all collaborators, and dynamic features like "Unassign Me" and "Leave Only Me."
Customization and insights take center stage with options for personalized layouts, column styles, and backgrounds, along with dashboards and cards displaying task metrics, activity, and progress. Additional utilities include drag-and-drop functionality, keyboard shortcuts, export/import capabilities, and a history to restore deleted data.

The project is implementing the following features:

  • Auto-generate sample board
  • Create new column with title and optional description
  • Clear board
  • Provide board title
  • Edit column's title and description based on editable text feature
  • Reorder columns
  • Create new task for given column
    • Provide title
    • Provide rich text description i.e. bold, italic, underlined text, numbered/bullet lists, etc
    • Provide priority i.e. low, medium or high
  • Filter tasks by priority
  • Create predefined templates that could be used as descriptions for given tasks
  • Manage dependency tasks
  • Activate/deactivate a given task
  • Group all templates in a dedicated column
  • Visualize number of tasks for a given column
  • Visualize progress (active tasks) for a given column
  • Mark/unmark column as 'done' i.e. all tasks in the column will be visualized as completed
  • Delete column
  • Delete all tasks for a given column
  • Clear all columns without a tasks
  • Provide optional limit of tasks for a given column
  • Delete task
  • Assign users to a given task
  • Auto-assign users to a given task
  • Remove all assigned users to a given task
  • Remove all assigned users to a given task
  • Visualize all assigned tasks to a given user
    • Visualize all collaborators
    • 'Unassign Me' feature
    • 'Leave Only Me' feature
  • Edit task
  • Move tasks between columns with drag & drop
  • Change the position of a task in a given column
  • Toggle fullscreen view
  • Visualize calendar
  • Export/import board as JSON
  • Manage users
  • Manage users
  • Visualize Dashboard with Cards
    • Tasks Per Member Card
    • Tasks Per Column Card
    • Tasks Per Priority Card
    • Tasks Activity Card
  • Visualize history that stores deleted data when performing column/task deletion
    • restore/delete columns and tasks
  • Customize settings
    • Choose background - nature, geometric or no background
    • Choose layout - grid view, single column view or single row view
    • Choose column style - solid or blurred
  • Keyboard Shortcuts
    • Press Ctrl + G to auto-generate board
    • Press Ctrl + I to create new column
    • Press Ctrl + L to clear board

The project is using the following technologies:

  • Initial structure is created with vite
  • Integrated ReactJS
  • Integrated react-bootstrap
  • Integrated bootstrap
  • Integrated bootstrap-icons
  • Integrated react-calendar
  • Integrated react-chartjs-2
  • Integrated react-highlight-words
  • Integrated dnd-kit/core
  • Integrated html-react-parser
  • Integrated react-simple-wysiwyg
  • Integrated hotkeys-js

ReactJS Project

Map UI Visualization

GitHub Live Demo
The Map UI Visualization project is designed to offer an interactive platform for visualizing geographic and specific data. Core features include the ability to render detailed geographical map, display specific locations, map routes, and visualize traffic reports. Users can view routes as animated sequences of locations, enabling an immersive exploration experience. A standout aspect of the project is its focus on London-based data, which includes visualization of boroughs, underground stations, and GeoJSON representations of the London area.

The project is implementing the following features:

  • Visualization of geographical map
  • Visualization of locations on the map
  • Visualization of route on the map
  • Visualization of traffic report
  • Playable animation of route as sequence of locations
  • Visualize London area and its boroughs based on GeoJSON data
  • Visualization of EV Charge History with summary, measures and charging points
  • Visualization of EV Stations Near You
  • Visualization of favorite places with provided summary details
  • Visualization of 140+ locations of London underground stations
  • Visualization of all London boroughs as list
    • View given borough on the map
    • Save or remove given borough as favorite (persistent data)
    • Select view of all/favorites boroughs
    • Sort boroughs by id, name or area
    • Search borough by name
  • Visualization of StreetView (Mapillary)

The project is using the following technologies:

  • Initial structure is created with vite
  • Integrated ReactJS
  • Integrated react-bootstrap
  • Integrated react-leaflet
  • Integrated react-leaflet-markercluster
  • Integrated bootstrap
  • Integrated bootstrap-icons
  • Integrated leaflet
  • Integrated leaflet.motion
  • Integrated mapillary-js
  • Integrated scss

ReactJS Project

Inventory Management System

GitHub Live Demo
The Inventory Management System is designed to simplify the organization and tracking of inventory, product categories, products, and sales. Key features include a dynamic dashboard for quick insights such as total inventory value, sales metrics, and top-performing products. Users can manage product categories with ease, including options to add, edit, or delete categories. The system combines efficient tools and visualizations to support inventory operations and informed decision-making.

The project is implementing the following features:

  • Visualization of Dashboard
    • Total Inventory Value Widget
    • Total Categories Widget
    • Total Unique Products Widget
    • Total Sales Widget
    • Top 5 Products by Sales Visualization
    • Latest Sales Visualization
  • Product Categories Management
    • Add new category
    • Edit category
    • Delete category
  • Products Management
    • Add new product (name, category, quantity, buying price and selling price)
    • Manage products for given category
    • Color coded visualization for products based on quantity level
    • Delete Product
    • Low Stock Products Visualization
  • Sales Management
    • Add new sale for a given product (name, selling price, quantity and date)
    • Visualization of all sales
    • Undo sale
    • Download sales report as a PDF file

The project is using the following technologies:

  • Initial structure is created with vite
  • Integrated ReactJS
  • Integrated tailwind css
  • Integrated flowbite-react
  • Integrated react-to-pdf

ReactJS Project

Framer Motion Movie Catalog

GitHub Live Demo
The Framer Motion Movie Catalog is a dynamic application that showcases hands-on experience with the Framer Motion library. This app presents the movie catalog in a more dynamic way with animated visualizations. Users can explore a list of movies, bookmark favorites, and view information about each movie.
The Experiences section offers a curated selection of best-selling combo products, such as foods and drinks. Users can seamlessly add these items to their cart, manage quantities, and remove items as needed — offering a smooth and interactive shopping experience.
Additionally, the app features a Showtimes section, allowing users to browse available cinemas and preview movies scheduled to start at specific times. With its animations and user-friendly design, this app is a practical demonstration of Framer Motion's versatility, providing an enjoyable experience.

The project is implementing the following features:

  • Visualization of animated movie catalog
  • Bookmark favorite movies
  • View information about each movie
  • Add combo products to shopping cart, manage quantities and remove items
  • Browse available cinemas and preview movies scheduled to start at specific times

The project is using the following technologies:

  • Initial structure is created with vite
  • Integrated ReactJS
  • Integrated tailwind css
  • Integrated framer-motion
  • Integrated fast-average-color
  • Integrated react-responsive-carousel

NodeJS/ReactJS Project

JWT Authentication and Authorization App

GitHub
This project is a full-stack implementation of a secure system for both authentication and authorization using JSON Web Token (JWT).
The application is divided into two parts:
Backend: Built with Node.js, Express, and JWT for handling authentication and securing APIs.
Frontend: Developed with ReactJS to provide a interface for login and secure access to protected routes.

The project is implementing the following features:

  • Backend
    • Validate user credentials on Login
    • Create new JWT on successful user credentials validation
    • Defined JWT-protected endpoint
  • Frontend
    • Publicly accessible login page
    • JWT-protected client-side routes
    • Perform user logout
    • Fetch data from the JWT-protected endpoint

The project is using the following technologies:

  • Backend
  • The server is based on NodeJS
  • Integrated body-parser
  • Integrated cors
  • Integrated express
  • Integrated jsonwebtoken
  • Frontend
  • Initial structure is created with vite
  • Integrated ReactJS
  • Integrated react-router-dom
  • Integrated jwt-decode

HTML/CSS/JavaScript Project

Motion Design for the Web Course

GitHub
This motion design course offers developers a comprehensive guide to integrating motion seamlessly into web design projects. Covering a wide range of tools such as CSS, JavaScript, GSAP, SVG, Lottie, and video, it equips participants with the knowledge and skills to create dynamic and engaging web experiences. The course blends theory with hands-on practice, taking learners through exercises like building video-based hero sections, dropdown menus, image galleries, and advanced animations such as typewriter effects and scroll-triggered motions. It emphasizes performance optimization, the principles of motion design, and the practical application of these techniques in real-world scenarios.
The course is provided by Adi Purdila @ EnvatoTuts

The project is implementing the following features:

  • Product feature with video
  • Hero section with video background
  • Website header with transition
  • Dropdown menu with transitions
  • Image gallery with transitions
  • Image accordion with transitions
  • Loading screen with animation
  • Site preloader with animation
  • SVG text loader with animation
  • Button with animated loading dots
  • Animated Lottie icon
  • Animated menu icon
  • Animated illustration
  • Animated avatars
  • Animated logo
  • Typewriter effect
  • Mouse follow effect
  • Scroll-triggered animation
  • Parallax animation

The project is using the following technologies:

  • Used HTML
  • Used CSS
  • Used JavaScript
  • Used Lottie
  • Used GSAP

JavaScript Project

Machine Learning Exploration

GitHub
This project is an exploration of fundamental machine learning algorithms, aimed at delving into their concepts and underlying principles. It features notes that are trying to explain the algorithms in a simple way, complemented by practical examples to demonstrate their real-world application.

The project is implementing the following features:

  • Implemented Linear Regression
  • Implemented Logistic Regression
  • Implemented K-Nearest Neighbors (K-NN)
  • Implemented Naive Bayes Classifier
  • Implemented Decision Trees
  • Implemented K-Means Clustering
  • Implemented Gradient Descent
  • Implemented Feature Scaling
  • Implemented Principal Component Analysis
  • Implemented Recommender Systems

The project is using the following technologies:

  • Used JavaScript

ReactJS Project

TensorFlow QnA

GitHub
This project harnesses the capabilities of both ReactJS and TensorFlow.js to create a user-friendly question-answering platform. TensorFlow.js integrates natural language processing features directly into the browser environment, eliminating the need for server-side processing and enabling swift performance. The platform comprehend user inquiries formulated in natural language and respond with contextually relevant answers in real time.

The project is implementing the following features:

  • Conversation-like interaction with TensorflowJS environment

The project is using the following technologies:

  • Initial structure is created with vite
  • Integrated ReactJS
  • Integrated bootstrap
  • Integrated bootstrap-icons
  • Integrated react-bootstrap
  • Integrated react-bootstrap
  • Integrated @tensorflow/tfjs
  • Integrated @tensorflow-models/qna

ReactJS Project

Algorithm Visualizer

GitHub Live Demo
This front-end project showcases a collection of algorithms through an interactive, step-by-step visualization interface. It is designed to provide users with a clear and engaging way to understand the inner workings of various algorithms, making complex processes more accessible and easier to comprehend. With its intuitive visual approach, the project serves as both an educational tool and a practical resource for algorithm exploration.

The project is implementing the following features:

  • Implemented Linear Search Algorithm
  • Implemented Binary Search Algorithm
  • Implemented Bubble Sort Algorithm
  • Implemented Quick Sort Algorithm
  • Implemented Breadth First Search Traversal Algorithm
  • Implemented Depth First Search Traversal Algorithm
  • Implemented Caesar Cipher Algorithm
  • Implemented Flood Fill Algorithm

The project is using the following technologies:

  • Initial structure is created with vite
  • Integrated ReactJS
  • Integrated react-router-dom
  • Integrated bootstrap
  • Integrated react-bootstrap
  • Integrated rc-slider
  • Integrated react-d3-tree
  • Integrated react-pro-sidebar

ReactJS Project

Voice-To-Map Visualization

GitHub Live Demo
This front-end project enables users to visualize geographical map locations through voice input. By integrating voice recognition API, it offers a hands-free and intuitive way to explore and display map data. Users can simply speak their desired location, and the system dynamically renders the corresponding geographical visualization, providing a seamless and engaging experience.
When the voice input is recorded it is passed for processing by Web Speech Recognition API. After the string representation is received then is passed to LocationIQ's Forward Geocoding Service. When the geocoordinates are received they are visualized as markers on the geographical map. The user is able to see history with all visualized locations and some location suggestions.

The project is implementing the following features:

  • Visualization of geographical locations on a map based on user voice input

The project is using the following technologies:

  • Initial structure is created with vite
  • Integrated ReactJS
  • Integrated bootstrap
  • Integrated @mui/material
  • Integrated @mui/icons-material
  • Integrated react-redux
  • Integrated @reduxjs/toolkit
  • Integrated axios
  • Integrated react-leaflet
  • Integrated react-toastify

ReactJS Project

E-commerce Store

GitHub Live Demo
This project provides the essential functionalities of an E-commerce store. Users can browse and preview products organized by category, share their opinions by posting comments on individual items, and efficiently manage their selections with a shopping bag feature. The platform also includes a user-friendly, multi-step checkout process, allowing customers to complete their purchases with ease.

The project is implementing the following features:

  • Home Page with various product related sections
  • Change default language
    • Component level i18n
    • Supported languages: BG, EN
  • Product preview by category
  • Full-size / Sidebar menu navigation based on user device
  • Add products to shopping bag
  • Post comments for every product in given category
  • Preview products both in mini or full-size shopping bag
  • Increment or decrement the quantity of given item
  • Remove given item from shopping bag
  • Perform the following steps in checkout process to complete order
    • Billing
    • Shipping
    • Payment
    • Preview

The project is using the following technologies:

  • Initial structure is created with create-react-app
  • Integrated ReactJS 17
  • Integrated prop-types
  • Integrated react-router-dom
  • Integrated redux
  • Integrated react-redux
  • Integrated redux-axios-middleware
  • Integrated redux-persist
  • Integrated bootstrap
  • Integrated bootstrap-icons
  • Integrated react-bootstrap
  • Integrated axios
  • Integrated axios-mock-adapter
  • Integrated intro.js-react
  • Integrated rc-steps
  • Integrated react-final-form
  • Integrated react-sidebar
  • Integrated react-stars
  • Integrated react-swipe
  • Integrated react-to-pdf
  • Integrated react-toastify
  • Integrated sass
  • Integrated sweetalert2
  • Integrated mocha
  • Integrated sinon js
  • Integrated chai
  • Integrated enzyme
  • Integrated cypress.io

ReactJS Project

Handwritten Digit Recognition

GitHub Live Demo
Front-end project implementing handwritten digit recognition based on tensorflow.js - a library that allows you to develop Machine Learning Models in JavaScript and use Machine Learning directly in the browser or in Node.js. This project uses predefined high accuracy data model (freely available on github) The data model is generated with python script and is based on MNIST dataset that is a dataset of 60,000 small square 28×28 pixel grayscale images of handwritten single digits between 0 and 9.

The project is implementing the following features:

  • Implemented handwritten digit recognition with tensorflow.js

The project is using the following technologies:

  • Initial structure is created with vite
  • Integrated ReactJS
  • Integrated bootstrap
  • Integrated bootstrap-icons
  • Integrated @tensorflow/tfjs
  • Integrated canvas
  • Integrated chart.js
  • Integrated react-chartjs-2
  • Integrated react-toastify

AstroJS Project

AstroJS SSR Blog

GitHub
This application is a lightweight blog system built with AstroJS. It offers filtering functionality, allowing users to query articles by title or hashtag through a user-friendly interface. The system leverages AstroJS's server-side rendering capabilities to ensure fast and responsive content.

The project is implementing the following features:

  • Implemented visualization of all articles
  • Implemented visualization of the content of the articles
  • Implemented filtering of articles by title or hashtag

The project is using the following technologies:

  • Initial structure is created with create astro setup wizard
  • Integrated astro
  • Integrated flowbite
  • Integrated tailwind css
  • Integrated typescript

NodeJS/ReactJS Project

Book List GraphQL App

GitHub
This is a full-stack application featuring a dynamic book list, developed using GraphQL and Apollo Client to enable interaction with book data. It allows users to browse a list of books, add new entries to the list, and view detailed information about a selected book, including its author's other works. Additionally, users can delete books directly, ensuring efficient management of the book list.
The application is divided into two parts:
Backend: Built with Node.js, Express and Express-GraphQL
Frontend: Built with ReactJS and Apollo Client, providing an interactive user interface and integration with GraphQL for data interaction

The project is implementing the following features:

  • Backend
    • Loads the GraphQL schema against which the queries will be validated
    • Sets up a GraphQL endpoint to handle all requests sent to the server
  • GraphQL Schema
    • 1. Dependencies and Data:
      The implementation begins by importing necessary modules from the graphql library and defining two datasets—books and authors. These datasets simulate a database, holding information about books and their corresponding authors.
    • 2. GraphQL Types:
      BookType: Represents a book entity, including fields such as isbn, title, and author. The author field includes a resolver to fetch the associated author data by matching the authorId.
      AuthorType: Represents an author entity, with fields such as id, name, and books. The books field uses a resolver to retrieve all books authored by the individual.
    • 3. RootQuery defines the entry points for querying data:
      book: Allows fetching a single book by its isbn.
      author: Enables retrieving an author by their id.
      books: Returns the full list of books.
      authors: Provides the complete list of authors.
    • 4. Mutations:
      The schema defines several mutations for modifying data:
      addAuthor: Creates a new author with a generated id and an empty list of books. The author's data is added to the authors array.
      addBook: Adds a new book to the books array and associates it with an existing author by updating their books list.
      deleteBook: Removes a book from the books array and updates the corresponding author's books list to exclude the deleted book.
    • 5. Resolvers:
      Resolvers are functions responsible for handling the logic of fetching or modifying data. For example:
      The author field in BookType fetches the author by authorId.
      The books field in AuthorType filters and returns books that belong to the specific author.
    • 6. Schema Definition:
      The schema is defined using the GraphQLSchema object, which combines the RootQuery and Mutation objects. This setup allows for both querying and modifying data through the GraphQL API.
    • This implementation follows a modular and scalable design, effectively simulating a backend for managing books and authors. It provides essential CRUD operations while leveraging the flexibility and efficiency of GraphQL.
  • Frontend
    • Implemented visualization of all books
    • Implemented functionality to add new entries to the list
    • Implemented visualization of detailed information about a selected book
    • Implemented functionality to delete a given book

The project is using the following technologies:

  • Backend
  • The server is based on NodeJS
  • Integrated cors
  • Integrated express
  • Integrated express-graphql
  • Frontend
  • Initial structure is created with vite
  • Integrated ReactJS
  • Integrated bootstrap
  • Integrated react-bootstrap
  • Integrated @apollo/client
  • Integrated graphql

ReactJS Project

Infinite Scroll Product Item List

GitHub Live Demo
Front-end project implementing infinite scroll visualization of product items. The user is able to preview list of all dynamically fetched product items, preview details of every product item, bookmark product item as favorite, apply filters to favorite product items.

The project is implementing the following features:

  • Implemented infinite scrolling for the visualization of product items
  • Implemented the ability to preview details of each product item
  • Implemented a feature to bookmark product items as favorites
  • Implemented functionality to apply filters to favorite product items

The project is using the following technologies:

  • Initial structure is created with vite
  • Integrated ReactJS
  • Integrated react-router-dom
  • Integrated antd
  • Integrated @ant-design/icons
  • Integrated axios
  • Integrated axios-mock-adapter
  • Integrated react-redux
  • Integrated @reduxjs/toolkit

ReactJS Project

Zustand Item List Demo

GitHub
This demo app visualizes a collection of items and allows users to interact with it. Each item is displayed with its current status. The app provides controls to adjust quantities, increase or decrease as needed, and mark specific items for quick identification. Built with the Zustand library, the app leverages its state management features. All data is persistently stored and changes remain intact even after refreshing or closing the app.

The project is implementing the following features:

  • Implemented visualization of items with their statuses
  • Implemented functionality to increase or decrease item quantities
  • Implemented functionality to mark or unmark a given item
  • All data is persistently stored

The project is using the following technologies:

  • Initial structure is created with vite
  • Integrated ReactJS
  • Integrated tailwind css
  • Integrated zustand
  • Integrated axios
  • Integrated axios-mock-adapter

ReactJS Project

React-Admin Dashboard

GitHub
This project is built with React-Admin, a robust framework for creating modern admin interfaces. It demonstrates a fully-featured admin panel with resource management, dynamic internationalization, and a responsive layout.

The project is implementing the following features:

  • Dynamic Resource Management
    • The application uses React-Admin's Resource component to define and manage resources such as posts, users, comments, and images
    • Each resource supports essential CRUD operations, including list, create, edit, and show views
  • Localization
    • Utilizes React-Admin’s i18nProvider for multilingual support, enabling dynamic translation of labels and content
    • The useTranslate hook is leveraged for inline translations, ensuring seamless integration of localized text
  • Authentication
    • Secures the admin interface with a customizable authProvider
  • Customizable Dashboard
    • Features a HomePage component as the dashboard, providing a centralized overview
  • Thematic and Customizable Layout
    • Uses a custom Layout component for consistent branding and navigation

The project is using the following technologies:

  • Initial structure is created with create-react-admin to quickly bootstrap a react-admin project using vite
  • Integrated ReactJS
  • Integrated react-router-dom
  • Integrated react-admin
  • Integrated ra-data-json-server
  • Integrated ra-i18n-polyglot
  • Integrated ra-language-bulgarian
  • Integrated @emotion/react
  • Integrated @emotion/styled
  • Integrated @mui/icons-material
  • Integrated @mui/material

ReactJS Project

RTK Query Stock Demo

GitHub
This is a full-stack demo project that provide real-time stock visualization using RTK Query and WebSockets. It showcases hands-on experience with the RTK Query data fetching tool and its Streaming Updates feature, integral components of the Redux Toolkit library. It demonstrates the seamless integration of real-time data streams into a frontend application.
The application is divided into two parts:
Backend: WebSocket server that continuously generates simulated stock data at regular intervals. The server sends updates, including stock names, current values, and previous values, to connected clients via WebSocket communication.
Frontend: ReactJS-based client application that visualizes the incoming stock data. Using RTK Query, the app efficiently handles data fetching and displays real-time stock updates.

The project is implementing the following features:

  • Backend
    • Handles real-time connections with clients
    • Generates randomized stock data e.g. name, current value, previous value at regular intervals
    • Sends serialized stock data to all connected clients via WebSocket in JSON format
  • Frontend
    • Dynamic display of stock details e.g. name, current value, previous value
    • Uses useGetStockDataQuery() to fetch and manage real-time stock data updates
    • Visualization of real-time value change indicators to highlight stock price changes

The project is using the following technologies:

  • Backend
  • The server is based on NodeJS
  • Integrated express
  • Integrated cors
  • Integrated ws
  • Frontend
  • Initial structure is created with vite
  • Integrated ReactJS
  • Integrated bootstrap
  • Integrated react-redux
  • Integrated @reduxjs/toolkit

ReactJS Project

Pairs and Tens Game

GitHub Live Demo
This game is an interactive number-based puzzle designed to challenge players' logic and problem-solving skills. The goal is simple yet engaging: search for all the possible pairs of numbers or combinations within a grid that add up to the sum of 10. Players must carefully scan the grid, identify matching pairs or groups of numbers to clear the board. With its intuitive gameplay this game offers a fun way to sharpen basic arithmetic and pattern recognition abilities.

The project is implementing the following features:

  • Visualized an interactive grid, built to visually engage players as they select and match number pairs or combinations that sum up to 10, with dynamic feedback

The project is using the following technologies:

  • Initial structure is created with vite
  • Integrated ReactJS
  • Integrated bootstrap
  • Integrated react-confetti

ReactJS Project

Wordy Game (Wordle Clone)

GitHub Live Demo
This front-end project is an implementation of the popular word puzzle game Wordle, designed to offer an interactive and engaging gaming experience. Players are tasked with guessing a hidden word within a limited number of attempts, with the game providing instant feedback by highlighting letters based on their correctness and placement. The grid-based layout dynamically adjusts to reflect the player’s progress, with color-coded feedback guiding each guess.

The project is implementing the following features:

  • Visualized an interactive word grid where players input their guesses letter by letter
  • Visualized a color-coded feedback i.e. highlights letters to indicate correctness (e.g., correct position, incorrect position, or absent in the word)
  • Visualized a virtual keyboard or compatibility with physical keyboards to allow easy input
  • Visualized a dynamic color feedback to the on-screen keyboard, visually indicating the status of each letter based on the player's guesses
  • Visualized a button to restart the game, allowing players to try again

The project is using the following technologies:

  • Initial structure is created with vite
  • Integrated ReactJS
  • Integrated bootstrap
  • Integrated react-bootstrap

ReactJS Project

Ant Design Dashboard UI

GitHub Live Demo
This front-end project is a implementation of Dashboard UI visualization. The Home Page serves as the entry point, featuring well-organized sections designed to guide users through key content and functionality. The Dashboard Page provides multiple widgets built using Ant Design (Antd) components for a polished look and feel. To enhance data representation, the project integrates Chart.js, providing dynamic chart visualizations that effectively communicate complex information.

The project is implementing the following features:

  • Home Page presenting various sections
  • Dashboard Page with multiple widgets and components
    • Progress Widgets
    • Line Chart
    • Statistic Cards
    • Active Users
    • Table Report
    • Tasks Timeline
    • Market Summary

The project is using the following technologies:

  • Initial structure is created with vite
  • Integrated ReactJS
  • Integrated react-router-dom
  • Integrated bootstrap
  • Integrated react-bootstrap
  • Integrated antd
  • Integrated chart.js
  • Integrated react-chartjs-2
  • Integrated react-awesome-reveal

ReactJS Project

Premier League UI Clone

GitHub Live Demo
The Premier League UI is a demo application that replicates the Google UI interface, which was provided for "premier league" search queries. This app allows users to navigate through various pages, including home page, matches page, news page, standings page, stats page and players page.

The project is implementing the following features:

  • Home Page with matches summary
  • Matches Page visualizing played matches in table view
  • News Page visualizing published news as list of panels
  • Standings Page visualizing table with all clubs with additional statistic
  • Stats Page visualizing top player stats
  • Players Page visualizing various details such as player's name, team, position and goals for this season

The project is using the following technologies:

  • Initial structure is created with vite
  • Integrated ReactJS
  • Integrated react-router-dom
  • Integrated tailwind css

ReactJS Project

Conversation Intelligence Platform Demo

GitHub Live Demo
This Conversation Intelligence Platform Demo UI is an application designed to showcase the capabilities of analyzing and interpreting conversations in real time.

The project is implementing the following features:

  • Visualized keyword trend analytics panel
  • Visualized sentiment analysis panel
  • Visualized brand mentions analysis panel
  • Visualized team insights panel
  • Visualized transcript summary of conversation
  • Visualized seller details including insights and call history

The project is using the following technologies:

  • Initial structure is created with vite
  • Integrated ReactJS
  • Integrated react-router-dom
  • Integrated bootstrap
  • Integrated react-bootstrap
  • Integrated bootstrap-icons
  • Integrated canvas
  • Integrated react-chartjs-2
  • Integrated react-pro-sidebar

HTML/Tailwind CSS Project

Tailwind CSS Responsive Landing Pages

GitHub
A collection of multiple responsive landing pages created with Tailwind CSS.

The project is implementing the following features:

  • Visualization of multiple responsive landing pages

The project is using the following technologies:

  • Used tailwind css

JavaScript Project

Implementations of Design Patterns

GitHub
Implemented all 23 classic design patterns as defined by the Gang of Four, categorizing them into creational, structural, and behavioral groups.

The project is implementing the following features:

  • Implemented creational patterns
    • Abstract Factory
    • Builder
    • Factory Method
    • Prototype
    • Singleton
  • Implemented structural patterns
    • Adapter
    • Bridge
    • Composite
    • Decorator
    • Facade
    • Flyweight
    • Proxy
  • Implemented behavioral patterns
    • Chain of Responsibility
    • Command
    • Interpreter
    • Iterator
    • Mediator
    • Memento
    • Observer
    • State
    • Strategy
    • Template Method
    • Visitor

The project is using the following technologies:

  • Used JavaScript

JavaScript Project

Implementations of Data Structures

GitHub
This repository contains implementations of fundamental data structures, written in JavaScript.

The project is implementing the following features:

  • Implemented data structures
    • ArrayList
    • LinkedList
    • Queue
    • Stack
    • Set
    • HashMap
    • BinaryTree

The project is using the following technologies:

  • Used JavaScript

JavaScript/TypeScript Project

Refactoring Code Katas

GitHub
A collection of code katas to practice refactoring. The goal is to improve internal code by making many small changes without altering the code's external behavior.

The project is implementing the following features:

  • Developed a collection of code katas designed to practice and improve refactoring skills

The project is using the following technologies:

  • Used JavaScript and TypeScript

JavaScript Project

LeetCode 100 Algorithms Challenge

GitHub
A compilation of solutions to 100 diverse algorithms from LeetCode, demonstrating problem-solving techniques and showcasing algorithmic concepts across various domains.

The project is implementing the following features:

  • A collection of 100 solved algorithms provided by LeetCode

The project is using the following technologies:

  • Used JavaScript