- Install dependencies
npm i
- Run app in development mode
npm run dev
- Build the app
npm run build
- Run app in production mode
npm run preview
- Set hotel visibility on different channels
- Dark mode (based on OS setting with prefers-color-scheme)
- Accessible components
- Tailwind-based styling
- Data persistence with LocalStorage
- React (with Typescript)
- Tailwind for styling
- React Aria for implementation of accessible components
- Vite
- Manual switch for dark mode (https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually)
- Use server and database to query and persist data about users, hotels and channels (example: Express + MongoDB + Mongoose)
- Unit tests for React hooks
- Refactor dark mode colors (they were not provided in Figma file)
- Refactor focus, hover and other colors (they were not provided in Figma file)
Configuration:
tailwind.config.js
- theme configuration (color palette, fonts)
Folders:
src/api
- methods for API endpoints
src/components
- common app components
src/pages
- app pages