/Coctel

Primary LanguageJavaScript

Coctel

Coctel is a web app that lets you search for your favorite cocktail

Technologies

  • React Js
  • React Router DOM ( new approach )
  • Styled Components
  • React Toastify
  • Axios
  • React Query

Features

  • You can search for a list of our favorite drink
  • You can see the details of an individual cocktail
  • For seamless fetching of data from cocktail API, I have used React Query

My Learnings

React Router DOM

I have improved at working with the react-router DOM ( new approach ). Technologies that were new to me

  • nested routes in react-router DOM ( new approach )
  • loader function
  • error element

React Query

This is my second project with React Query. I learned about how to fetch data before the initial render using queryClient.ensureQueryData() function

Working with form in React-Router DOM

Now react-router DOM provides a Form component. This component enables us to handle form in an HTML-way

Vite Project

  • Download the zip file of the repository
  • Run npm i to install the dependencies
  • Run npm start to start the project
  • Click on the provided link

Live Preview

https://810coctel.netlify.app