https://github.com/h-yoshikawa44/ch-windbnb
devChallenges リポジトリ（出典：devChallenge(legacy) - Front-end Developer - Windbnb)
https://github.com/h-yoshikawa44/ch-windbnb
devchallenges emotion nextjs typescript
Last synced: 3 months ago
JSON representation
devChallenges リポジトリ（出典：devChallenge(legacy) - Front-end Developer - Windbnb)
- Host: GitHub
- URL: https://github.com/h-yoshikawa44/ch-windbnb
- Owner: h-yoshikawa44
- Created: 2021-06-13T03:46:54.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2025-02-16T14:49:25.000Z (over 1 year ago)
- Last Synced: 2025-02-16T15:34:49.981Z (over 1 year ago)
- Topics: devchallenges, emotion, nextjs, typescript
- Language: TypeScript
- Homepage: https://ch-windbnb-h-yoshikawa44.vercel.app/
- Size: 4.18 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Windbnb
Solution for a challenge from Devchallenges.io.
*The site is now closed, but this assignment was originally posted at `https://legacy.devchallenges.io/solutions/ftLx16ngH2CDg6hFPU76`.
（My assignment submission page at the time: `https://legacy.devchallenges.io/challenges/3JFYedSOZqAxYuOCNmYD`.）
## Table of Contents
- [Table of Contents](#table-of-contents)
- [Overview](#overview)
- [Desktop](#desktop)
- [Mobile](#mobile)
- [Built With](#built-with)
- [Features](#features)
- [How To Use](#how-to-use)
- [learned/improved](#learnedimproved)
- [Acknowledgements](#acknowledgements)
- [Contact](#contact)
## Overview
### Desktop
---
### Mobile
---
A page with a simple search function has been created.
Even 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.
### Built With
Base
- [Node.js](https://nodejs.org/)：24.14.0
- [TypeScript](https://www.typescriptlang.org/)：5.9.3
- [React](https://reactjs.org/)：19.2.4
- [Next.js](https://nextjs.org/)：16.1.6
- Pages Router
Other major libraries
- [postcss-preset-env](https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env)
- [emotion](https://emotion.sh/)
- [emotion-icons](https://emotion-icons.dev/)
- [polished](https://polished.js.org/)
- [wicg-inert](https://github.com/WICG/inert)
## Features
This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.
- [x] User story: I can see a list of properties
- [x] User story: I can see the property card with a name, rating, apartment type, and super host
- [x] User story: I can open the filter drawer
- [x] User story: I can filter properties by location and number of guests
- [x] User story: I can see the number of filtered items
- [x] User story: I can see pages following given designs
## How To Use
To 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:
```bash
# Clone this repository
git clone git@github.com:h-yoshikawa44/windbnb.git
or
git clone https://github.com/h-yoshikawa44/windbnb.git
# Install dependencies
npm install
# Run the app
npm run dev
```
## learned/improved
- The default value for the type attribute of the button is `type="submit "`.
- Pseudo-elements mean that they cannot be used with void elements.
- Ability to control element inactivity with the inert attribute.(Need to use polyfill for now.)
- Basic usage of ky.
- How to do synchronous data retrieval with React Query.
- How to transpile with `next-transpile-modules` when using ESM libraries in Next.js environment.
- How to use an external URL in next/image.
- How to use React Query in the Next.js environment.
- Difference between auto-fill and auto-fit in Grid Layout.
## Acknowledgements
- [Material UI](https://material-ui.com/)
- [React Query](https://react-query.tanstack.com/)
- [GitHub - WICG/inert - React doesn't play nice with inert property ](https://github.com/WICG/inert/issues/58)
- [GitHub - vercel/next.js - ky-universal throws error "Cannot use import statement outside a module"](https://github.com/vercel/next.js/discussions/21252)
- [【初心者でもわかる】疑似要素が表示されない時に確認する7つの事 ＆ 確認方法](https://qiita.com/7note/items/7cb88dca241a22b54e5c)
- [ReactでInputフォームのEnterキーで処理を行う](https://blog.freks.jp/react-submit-with-enter/)
- [form 内の button 要素を押すと submit される理由](https://zenn.dev/phi/articles/form-submit-button-type-default)
- [UIにおける見えるけど利用できない非活性な領域の実装とinert属性について](https://standard.shiftbrain.com/blog/unavailable-inert-regions-and-inert-attribute)
- [CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック](https://coliss.com/articles/build-websites/operation/css/vertical-text-alignment-in-buttons-and-inputs.html)
- [CSS Gridを使うならマスターしておきたいauto-fillとauto-fitの違い](https://parashuto.com/rriver/development/cssgrid-autofill-vs-autofit)
## Contact
- Website: [h-yoshikawa44.com](https://h-yoshikawa44.com)
- GitHub: [@h-yoshikawa44](https://github.com/h-yoshikawa44)
- X: [@yoshi44_lion](https://x.com/yoshi44_lion)