https://github.com/pktcodes/stock-photos-react-project-v2

Stock Photos Project using React - React Query
https://github.com/pktcodes/stock-photos-react-project-v2

context-api css dark-mode dotenv ecmascript environment-variables html javascript john-smilga localstorage react react-icons react-query react-query-devtools stock-photos thunder-client unsplash-api vite

Last synced: 6 days ago
JSON representation

Stock Photos Project using React - React Query

• Host: GitHub
• URL: https://github.com/pktcodes/stock-photos-react-project-v2
• Owner: pktcodes
• Created: 2023-09-16T05:25:44.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2023-09-25T05:51:42.000Z (about 1 year ago)
• Last Synced: 2024-08-12T23:21:36.485Z (3 months ago)
• Topics: context-api, css, dark-mode, dotenv, ecmascript, environment-variables, html, javascript, john-smilga, localstorage, react, react-icons, react-query, react-query-devtools, stock-photos, thunder-client, unsplash-api, vite
• Language: CSS
• Homepage: https://react-stock-photos-v2-prod.netlify.app
• Size: 65.4 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Stock Photos 🖼️

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

#### Stock Photos consists of a straightforward user interface where there is a

- List of random high-quality images from Unsplash API, by default the images shown are set to 10 and search value is set to cat.

- **Search form** to query for a specific category of images when filled it and press the **`Submit`** button or enter to submit.

- **`Loading...`** will be shown while fetching the images, **`There was an error`** if any error has occurred, and **`No Results Found`** when there are no matching results for the query.

- **Dark Mode** has been implemented where the user can switch between the themes using the **`Toggle`** button which changes the colors of the page accordingly and **Local storage** has been used to persist the preference of the theme when the user revisits the application.

- Styles are handled by `index.css`, data fetching and manipulation using **React Query** & **Axios**

- 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 ~ ContextAPI - Hooks ~ useState, useEffect, useContext

#### API Endpoint

Unsplash - https://api.unsplash.com/

#### Deployment / Hosting

Netlify

---

*Note: I have developed this project ~ [17] as part of the React and Projects Course taught by John Smilga..*