Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lgope/the-wild-oasis
The Wild Oasis is a user friendly hotel management application. This application is designed to manage hotel operations, including sales statistics, cabin management, user management, booking management, and various customization options. And so much more!
https://github.com/lgope/the-wild-oasis
react react-hook-form react-hot-toast react-icons react-query react-router react-router-dom recharts styled-components supabase supabase-js typescript
Last synced: 7 days ago
JSON representation
The Wild Oasis is a user friendly hotel management application. This application is designed to manage hotel operations, including sales statistics, cabin management, user management, booking management, and various customization options. And so much more!
- Host: GitHub
- URL: https://github.com/lgope/the-wild-oasis
- Owner: lgope
- Created: 2023-08-22T16:29:57.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-23T05:23:02.000Z (12 months ago)
- Last Synced: 2024-10-12T02:22:25.094Z (about 1 month ago)
- Topics: react, react-hook-form, react-hot-toast, react-icons, react-query, react-router, react-router-dom, recharts, styled-components, supabase, supabase-js, typescript
- Language: TypeScript
- Homepage: https://thewildoasis-lgope.netlify.app/
- Size: 2.06 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# the-wild-oasis
Welcome to The Wild Oasis Hotel Management Application documentation. The Wild Oasis is a user friendly hotel management application. This application is designed to manage hotel operations, including sales statistics, cabin management, user management, booking management, and various customization options. It integrates authentication, database storage, and dark mode features. And so much more!
The purpose of this project is to implement my advanced Javascript,Typescript and Database Query skills in a web application and bring it to reality. Moreover, further enhance my knowledge of ReactJs.
I believe the best approach to learning something new is "Learning by Doing".
## ðŪ Demo Account
You can access our application using the following demo account:
- **Email Address** : `[email protected]`
- **Password** : `admin@example`
## Key Features ð
- Authentication and Authorization
- Users of the app are hotel employees. They can logged in into the application to perform tasks.
- New users can only be signed up inside the applications (to guarantee that only actual hotel employees can get accounts).
- Users able to upload an avatar, and change their name and password
- Cabins
- The app has a table view with all cabins, showing the cabin photo, name, capacity, price, and current discount.
- Users able to update or delete a cabin, and create new cabins (including uploading a photo)
- Bookings
- The app has a table view with all bookings, showing arrival and departure dates, status, and paid amount, as well as cabin and guest data.
- The booking status can "unconfirmed" (booked but not yet checked in), "checked in", or "checked out". The table filterable by this important status.
- Other booking data includes: the number of guests, number of nights, guest observations, whether they booked breakfast, breakfast price.
- Check In/Out
- Users able to delete, check-in, or check out a booking as the guest arrives (no editing necessary for now).
- Bookings may not have been paid yet on guest arrival. Therefore, on check-in, users need to accept payment (outside the app), and then confirm that payment has been received (inside the app).
- On check-in, the guest should have the ability to add breakfast for the entire stay, if they hadn't already.
- Guests
- Guest data contain full name, email, national ID, nationality, and a country flag for easy identification.
- Dashboard
- The initial app screen should be a dashboard, to display important information for the last 7, 30, or 90 days:
- A list of guests checking in and out on the current day. Users should be able to perform these tasks from here.
- Statistics on recent bookings, sales, check-ins, and occupancy rate.
- A chart showing all daily hotel sales, showing both "total" sales and "extras" sales (only breakfast at the moment).
- A chart showing statistics on stay durations, as this is an important metric for the hotel
- Settings
- Users able to define a few application-wide settings: breakfast price, min and max nights/booking, max guests/booking
- App dark mode.
## Demonstration ðĨïļ
#### Login Page :
#### Dashboard Page
#### Dark Theme Preview
#### Bookings Details
#### Cabins Details
#### Users Profile Update Page
#### Application Settings Page
## ðŧ Technology Used
The Wild Oasis Hotel Management Application is built using the following technologies and libraries:
- **React**: JavaScript library for UI development.
- **Supabase**: Cloud database service for real-time and secure data storage.
- **@tanstack/react-query**: Data-fetching and state management library for React.
- **date-fns**: JavaScript date utility library for parsing, formatting, and manipulating dates.
- **react-router-dom**: Library for routing and navigation in React apps.
- **recharts**: Composable charting library for React.
- **styled-components**: CSS-in-JS library for styling React components.
- **react-hot-toast**: Customizable toast notification library for React.
- **react-icons**: Collection of customizable icons for React apps.
- **react-hook-form**: Library for form state management and validation in React.
## ð ïļ Installation Steps:
1. Clone the repository
```
git clone https://github.com/lgope/the-wild-oasis.git
```
2. Install the required dependencies
```
npm install
```
3. Start the development server
```
npm run dev
```
4. Access the application at
```
http://localhost:5173 or Your Local URL
```
## Build With ðïļ
1. Javascript, Typescript
2. ReactJs, Redux, react-query (Front-end)
3. Styled Component (Styling)
4. NodeJs, ExpressJs (Back-end)
5. Supabase (Database)
## Contributing ðĄ
Pull requests are welcome but please open an issue and discuss what you will do before ð
## Known Bugs ðĻ
Feel free to email me at [email protected] if you run into any issues or have questions, ideas or concerns.
Please enjoy and feel free to share your opinion, constructive criticism, or comments about my work. Thank you! ð
## Future Updates ðŠī
- Enable PWA
- Improve overall UX/UI and fix bugs
- Featured Tours
- Recently Viewed Tours
- And More! There's always room for improvement!
## License ð
This project is open-sourced under the [MIT license](https://opensource.org/licenses/MIT).
## Deployed Version ð
Live demo (Feel free to visit) ððŧ : https://thewildoasis-lgope.netlify.app