{"id":18819373,"url":"https://github.com/b-l-u-e/airbnb-clone","last_synced_at":"2026-01-16T04:30:17.368Z","repository":{"id":152140277,"uuid":"402403506","full_name":"b-l-u-e/airbnb-clone","owner":"b-l-u-e","description":"Built airbnb clone(frontend) using Next.js, Tailwind CSS, API","archived":false,"fork":false,"pushed_at":"2021-09-07T16:50:28.000Z","size":120,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-30T02:51:35.575Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"airbnb-clone-b-l-u-e.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/b-l-u-e.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-02T11:58:47.000Z","updated_at":"2021-09-07T16:50:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"2ee17e7a-1c7a-4b2c-b346-8617c323e051","html_url":"https://github.com/b-l-u-e/airbnb-clone","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-l-u-e%2Fairbnb-clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-l-u-e%2Fairbnb-clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-l-u-e%2Fairbnb-clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b-l-u-e%2Fairbnb-clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/b-l-u-e","download_url":"https://codeload.github.com/b-l-u-e/airbnb-clone/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239754648,"owners_count":19691335,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T00:22:43.657Z","updated_at":"2026-01-16T04:30:17.308Z","avatar_url":"https://github.com/b-l-u-e.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Building Airbnb(Front-end)\n\nHi! Did Airbnb Challenge cloning Airbnb(frontend).The challenge was hosted by Sonny Sangha.I learnt couple of tech stacks through the completion of the challenge.\n\n\n# Tech Stack used for this challenge\n\n**Next.js**\n**Tailwind CSS**\n**API**\n\n## Installation\n\n**Install tailwind CSS with Next.js.**\n\n```bash\nnpx create-next-app -e with-tailwindcss my-project\ncd my-project\n```\n\nThis will automatically configure your Tailwind setup based on the official Next.js example.Now when you run `npm run dev`, Tailwind CSS will be ready to use in your Next.js project.\n\n**Launching VS Code from command line. Here is the trick**\n\n- Launch VS Code.\n- Open the **Command Palette** (Cmd+Shift+P) and type 'shell command' to find the **Shell Command: Install 'code' command in PATH** command.\n\n**How to import image and optimize the image in Next.js**\n\nImage Optimization can be enabled via the `\u003cImage /\u003e` component exported by `next/image`.\n\n_Usage_\nFor an example, consider a project with the following files:\n\n- `pages/index.js`\n- `public/me.png`\n\n\n# Tech Stack used for this challenge\n\n **Next.js**\n **Tailwind CSS**\n **API**\n \n \n\n## Installation\n\n**Install tailwind CSS with Next.js.**\n\n```bash\nnpx create-next-app -e with-tailwindcss my-project\ncd my-project\n```\nThis will automatically configure your Tailwind setup based on the official Next.js example.Now when you run `npm run dev`, Tailwind CSS will be ready to use in your Next.js project.\n\n**Launching VS Code from command line. Here is the trick**\n-   Launch VS Code.\n-   Open the  **Command Palette**  (Cmd+Shift+P) and type 'shell command' to find the  **Shell Command: Install 'code' command in PATH**  command.\n\n**How to import image  and optimize the image in Next.js**\n\nImage Optimization can be enabled via the `\u003cImage /\u003e` component exported by `next/image`.\n\n*Usage*\nFor an example, consider a project with the following files:\n\n-   `pages/index.js`\n-   `public/me.png`\n\n\nWe can serve an optimized image like so:\n\n```jsx\n\nimport Image from \"next/image\";\nimport profilePic from \"../public/me.png\";\n\nimport Image from 'next/image'\nimport profilePic from '../public/me.png'\n\n\nfunction Home() {\n  return (\n    \u003c\u003e\n      \u003ch1\u003eMy Homepage\u003c/h1\u003e\n      \u003cImage src={profilePic} alt=\"Picture of the author\" /\u003e\n      \u003cp\u003eWelcome to my homepage!\u003c/p\u003e\n    \u003c/\u003e\n\n  );\n}\n\nexport default Home;\n```\n\n*Required*\nThe  `\u003cImage /\u003e`  component requires the following properties.\n\n\n### [src](https://nextjs.org/docs/api-reference/next/image#src)\n\nRequired and must be one of the following:\n\n1.  A statically imported image file, as in the example code above, or\n\n2.  A path string. This can be either an absolute external URL, or an internal path depending on the [loader](https://nextjs.org/docs/api-reference/next/image#loader).\n\nWhen using an external URL, you must add it to [domains](https://nextjs.org/docs/basic-features/image-optimization#domains) in `next.config.js`.\n\n2.  A path string. This can be either an absolute external URL, or an internal path depending on the  [loader](https://nextjs.org/docs/api-reference/next/image#loader).\n\nWhen using an external URL, you must add it to  [domains](https://nextjs.org/docs/basic-features/image-optimization#domains)  in  `next.config.js`.\n\n### [width](https://nextjs.org/docs/api-reference/next/image#width)\n\nThe width of the image, in pixels. Must be an integer without a unit.\n\n\nRequired, except for statically imported images, or those with [`layout=\"fill\"`](https://nextjs.org/docs/api-reference/next/image#layout).\n\nRequired, except for statically imported images, or those with  [`layout=\"fill\"`](https://nextjs.org/docs/api-reference/next/image#layout).\n\n\n### [height](https://nextjs.org/docs/api-reference/next/image#height)\n\nThe height of the image, in pixels. Must be an integer without a unit.\n\n\nRequired, except for statically imported images, or those with [`layout=\"fill\"`](https://nextjs.org/docs/api-reference/next/image#layout).\n\n\nRequired, except for statically imported images, or those with  [`layout=\"fill\"`](https://nextjs.org/docs/api-reference/next/image#layout).\n\n\n[For information about image optimization](https://nextjs.org/docs/api-reference/next/image)\n\n**Tailwind plugin scrollbar hide feature**\n\n#using npm\n\nnpm install tailwind-scrollbar-hide\n\n# Using Yarn\nyarn add tailwind-scrollbar-hide\n\n\nThen add the plugin to your  `tailwind.config.js`  file:\n\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('tailwind-scrollbar-hide')\n    // ...\n  ]\n}\n\n\n\n**Date range picker feature**\n\n```\nnpm install --save react-date-range\n```\n\nThis plugin expects `react` and `date-fns` as peerDependencies, It means that you need to install them in your project folder.\n\n```\nnpm install --save react date-fns\n```\n\n## [](https://github.com/hypeserver/react-date-range#usage)Usage\n\nYou need to import skeleton and theme styles first.\n\n```\nimport 'react-date-range/dist/styles.css'; // main style file\nimport 'react-date-range/dist/theme/default.css'; // theme css file\n```\n\n### [](https://github.com/hypeserver/react-date-range#datepicker)`DatePicker`\n\n```\nimport { Calendar } from 'react-date-range';\n\nclass MyComponent extends Component {\n  handleSelect(date){\n    console.log(date); // native Date object\n  }\n  render(){\n    return (\n      \u003cCalendar\n        date={new Date()}\n        onChange={this.handleSelect}\n      /\u003e\n    )\n  }\n}\n```\n\n**_installing loading bar progress feature_**\n\n```\n$ npm i @badrap/bar-of-progress\n```\n\n## Usage\n\nImport the package and create a progress bar instance:\n\n```\nimport ProgressBar from \"@badrap/bar-of-progress\";\n\nconst progress = new ProgressBar();\n```\n\n## Deploy your App\n\n- Use Vercel \"https://vercel.com/\" or any other free web hosting services\n\n## Credits\n\n\n\n**Date range picker feature**\n\n```\nnpm install --save react-date-range\n```\n\nThis plugin expects  `react`  and  `date-fns`  as peerDependencies, It means that you need to install them in your project folder.\n\n```\nnpm install --save react date-fns\n```\n\n## [](https://github.com/hypeserver/react-date-range#usage)Usage\nYou need to import skeleton and theme styles first.\n\n```\nimport 'react-date-range/dist/styles.css'; // main style file\nimport 'react-date-range/dist/theme/default.css'; // theme css file\n```\n\n### [](https://github.com/hypeserver/react-date-range#datepicker)`DatePicker`\n\n```\nimport { Calendar } from 'react-date-range';\n\nclass MyComponent extends Component {\n  handleSelect(date){\n    console.log(date); // native Date object\n  }\n  render(){\n    return (\n      \u003cCalendar\n        date={new Date()}\n        onChange={this.handleSelect}\n      /\u003e\n    )\n  }\n}\n```\n\n***installing loading bar progress feature***\n```\n$ npm i @badrap/bar-of-progress\n```\n## Usage\nImport the package and create a progress bar instance:\n```\nimport ProgressBar from \"@badrap/bar-of-progress\";\n\nconst progress = new ProgressBar();\n```\n\n## Deploy your App\n\n- Use Vercel \"https://vercel.com/\" or any other free web hosting services\n\n## Credits\n\n- Huge thanks to Sonny Sangha learnt a lot and looking forward to more live tutorials\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb-l-u-e%2Fairbnb-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fb-l-u-e%2Fairbnb-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb-l-u-e%2Fairbnb-clone/lists"}