• Introduction
• Features and requirements
• Bonus features and implementations
• Data consumed
• Installation
• Running
• Another scripts
• Critique

A simple and intuitive React TypeScript app for a booking website. A booking is when a guest selects a start and end date and submits a reservation on a property.

The main objective of this project is to show some development skills through some technologies and concepts:

• ReactJS
• React Hooks
• TypeScript
• CSS-in-JS (styled-components)
• Unity tests (Jest + React Testing Library)
• Linters (eslint, style-lint, lint-staged)
• Formatters (editorconfig, prettier)
• git hooks (husky: pre-commit, prepare-commit-message)
• conventional-commits (commitizen)
• Scaffolding (scaffdog)
• Environment config (.vscode/*, .npmrc)
• Thematization
• Usability
• Responsivity
• Clean Code
• SOLID
• KISS: “Keep It Simple, Stupid!”
• YAGNI: “You Ain’t gonna need it”
• DRY: “Do not Repeat Yourself”

• Create a booking
• Read a booking
• Update a booking
• Delete a booking
• Store the state from bookings in a global state store
• Have some logic in place to prevent double (overlapping) bookings.
• Validate the start and end dates for a booking.
• The webpages should be fully responsive for desktop and mobile.

• Friendly messages to show the user some success/error status.
• High level of quality (strong eslint/typescript rules, scaffolding, separation of responsibilities, tests, pre-commit with type-check/linting/tests etc).
• Create a lot of components through the styled-components with a well organized structure of files (instead of using third part libraries).
• Unity tests in the component styles, behaviors, snapshots etc.
• Global tests configuration that provides a simple and standardized way to render the components through the React Testing Renderer or through React Testing Library, with the theme provider already embedded.
• Create a thematization structure that allows you to create how many themes that you want.
• Create a customized theme interface with some structures implemented (borders, colors and typography).
• Implements responsiveness to allow any screen size by using @media queries and the Grid Layout.
• Usage of React Context, React Hooks.
• Usage of Typescript generics, union type and interface manipulation and interesting Type utilities.

• ...

• Make sure that you have nodejs installed in you computer. Preference: node 16.16.0.
• yarn install if you have the yarn installed globally or npx yarn install, if not.

• yarn start or npm start

• Typescript type check: yarn type-check
• Prettier formating: yarn format
• Linting code: yarn lint
• Build: yarn build
• Tests: yarn test
• Scaffolding: yarn g

• It could be done this or that way...