{"id":34645494,"url":"https://github.com/h-yoshikawa44/ch-windbnb","last_synced_at":"2026-04-17T04:02:49.988Z","repository":{"id":43484526,"uuid":"376431754","full_name":"h-yoshikawa44/ch-windbnb","owner":"h-yoshikawa44","description":"devChallenges リポジトリ（出典：devChallenge(legacy) - Front-end Developer - Windbnb)","archived":false,"fork":false,"pushed_at":"2025-02-16T14:49:25.000Z","size":4381,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-16T15:34:49.981Z","etag":null,"topics":["devchallenges","emotion","nextjs","typescript"],"latest_commit_sha":null,"homepage":"https://ch-windbnb-h-yoshikawa44.vercel.app/","language":"TypeScript","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/h-yoshikawa44.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-06-13T03:46:54.000Z","updated_at":"2025-02-16T14:49:27.000Z","dependencies_parsed_at":"2025-02-16T15:27:27.472Z","dependency_job_id":"134eb2a3-cd3a-4a63-a67a-01d1bc85229e","html_url":"https://github.com/h-yoshikawa44/ch-windbnb","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/h-yoshikawa44/ch-windbnb","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h-yoshikawa44%2Fch-windbnb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h-yoshikawa44%2Fch-windbnb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h-yoshikawa44%2Fch-windbnb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h-yoshikawa44%2Fch-windbnb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/h-yoshikawa44","download_url":"https://codeload.github.com/h-yoshikawa44/ch-windbnb/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h-yoshikawa44%2Fch-windbnb/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31914458,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"online","status_checked_at":"2026-04-17T02:00:06.879Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["devchallenges","emotion","nextjs","typescript"],"created_at":"2025-12-24T17:42:26.008Z","updated_at":"2026-04-17T04:02:49.983Z","avatar_url":"https://github.com/h-yoshikawa44.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- Please update value in the {}  --\u003e\n\n\u003ch1 align=\"center\"\u003eWindbnb\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n   Solution for a challenge from Devchallenges.io.\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003e\n    \u003ca href=\"https://ch-windbnb-hitomi-yoshikawas-projects.vercel.app/\"\u003e\n      Demo\n    \u003c/a\u003e\n  \u003c/h3\u003e\n\u003c/div\u003e\n\n*The site is now closed, but this assignment was originally posted at `https://legacy.devchallenges.io/solutions/ftLx16ngH2CDg6hFPU76`.  \n（My assignment submission page at the time: `https://legacy.devchallenges.io/challenges/3JFYedSOZqAxYuOCNmYD`.）\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [Overview](#overview)\n  - [Desktop](#desktop)\n  - [Mobile](#mobile)\n  - [Built With](#built-with)\n- [Features](#features)\n- [How To Use](#how-to-use)\n- [learned/improved](#learnedimproved)\n- [Acknowledgements](#acknowledgements)\n- [Contact](#contact)\n\n\u003c!-- OVERVIEW --\u003e\n\n## Overview\n### Desktop\n![overview - desktop](/screenshots/desktop.png)\n\n---\n\n![overview - desktop-drawer](/screenshots/desktop-drawer.png)\n\n### Mobile\n\u003cimg src=\"./screenshots/mobile.png\" alt=\"overview - mobile\" width=\"35%\"\u003e\n\n---\n\n\u003cimg src=\"./screenshots/mobile-drawer.png\" alt=\"overview - mobile-drawer\" width=\"35%\"\u003e\n\nA page with a simple search function has been created.\n\nEven though it was only one screen and a drawer menu, there were surprisingly many things to think about when implementing it, and I learned a lot.\n\n### Built With\n\n\u003c!-- This section should list any major frameworks that you built your project using. Here are a few examples.--\u003e\n\nBase\n- [Node.js](https://nodejs.org/)：24.14.0\n- [TypeScript](https://www.typescriptlang.org/)：5.9.3\n- [React](https://reactjs.org/)：19.2.4\n- [Next.js](https://nextjs.org/)：16.1.6\n  - Pages Router\n\nOther major libraries\n- [postcss-preset-env](https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env)\n- [emotion](https://emotion.sh/)\n- [emotion-icons](https://emotion-icons.dev/)\n- [polished](https://polished.js.org/)\n- [wicg-inert](https://github.com/WICG/inert)\n\n## Features\n\n\u003c!-- List the features of your application or follow the template. Don't share the figma file here :) --\u003e\n\nThis application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.\n\n- [x] User story: I can see a list of properties\n- [x] User story: I can see the property card with a name, rating, apartment type, and super host\n- [x] User story: I can open the filter drawer\n- [x] User story: I can filter properties by location and number of guests\n- [x] User story: I can see the number of filtered items\n- [x] User story: I can see pages following given designs\n## How To Use\n\n\u003c!-- Example: --\u003e\n\nTo clone and run this application, you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](https://www.npmjs.com/)) installed on your computer. From your command line:\n\n```bash\n# Clone this repository\ngit clone git@github.com:h-yoshikawa44/windbnb.git\nor\ngit clone https://github.com/h-yoshikawa44/windbnb.git\n\n# Install dependencies\nnpm install\n\n# Run the app\nnpm run dev\n```\n\n## learned/improved\n- The default value for the type attribute of the button is `type=\"submit \"`.\n- Pseudo-elements mean that they cannot be used with void elements.\n- Ability to control element inactivity with the inert attribute.(Need to use polyfill for now.)\n- Basic usage of ky.\n- How to do synchronous data retrieval with React Query.\n- How to transpile with `next-transpile-modules` when using ESM libraries in Next.js environment.\n- How to use an external URL in next/image.\n- How to use React Query in the Next.js environment.\n- Difference between auto-fill and auto-fit in Grid Layout.\n\n## Acknowledgements\n\n\u003c!-- This section should list any articles or add-ons/plugins that helps you to complete the project. This is optional but it will help you in the future. For example: --\u003e\n\n- [Material UI](https://material-ui.com/)\n- [React Query](https://react-query.tanstack.com/)\n- [GitHub - WICG/inert - React doesn't play nice with inert property ](https://github.com/WICG/inert/issues/58)\n- [GitHub - vercel/next.js - ky-universal throws error \"Cannot use import statement outside a module\"](https://github.com/vercel/next.js/discussions/21252)\n- [【初心者でもわかる】疑似要素が表示されない時に確認する7つの事 ＆ 確認方法](https://qiita.com/7note/items/7cb88dca241a22b54e5c)\n- [ReactでInputフォームのEnterキーで処理を行う](https://blog.freks.jp/react-submit-with-enter/)\n- [form 内の button 要素を押すと submit される理由](https://zenn.dev/phi/articles/form-submit-button-type-default)\n- [UIにおける見えるけど利用できない非活性な領域の実装とinert属性について](https://standard.shiftbrain.com/blog/unavailable-inert-regions-and-inert-attribute)\n- [CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック](https://coliss.com/articles/build-websites/operation/css/vertical-text-alignment-in-buttons-and-inputs.html)\n- [CSS Gridを使うならマスターしておきたいauto-fillとauto-fitの違い](https://parashuto.com/rriver/development/cssgrid-autofill-vs-autofit)\n\n## Contact\n\n- Website: [h-yoshikawa44.com](https://h-yoshikawa44.com)\n- GitHub: [@h-yoshikawa44](https://github.com/h-yoshikawa44)\n- X: [@yoshi44_lion](https://x.com/yoshi44_lion)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fh-yoshikawa44%2Fch-windbnb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fh-yoshikawa44%2Fch-windbnb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fh-yoshikawa44%2Fch-windbnb/lists"}