https://github.com/taiseen/next-real-estate
Next-JS | API Calling | JSM
https://github.com/taiseen/next-real-estate
chakra-ui next-js nprogress rapid-api ssg vercel-deployment
Last synced: 3 months ago
JSON representation
Next-JS | API Calling | JSM
- Host: GitHub
- URL: https://github.com/taiseen/next-real-estate
- Owner: taiseen
- Created: 2022-04-29T23:24:12.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-05-08T17:20:35.000Z (about 3 years ago)
- Last Synced: 2025-01-12T18:51:22.811Z (4 months ago)
- Topics: chakra-ui, next-js, nprogress, rapid-api, ssg, vercel-deployment
- Language: JavaScript
- Homepage: https://real-estate-uae-app.vercel.app
- Size: 132 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
29 - Apr - 2022
## Real-Estate App | [Live Link](https://real-estate-uae-app.vercel.app)
# Next-Js + Chakra-UI
## Learning Context:
|No| Context learn by doing this project... |
|--|----------------------------------------------------------------|
| 1| Dynamic Routing |
| 2| File Base Routing |
| 3| Layout Architecture |
| 4| Fetching data from `Rapidapi` |
| 5| API calling by the help of `Axios` |
| 6| Looping through Select + options |
| 7| Image Scrollbar for displaying images |
| 8| UI building by Chakra-UI CSS framework |
| 9| Displaying `Progress Bar` when new page opening... |
|10| use millify() + toLocaleString() for human readable number. |
|11| `SSG` ==> Static Site Generation ( fetch data at `build time`) |
|12| `SSR` ==> Server Side Rendering ( fetch data at `each request`)|
|13| `dangerouslySetInnerHTML={{__html: data}}` by self closing tag |
# Needful Dependencies | Yarn
|No| Package Installs | Usage of |
|--|----------------------------|---------------------------------------------------------|
| 1| yarn add `axios` | Promise based HTTP client | api request |
| 2| yarn add `millify` | Converts long numbers to pretty, human-readable strings |
| 3| yarn add `nprogress` | Simple slim progress bars |
| 4| yarn add `framer-motion` | React animation library |
| 5| yarn add `@emotion/react` | Simple styling in React |
| 6| yarn add `@emotion/styled` | Styled API for emotion |
| 7| yarn add `@chakra-ui/react`| Responsive UI components built with React & Emotion |
| 8| yarn add `react-icons` | SVG React icons of popular icon packs using ES6 imports |
| 9| yarn add `react-horizontal-scrolling-menu` | component for React, support mouse & touch devices |
# Data Source form [Rapid-api](https://rapidapi.com/apidojo/api/bayut)
```jsx
import axios from "axios";
export const baseUrl = 'https://bayut.p.rapidapi.com';
export const fetchApi = async (url) => {
const { data } = await axios.get(url, {
headers: {
'X-RapidAPI-Host': 'bayut.p.rapidapi.com',
'X-RapidAPI-Key': process.env.NEXT_PUBLIC_RAPID_API_KEY,
}
});
return data;
}
```
# Real Estate | App Demo
Learn by inspired from[.](https://youtu.be/y47gYvXchXM)