https://github.com/pktcodes/tours-react-project-v2

Tours Project using React
https://github.com/pktcodes/tours-react-project-v2

css ecmascript html javascript john-smilga react react-hooks tours useeffect usestate vite

Last synced: about 1 month ago
JSON representation

Tours Project using React

• Host: GitHub
• URL: https://github.com/pktcodes/tours-react-project-v2
• Owner: pktcodes
• Created: 2023-07-01T00:00:39.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-07-08T04:57:47.000Z (over 1 year ago)
• Last Synced: 2024-11-08T23:57:53.908Z (3 months ago)
• Topics: css, ecmascript, html, javascript, john-smilga, react, react-hooks, tours, useeffect, usestate, vite
• Language: CSS
• Homepage: https://react-tours-v2-prod.netlify.app/
• Size: 22.5 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Tours 🏖️

> PROD [Live] : https://react-tours-v2-prod.netlify.app/

#### Tours consists of a straightforward user interface where there is a

- List of tours available to visit.

- Each single tour card has an **image**,**name**, **price**, **info** along with a button to toggle between **Read more** or **Show less** and a **Not Interested** button to remove a tour from the list.

- **`Loading`** spinner will be shown while fetching data, once the data is available tours will be shown.

- Data is handled by the external API.

- Once all the tours are removed from the list, it displays _No Tours left_ and a **Refresh** button which on click fetches the tours again.

- To run the project locally, clone the repo, `npm install` to install the dependencies, and `npm run dev` to start up the development server on default port 5173.

#### Languages

HTML, CSS, JavaScript, ECMAScript, React - Hooks ~ useState, useEffect

#### Deployment / Hosting

Netlify

---

_Note: I have developed this project ~ [3] as part of React 18 Tutorial and Projects Course (2023) taught by John Smilga._