https://github.com/talhajamal02/next-js-class-assignment-07
This project demonstrates both client-side and server-side data fetching in a React application. It showcases how to fetch and display data dynamically from an external API in two different ways: fetching data on the client-side and fetching data on the server-side.
https://github.com/talhajamal02/next-js-class-assignment-07
apiintegration nextjs tailwindcss typescript
Last synced: 3 months ago
JSON representation
This project demonstrates both client-side and server-side data fetching in a React application. It showcases how to fetch and display data dynamically from an external API in two different ways: fetching data on the client-side and fetching data on the server-side.
- Host: GitHub
- URL: https://github.com/talhajamal02/next-js-class-assignment-07
- Owner: TalhaJamal02
- Created: 2024-12-20T16:56:56.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-21T15:43:25.000Z (over 1 year ago)
- Last Synced: 2025-05-19T22:11:45.443Z (about 1 year ago)
- Topics: apiintegration, nextjs, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://class-assignment-07-talha.vercel.app
- Size: 68.4 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Client & Server-Side Data Fetching
This project demonstrates both client-side and server-side data fetching in a React application. It showcases how to fetch and display data dynamically from an external API in two different ways: fetching data on the client-side and fetching data on the server-side. The application fetches a list of books from a public API and displays them in an appealing card layout, featuring details such as name, type, availability, and position.
## Features:
- **Responsive Design**: The layout is fully responsive and adjusts to different screen sizes, providing an optimal experience across mobile, tablet, and desktop devices.
### Dynamic Data Fetching:
- **Server-side fetching**: Data is fetched on the server when the page loads, ensuring fresh content.
- **Client-side fetching**: Data is fetched on the client after the initial page load for a smoother user experience.
- **Interactive UI**: Cards are styled with hover effects and icons to improve user interaction.
## Key Technologies:
- **React**: For building the user interface.
- **Tailwind CSS**: A utility-first CSS framework for rapid UI development.
### API Fetching:
- Client-side fetching with **useEffect** and **fetch()** for real-time data updates.