StaySuite

StaySuite is a property rental platform similar offering key features such as user authentication, booking management, saving travelling history and favurite listings for guests while enabling host to manange listings via dashboard and seamlessly handle reservations made on there listings. It supports secure authentication using JWT, real-time updates for both guests and hosts with Socket.io, and image uploads of listings with Multer. Built with Nuxt.js for the frontend,Nest.jsfor the backend, and MongoDB for data storage, the platform ensures a seamless and efficient user experience.

Project Description:

This mobile app, built with React Native, Nest.js, and MongoDB, enables users to securely authenticate, manage bookings, and view reservation history. It includes a robust filtering system for property search, along with the ability to leave ratings and reviews on listings. Users can also save their favorite properties for easy access. The backend ensures smooth data handling while the app delivers an intuitive, user-friendly experience. Designed as a complete property rental platform, it covers key functionalities essential for both users and property managers.

🤖 Tech Stack

Check out the latest demo of Project StaySuite Mobile App.

---

• Check out the latest demo of Web-Based Application Project stay-suite.vercel.app.
• Find the Client Repository of this Project's Web-based Applicaiton Here StaySuite-Server.
• Find the Server Repository of this Project Here StaySuite-Server.

---

Run Locally

Clone the project using the following command:

   git clone https://github.com/BazilSuhail/StaySuite-Mobile-App.git

Go to the project directory

   cd StaySuite-Mobile-App

Then Run this command in your terminal to install all required dependancies:

   npm install

In the project directory, you can run:

    npm expo start -c

Install Expo GO from playstore after scanning the QR code given interminal start the app. Another option is to get Android Studio Installed and type a in terminal to open the app in android studio itself

---

Features

User Authentication

• Signup Page: A registration form for new users.
• Login Page: A login form for existing users.

Protected Screens

• User Profile: User can only view his information .
• Booking history: Guests can view there booking history.
• Redirection for Unauthenticated Users: Users attempting to access protected screens are redirected to the login page.

State Management and Security

• JWT Storage: JWT tokens are stored in localStorage for user session management.
• API Interception: Used Axios interceptors or middleware to attach tokens to API requests.
• Frontend State Management: Managed with useState, useEffect and React Context.

Booking System

• Booking Screen: Users can submit bookings, which are saved to the backend.
• Reserved Bookings Screen: Displays reserved bookings for each user.
• Reservatiosn History/ Bookings History Screen: Displays reserved bookings hisotyr or made reservations for each user he/ she has made.
• Reserved Bookings for Host Page: Displays reserved bookings on Hosts Listings.

Backend Security

• Role-Based Access Control: Routes are protected based on user roles (e.g., admin).
• JWT Middleware: Secures routes that require authentication.
• Password Hashing: Passwords are hashed using bcrypt before being saved to the database.

Styling and UX

• Consistent design with Nativewind and Tailwind CSS.
• React-native-reanimated to deliver smoother animation experinces.
• 2d illustrations to provide an engaing user experience.

---

Web-Based Application's Information

Frontend

• Nuxt.js: Server-side rendering and seamless routing.
• Pinia Store: Centralized state management.
• VueUse Motion: Animations and transitions.
• Tailwind CSS: Styling and responsive design.
• Socket.io: Real-time updates for bookings and reservations.

Backend

• Nest.js: Robust and scalable backend framework.
• MongoDB: Database for storing listings, bookings, and user data.
• Multer: Handling image uploads for listings.
• JWT: Secure authentication and session management.
• Bcrypt: Password hashing for enhanced security.