react-training/hotel-management

PROJECT

• This is a hotel management web application written by HTML5, CSS3, Typescript, json-server, React and compile by Vite.

Overview

• Introduce: Build a hotel management web application using HTML5, CSS3, Typescript, json-server, React and compile by Vite.
• Plan: Link
• Deploy: Link

Requirements

• Use develop tools below:
  • Pnpm
  • Commitlint
  • Eslint
  • Prettier
  • Husky
  • Why-did-you-render
• Use latest react app version
• Apply Styled component.
• Compile by Vite
• Deploy to Vercel is mandatory as a final result

Target

• Known how to build a web application with React
• Understanding and how to use React hooks.
• Understanding in depth about useCallback and useMemo.
• PageSpeed scores at minimum 98 points

Technical

• HTML5: HTML5 is the latest standard of Hypertext Markup Language, the code that describes the structure and presentation of web pages.
• CSS3: Cascading Style Sheets (CSS) is a language used to illustrate a document’s look, style, and format in any markup language. In simple words, it is used to style and organize the layout of Web pages. CSS3 is the latest version of an earlier CSS version, CSS2.
• Typescript: TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
• React: React is a framework that employs Webpack to automatically compile React, JSX, and ES6 code while handling CSS file prefixes. React is a JavaScript-based UI development library. Although React is a library rather than a language, it is widely used in web development.
• Vite: Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.
• json-server: Get a full fake REST API with zero coding.

Information

• Timeline:
  • Estimate: 11 days
  • Actual: 13 days.
  • Calendar:
    • Start: 2023/10/16
    • End: 2023/10/30

Development Environment

• Node: v18.17.1
• Npm: v10.1.0
• Pnpm: 8.8.0

Getting started

• Step 1: Clone repository.
  • With HTTPS:
    • $ git clone https://github.com/Nez27/react-training.git.
• Step 2: Move to folder which just cloned in your computer.
  • cd ./react-training.
• Step 3: Move it to branch react-practice.
  • $ git checkout react-practice.
• Step 4: Move to folder hotel-management.
  • $ cd ./hotel-management.
• Step 5:
  • Open terminal > pnpm i.
• Step 6:
  • Run pnpm run dev.
• Step 7:
  • Open http://localhost:5173/ in browser.

Author

• Loi Phan.
• Email: phanhuuloi15@gmail.com.