React / NextJS / TypeScript / MongoDB / NodeJS Portfolio

Portfolio   »  React / NextJS / TypeScript   »  Go Lang / MongoDB / PostgreSQL   »  PHP / MySql   »  Hybrid

GIT: https://github.com/cholakovit/wallet - download the code sample

bank-svg-icon

This is a bank account management app. The interesting thing about this app is the high optimization of the code, the use of the optimistic updates principle in tanstack/react-query, unit tests and etc. Suspense + ErrorBoundaries, no design.

Main Technologies:

  • REACT
  • Tanstack - fetching and global state management
  • Json Server
  • Unit Tests

GIT: https://github.com/cholakovit/Products - download the code sample

Products

Main Technologies:

  • NEXTJS
  • Tanstack - fetching and global state management
  • graphQL

GIT: https://github.com/cholakovit/weather-app - download the code sample

weather-app

Main Technologies:

  • REACT
  • Tanstack - fetching and global state management
  • MUI – Material UI Tools

GIT: https://github.com/cholakovit/movies-app - download the code sample

movies-app

Main Technologies:

  • REACT
  • Tanstack - fetching and global state management
  • MUI – Material UI Tools

GIT: https://github.com/cholakovit/mojos - download the code sample

Logo

Small application showing games by category. Dark and Light mode included. Second page has featured games and all games that the user can filter. Two types of filtering. Labels on each game based on the included categories.

Main Technologies:

  • REACT
  • Redux with thunks
  • MUI – Material UI Tools

Git: https://github.com/cholakovit/social - download the code sample

А Social application. You are able to create a post or edit your profile. Like or dislike posts. The app counts how many post you made or how many times you liked something. Each post has a date and caluclates how many hours and days past from the last change on the post. Attractive design. The app loads three post at a time.. you can load more and more by clicking the button `load more`. I have created a custom hooks in order to optimize the code and achieve higher performance.

This app is also a great example for exponential change and linear change! If you go to src/store/postsSlice.jsx at line 56.. you will find detailed explanation about this technique what it does and why it is important to know! As well as the code written!

I have installed eslint - prettier - husky for higher quality code. To install the app please read the file README.md. It is very simple to install this app.

Main Technologies:

  • REACT - Vite
  • Redux with thunks
  • MUI - Material UI
  • Eslint - Prettier - husky
  • Json-server

GIT: https://github.com/cholakovit/sportal - download the code sample

Web based application - I was requested to create a small application.. similar to this one i am showing in this demo. A form from where a user can insert data and see it bellow. The form has validation, I am using react-hook-form to validate data. Additionaly I am using eslint - airbnb, prettier and husky - Husky is a useful tool to augment (but not replace!) automated CI systems. Not only can it prevent unnecessary broken commits which can slow other developers down, but it also can save time and money (especially if you are paying for build minutes for your CI service!) For CI/CD I am using GH Actions. In addition i use rollup visualiser - Visualize and analyze your Rollup bundle to see which modules are taking up space. The results/statistics are in stats.html

Main Technologies:

  • REACT - Vitejs + TypeScript
  • MUI
  • Reduxjs/Toolkit + RTKQ
  • Unit testing - react library, jest, integrational testing and cypress
  • Eslint, Prettier + Husky
  • Rollup plugin visualiser
  • GH Actions CI/CD
  • Data is loaded through json-server - please read README.md to run the app.

Git: https://github.com/cholakovit/ps_interactive - download the code sample

I was asked to create an application that calculates the distance between two points. In this case.. if you have a party, and you want to invite all of your friends, but within X km radius. based on the entered coordinates, the application calculates which ones are in the given radius and shows them to you.

Main Technologies:

  • REACT + TypeScript
  • MUI
  • Reduxjs/Toolkit + RTKQ
  • Unit testing - react library, jest, integrational testing
  • Data is loaded through json-server

DEMO Project: mobile app – entering goals or to-do list for mobile
Git: https://github.com/cholakovit/RNCourse

I have developed a small mobile app for entering goals or a to-do list for mobile. The App works perfectly with Android and iOS. The Client can enter his goals .. or remove them. I am using Expo. Expo is an open-source platform for making universal native apps that run on Android, iOS, and the web.

Main Technologies:

  • REACT Native
  • Expo

DEMO Project: movie app searching and displaying a movie –
Git: https://github.com/cholakovit/movie-app

This is an application where you can search for a movie through the search engine and, .. in addition showing a list of movies. When you click on a movie, the details of that movie are displayed. The application is made with redux toolkit and redux saga.

Main Technologies:

  • REACT
  • Saga

DEMO Project: movie app searching and displaying a movie –
Git: https://github.com/cholakovit/movie-app

А Blog application with users. You can create, edit or delete a user (CRUD). Each created user is able to create an additional article that appears in the blog with a date (how long ago, it was published) ... and by whom. You are able to view each article in entirely, as well as each user with all the data entered. However, since I do not have a json-server on my hosting, the application has not been uploaded. But the code is uploaded to the GIT and you can view it from there. I used react with redux and RTK Query to make it. If you want to download and test it, you need to install json-server: https://www.npmjs.com/package/json-server and run it with this command: “npx jsonserver -- watch data /data.json --port 3500 ”

Main Technologies:

  • REACT
  • Redux with RTKQ
  • Json-server

DEMO Project: uploading and reading file
Git: https://github.com/cholakovit/dropzone

This is an application where you can drag and drop a specific scv file in the specified box. The application intercepts it, reads and shows all employees worked on certain projects and calculates how many days they have worked. Then shows those employees who worked together on a project and how long each one worked, and then shows the employee who worked the most. The application intercepts all types of dates that can be entered and works with them, and if there is a blank date NULL also intercepts it and there is no problem. You can download the code from the link to the GIT below and the file inside that tests zzz.scv and see the result .. the code is based on pure react.

Main Technologies:

  • REACT

DEMO Project: test driven development
Git: https://github.com/cholakovit/test_driven_dev

This is an interesting approach to programming. As programmers are increasingly required to test their code better and better, unit testing technology has emerged. Through which a programmer can test the component he created with react. Test Driven Development process is used mainly in larger companies with large projects where programmers first write their unit tests and then write the code and components based on the unit tests. In this case ... I made an elementary calculator, in which I first wrote my unit tests and I wrote the code based on these unit tests.

Main Technologies:

  • REACT
  • Jest