all projects

01.

Music Player

The Music Player project involved testing audio functionality in JavaScript. Key features included the implementation of filter(), map(), addEventListener(), appendChild(), and other related functions.

JavaScriptHTMLCSS
02.

CalorieCalculator

In this calorie counter, I have used JavaScript, with using technologies to validate user input, perform calculations based on that input, and dynamically update interface to display the results.

JavaScriptHTMLCSS
03.

DragonFighter

In this project, I have used fundamental programming concepts in JavaScript by coding Role Playing Game. I have worked with arrays, strings, objects, functions, loops, if/else statements, while loop etc.

HTMLCSSJavaScript
04.

Focus Time

For this project developed using React Native and Expo, I leveraged the React-Native-Paper library to seamlessly incorporate various UI components such as progress bars, input text fields, and more. To ensure consistency in size and color across these elements, I created a separate file to define and manage their respective sizes, colors, and spacings.

React NativeExpo
05.

BackRoads Project

The aim of the BackRoads Project is to convert an HTML and CSS web page into a functional React web page. To accomplish this objective, I have segmented the code from the index.html file into several React components. This approach is aligned with the best practices for React projects, and the project itself is relatively straightforward.

HTMLCSSReact
06.

BitCoinApp

BitCoinApp is a mobile application that allows users to check the rate of bitcoin in different currencies. The app uses coinapi.io API for getting a current rate of bitcoin. For changing currency I have used UIPickerView.

Swiftxcode
07.

Weather App

Weather App is a mobile application that allows users to check the weather in their current location or any location they choose. The app uses Core Location to get the user's GPS data and display the weather for their current location with the user's permission. Users can also input a city name of their choice using the UITextField feature. The app features a dark-mode option, allowing users to switch between a light and dark color scheme. The Weather App also uses vector images to enhance the user interface. To get the weather data, the app makes HTTP requests with URLSession to a weather API. The app uses JSONDecorder to parse the JSON data returned by the API.

Swiftxcode
08.

Bill Splitter

Introducing my personal project, the Bill Splitter app. This app allows users to easily divide the cost of a shared bill among multiple people. Developed using Swift and Xcode, I utilized segue identifiers to navigate between screens and transfer data efficiently. With this app, calculating each person's share of the bill has never been easier.

Swiftxcode
09.

Photo gallery Canada

I recently completed a project involving HTML, CSS, and JavaScript, which resulted in a stunning photo gallery webpage. I utilized several technologies to enhance the user experience, such as duplicating slides with different angles and adding blur effects to create changing backgrounds as slides transitioned. Another noteworthy feature is the disappearing effect of the first paragraph when users swipe through the slides. Additionally, users can click on images to scale them and adjust their angles for a customized viewing experience.

HTMLCSSJSSwiper
010.

Horizontal parralax css effect

I worked on an HTML/CSS/JS project that incorporated the parallax CSS effect to create the illusion of camera movement as users scroll horizontally through the webpage. During my project, I came across a library called Swiper, which offers tools to set up a smooth scrolling user experience.

HTMLCSSJSSWIPER
011.

parallax's project

I worked on an HTML/CSS/JS project that incorporated the parallax CSS effect to create the illusion of camera movement as users scroll through the webpage. During my project, I came across a library called GSAP, which offers tools like ScrollTrigger and ScrollSmoother to enhance the scrolling effect. I also calculated the size of headers depends of the size of window.

HTMLCSSJSGSAP
012.

Portfolio

This is my personal project -  my e-portfolio web page.  I have developed this web page using React.js, CSS, GraphQL, and Gatsby. All content data is located on Contentful API.

React.jsGatsbyGraphQL
013.

Rentool

Rentool is a contactless tool rental service for individuals or groups who may need a certain tool to complete a task but do not have access to that tool. This project was developed by a team of 3 developers and 3 designers.  I have used HTML, CSS, and JavaScript. I was responsible for developing the product view page and some styling of this project.

JavaScriptHTMLCSS
014.

Simple Recipes

Simple Recipes - a personal project built by using React.js, Gatsby, GraphQL, and CSS. All content is located on Contentful API. This project has cool features like filtering recipes by tags and auto-rendering a particular page if new content is added.

React.jsGatsbyContentful
015.

Splink

Splink is a community-based grocery-shopping mobile app, developed by a team of 5 developers and 3 designers. I was responsible for creating the Discover, Filter, and Notification sections. I have used React Native and Tailwind CSS in the frontend. In the backend, I used Node.js, Express, MongoDB, Firebase, and AWS( Amazon EC2).  The biggest challenge I faced was utilizing a Flatlist from React Native for filtering events based on user input like address, shop name, address, and city.

ReactNativeFirebaseMongoDBAWSTailwind CSSNative Base
016.

Hppy

Hppy - This project is an employee engagement app that uses sentiment analysis on employee feedback to evaluate if it's positive or negative. Our team consisted of 4 developers and 3 designers who worked together to bring the project to life. My specific responsibilities included the creation of user-friendly forms on the frontend, and ensuring seamless integration between the frontend and backend. Utilizing my expertise in HTML, CSS, React.js, Node.js, Express, and MongoDB, I was able to contribute to the project's success. The end result was a user-friendly and effective tool.

ReactNode.jsExpress.jsMongoDBRedux ToolkitTensorFlowJS

2024 Web_Developer