I made this simple CRUD app to practice React. It uses React, Framer Motion for simple animations and Firebase realtime database.  Foods data is fetched from firebase on entry to the site.  You can Add any item with 1-5 quantity in the cart. clicking the cart displays the modal with all items you have added, it also calculates the total amount. you can edit item quantities in the cart itself. item is removed from the cart when the quantity goes below 1.  clicking Order button will display an additional form in the modal, below the items. Form has very basic validation, and clicking Checkout actually sends the input data and items in cart to firebase backend.

Fooder

This project is made by VueJs, Vuex state management and Vue Router. it also uses vue-transition components for simple animations.  Main purpose of this app was to practice basic VueJs, Router , Vuex and basic CRUD operations.  Data is fetched from FakestoreAPI and displayed on mount. clicking on See Details or item name goes to detail page, which is managed by Vue-Router.  On the detail page, you can add the item to cart. You can also filter items by category, from the category dropdown.

VueCommerce

Fake Landing Page, Built With Next JS, TypeScript And Framer-Motion. Focuses on User Interface and animations to get modern-looking Landing Page

FastBanana

Landing Page For Fake Digital Marketing Company

This Web App fetches data from OMDB movie API, displays most streamed recent movies. Also has a search functionality. Clicking "Get More Info" displays the detail page of the movie.  Built With Nuxt Js.

VueMovies

Movie API Project With Nuxt Js, Showing Most Streamed Recent Movies

This App fetches data from CryptoAPI, displays top 15 cryptocurrencies, their price and Market Cap.  

CryptoTracker

This project was made by VueJs and Vue Router. As I am passionate about fitness, I thought it would be a good idea to make my own simple calorie counter app.  Main idea was to learn how to use forms and output different results depending on the input of the user in Vue.  If you plug in your stats in the counter, it will give you your BMR, daily calories to lose and gain weight, and also BMI numbers.

My Projects

Fooder

VueCommerce

FastBanana

VueMovies

CryptoTracker

Vue-Calories