The Wild Oasis NextJS

Application use App Router

App Router vs Pages Router dev.to

App Router vs Pages Router medium.com

---

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

For Login use: Your Google Account.

---

Sample task, photo:

For users not Logged In:

Homepage:

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

Cabin 001 Example

About page:

Guest area page:

For Logged In users:

Guest area page:

Home page:

Guest reserve a cabin:

Guest reservations list:

Edit Guest reservation:

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

---

Technologies, Libraries:

• React lets you build user interfaces out of individual pieces called components. React JS

• Next JS - React meta-framework. Handles routing, SSR, data fetching and even remote state management. Next JS

• ESLint, Prettier

• 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

• heroicons/react - Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS heroicons.com

• Flexbox

• date-fns - Date manipulation date-fns.org

• Supabase - database and API supabase.com

• React DayPicker- Create date pickers, calendars, and date inputs for web applications. react-day-picker.js.org

• authjs.dev - Authentication for NextJs 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