Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/simandrew/the-wild-oasis-nextjs

The Wild Oasis hotel management app
https://github.com/simandrew/the-wild-oasis-nextjs

next-js supabase tailwind-css

Last synced: about 1 month ago
JSON representation

The Wild Oasis hotel management app

Host: GitHub
URL: https://github.com/simandrew/the-wild-oasis-nextjs
Owner: SimAndrew
Created: 2024-05-27T15:26:53.000Z (9 months ago)
Default Branch: master
Last Pushed: 2024-06-20T19:14:23.000Z (8 months ago)
Last Synced: 2024-12-03T19:08:13.073Z (3 months ago)
Topics: next-js, supabase, tailwind-css
Language: JavaScript
Homepage: https://the-wild-oasis-app-nextjs.vercel.app
Size: 8.81 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        ## The Wild Oasis NextJS

[Application use App Router](https://nextjs.org/docs/app)

[App Router vs Pages Router dev.to ](https://dev.to/dcs_ink/nextjs-app-router-vs-pages-router-3p57)

[App Router vs Pages Router medium.com](https://medium.com/@jawaragordon/choose-your-own-adventure-next-js-app-vs-pages-router-528dbf25b37f)

---

### About:

The Wild Oasis hotel management app that allows hotel employees to manage cabins, bookings, and guests.

You can try here: [the-wild-oasis-app-nextjs.vercel.app](https://the-wild-oasis-app-nextjs.vercel.app/)

For Login use: Your Google Account.

---

### Sample task, photo:

### For users not Logged In:

**Homepage:**

![image](https://github.com/SimAndrew/the-wild-oasis/assets/44125451/5544367e-1a45-47ff-bb8e-397df089509c)

**Cabins page - List of cabins available for reservation, filter by number of guests:**

![image](https://github.com/SimAndrew/the-wild-oasis/assets/44125451/e6e58872-da45-497a-bea3-43afa2d2cf0f)

**Cabin 001 Example**

![image](https://github.com/SimAndrew/the-wild-oasis/assets/44125451/2002d4b6-0fcc-4dad-a086-b1c25245e37d)

**About page:**

![image](https://github.com/SimAndrew/the-wild-oasis/assets/44125451/ea51512f-fe39-4457-8d1d-249c993ad7e7)

**Guest area page:**

![image](https://github.com/SimAndrew/the-wild-oasis/assets/44125451/274df4c8-b03c-4eec-b763-81f4a3aeb41b)

### For Logged In users:

**Guest area page:**

Home page:

![image](https://github.com/SimAndrew/the-wild-oasis/assets/44125451/ce905d43-eb16-4131-96b8-25a63045a994)

**Guest reserve a cabin:**

![image](https://github.com/SimAndrew/the-wild-oasis/assets/44125451/a60bba72-f3f2-465c-8053-b8822c6a18c5)

Guest reservations list:

![image](https://github.com/SimAndrew/the-wild-oasis/assets/44125451/e9daa4b1-47fc-4d3d-8cf5-08db53b8cefc)

Edit Guest reservation:

![image](https://github.com/SimAndrew/the-wild-oasis/assets/44125451/d674a10f-a7b8-419b-8af2-ea20426fe30b)

Guest profile Update guest information: where a guest from, National ID number:

![image](https://github.com/SimAndrew/the-wild-oasis/assets/44125451/c2002740-e7b4-47c2-9d2b-86a3ea21ee85)

---

### Technologies, Libraries:

- React lets you build user interfaces out of individual pieces called components. [React JS](https://react.dev/)

- Next JS - React meta-framework. Handles routing, SSR, data fetching and even remote state management. [Next JS](https://nextjs.org/)

- [ESLint](https://eslint.org/), [Prettier](https://prettier.io/)

- Tailwind CSS a utility-first CSS framework that packed with classes. Extremely easy to integrate into Next.js. Utility-first is a CSS methodology where you build up your styles using many small, purpose-specific classes. [tailwindcss.com](https://tailwindcss.com/)

- heroicons/react - Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS [heroicons.com](https://heroicons.com)

- Flexbox

- date-fns - Date manipulation [date-fns.org](https://date-fns.org)

- Supabase - database and API [supabase.com](https://supabase.com)

- React DayPicker- Create date pickers, calendars, and date inputs for web applications. [react-day-picker.js.org](https://react-day-picker.js.org)

- authjs.dev - Authentication for NextJs [authjs.dev](https://authjs.dev/)

- Login & Logout with Google AuthJs login provider https://authjs.dev/getting-started/providers/google

---

### Run the app:

- Clone a project: `git clone`

```

git clone https://github.com/SimAndrew/the-wild-oasis-nextjs.git

```

- Open project code in your editor.

- Install the dependencies, enter into the terminal:

```

npm install

```

- Run the project, enter into the terminal:

```

npm run dev

```