The Wild Oasis
NextjsTailwindcssSupabaseNext-Auth
The Wild Oasis Customer Website is a full-stack booking platform for a boutique hotel with 8 luxurious cabins. It offers a complete system for managing bookings, cabins, and guests. The application includes an internal tool for staff to check in guests and a customer-facing interface for cabin reservations, ensuring seamless management and booking experiences.
Key Features
π¨ View Hotel Information
- Access detailed information about Wild Oasis Hotel and each cabin (room).
- Check the maximum occupancy and availability dates for each cabin.
π Cabin Filtering and Booking
- Filter cabins based on maximum occupancy.
- Search for cabins available within specific date ranges.
- Online payment is not supported; payment is set to be made on-site during check-in.
- New reservations are set to 'Pending Confirmation' (booked but awaiting check-in).
ποΈ Reservation Management
- Customers can view their past and upcoming reservations. π
- Update βοΈ or delete ποΈ reservation details as needed.
ππSign-Up and Login
- Membership registration and login are required to use booking and reservation management list.
- A customer profile is created in the database during the sign-up process.
βοΈ Profile Management
- Customers can set and update basic information.
- Updated profile information streamlines the check-in process, making it faster and more convenient.
Full Stack Technical Implementation π»π
π₯οΈ Next.js Framework
- Utilized Next.js for server-side rendering (SSR) and static site generation (SSG) to optimize performance and SEO.
- Developed the app with Next.js v14.2.16, leveraging its robust routing and rendering capabilities.
π Authentication with NextAuth.js
- Implemented NextAuth.js for secure and flexible authentication, including social login integrations.
- Enabled user login and session management with NextAuth v5.0.0-beta.25.
π οΈ Supabase for Backend Services
- Integrated Supabase for backend services like database, authentication, and real-time data sync.
- Leveraged Supabase.js for seamless interactions with the database and user authentication.
π¨ UI Design with Tailwind CSS
- Implemented date-fns for handling and formatting dates in the application.
- Simplified date manipulation, comparison, and display throughout the app using date-fns v4.1.0.
π Date Handling with Date-fns
- Leaflet and React Leaflet: Powers interactive and customizable maps for geospatial visualizations, such as marking locations or tracking routes.
π Static and Dynamic Content with React Day Picker
- Integrated React Day Picker for calendar-based date selection and management in the UI.
- Provided a smooth date-picking experience with react-day-picker v8.10.1.
π Others
- User Interface Enhancement with Heroicons π¦ΈββοΈ
- Development and Build Scripts π οΈ
- Environment Configuration with dotenv π±
- Code Quality with ESLint π§Ή
Achievements π
π Next.js Utilization
- Optimized app performance with SSR and SSG. Used Next.js routing and API routes for fast and reliable user experiences.
π State Management & API Integration
- Integrated Supabase for database and authentication. Enhanced security with NextAuth.js for user authentication.
ποΈ Date & Time Management
- Managed dates and times effectively with date-fns, improving features like booking and event management.
What I learned π
π Next.js Understanding
- Gained hands-on experience with SSR, SSG, and CSR in Next.js, mastering key features like routing, image optimization, and API routes.
π Backend Integration
- Learned to efficiently manage data and design APIs with serverless databases like Supabase, while improving security with authentication.
π Efficient State Management
- Mastered separating server and client states in React/Next.js, designing scalable data flow.
π¨ Design System & User Experience
- Built reusable components and a consistent design system using Tailwind CSS and Heroicons.
π Productivity & Collaboration
- Enhanced collaboration skills by managing dependencies, updating packages, and writing maintainable code with linting and coding standards.
Problems & Challenges
| Title | Status | Difficulty Level | Date |
|---|---|---|---|
| State/Props Not Passing Back to Server-Side Component | solved | middle | Dec 13, 2024 |
| Caching Error in Next.js | solved | middle | Nov 12, 2024 |
| Responsive Image Problem | solved | easy | Nov 7, 2024 |