Skip to content

0xFernandoDias/movie-shop

Repository files navigation


Wassup guys, it was a pleasure to develop this challenge
I had fun and learned a lot, the application is rich in details. 😄

https://movie-shop-eta.vercel.app/


Getting started:

Starting from the first that you already have node installed

  • Clone the repository
    $ git clone git@github.com:nand0diaz/movie-shop.git
  • Open the project folder
    $ cd movie-shop
  • Install dependencies
    $ yarn
  • Run the application
    $ yarn dev

Dependencies:


  • Vue + Vite
  • Vue Router
  • Tailwind
  • ESLint, Prettier
  • Axios
  • Pinia
  • Font Awesome
  • Maska

Pages:


  • Home
  • Checkout

Functionalities:


  • Search ✔️
  • By clicking on the logo, you will return to the Home ✔️
  • Icons to show favorites and cart ✔️
  • Number of items in the favorites and cart icons ✔️
  • Button to remove items in favorites and cart ✔️
  • Button to add to cart and remove from favorites ✔️
  • Button to remove item from cart ✔️
  • Total price of items in cart ✔️
  • Button to go to checkout in cart ✔️
  • Button to add to favorites in each Home movie ✔️
  • Button to add to cart on each Home movie ✔️
  • Button to see the cart in each Home movie if the movie is in the cart ✔️
  • Form for user data with mask at checkout ✔️
  • Button to remove item from cart at checkout ✔️
  • Cart items at checkout ✔️
  • Button to complete the purchase if the form is completely filled out at checkout ✔️
  • Success modal with user name at checkout ✔️
  • Return to Home function when clicking modal button ✔️

Hooks


appData:

  • getIsFavoritesVisible
  • getIsCartVisible
  • getIsModalVisible
  • showFavorites
  • hideFavorites
  • showCart
  • hideCart
  • hideMenus
  • showModal
  • hideModal

movies:

  • fetchMovies
  • getMovies
  • getCart
  • getFavorites
  • getCartItemsQuantity
  • getFavoritesQuantity
  • getTotalPrice
  • clearSearchInput
  • addToCart
  • addToFavorites
  • deleteAllCartItems
  • deleteAllFavorites
  • deleteCartItem
  • deleteFavorite

userRegister:

  • getUserRegister
  • getUserName
  • isUserRegisterFilled
  • resetUserRegister

  • Animations ✔️
  • Loader spinner ✔️
  • Icons ✔️
  • Integration with the TMDb Movie API ✔️
  • Responsive ✔️
  • Validations and formatting ✔️
  • Project developed in 3 days ✔️

Some screenshots from the project