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

• Adding more features for practice 2:
  • Converting json-server to Supabase
  • Add pagination method
  • Add booking pages
  • Create booking function
  • Add login, logout method
  • Update information user login
• Apply useReducer for state management
• Apply TanStack Query for fetching data
• Write unit tests for the project.
• Apply React Hook Form.

Target

• Known how to state management with useReducer and useContext.
• Understand and know how to use TanStack Query
• Unit test coverage greater than 80%
• Know how to use React Hook Form.
• PageSpeed scores at minimum of 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.
• TanStack Query: Powerful asynchronous state management for TS/JS, React, Solid, Vue and Svelte
• Supabase: Supabase is an incredible tool for building secure and high-performance Postgres backends with minimal configuration. It provides developers with a wide array of functionalities similar to Firebase, such as authentication, real-time database, and storage.

Information

• Timeline:
  • Estimate: 7 days
  • Actual: 10 days.
  • Calendar:
    • Start: 2023/11/17
    • End: 2023/11/30

Development Environment

• Node: v18.18.2
• Npm: v9.8.1
• Pnpm: 8.9.2

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-02.
  • $ git checkout react-practice-02.
• Step 4: Move to folder hotel-management.
  • $ cd ./hotel-management.
• Step 5:
  • Download this file and put into folder hotel-management (Password: nezumi)
• Step 6:
  • Open terminal > pnpm i.
• Step 7:
  • Run pnpm run dev.
• Step 8:
  • Open http://localhost:5173/ in browser.

Author

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