Zabatly

An online marketplace platform to gather users, event organizers and venue owners to effortlessly search, view and reserve venues.

Table of Contents

• Objective
• Features
• Prerequisites
• Installation
• Technology Stack and Project Structure
• Wishlist
• Contributors
• Credits
• Showcase
• FAQ

Objective

This project has driven us into an exciting journey through the development, implementation and the evaluation of an universal application for venue reservation system. Our goal was to create an online marketplace platform to gather users, event organizers and venue owners to effortlessly search, view and reserve venue. With the support of the cutting-edge web and mobile technologies, we aimed to facilitate the venue reservation process and make it accessible for anyone whom want to reserve a venue anytime and from any part of the world. For more information about our analysis of the project please click here

Features

• Universal application that works multi-platform based on the popular CUA template which tries to adapt the T3 Stack.
• 9+ Shared screen codebase that runs on all platforms.
• Localization system powered i18n that supports both EN/AR languages
• AI support chatbot widget that helps your through the process (Supports EN/AR languages).
• AI recommendation system that helps recommend your next venue reservation.
• User accounts system based on the popular universal authentication library Clerk
• Customizable Search experience to find venues based on your preference.
• Ability to reserve any venue based on your preferred time.
• Fully normalized & optimized database design that can help handle huge data.

Prerequisites

• Latest Node.js LTS
• Setting up React Native development environment
• Clerk account for the environment keys.
• (optional) Planetscale account if you need to deploy the application.
• (optional) Vercel account if you need to deploy the application.

Installation

# Clone repo
git clone https://github.com/Zabatly/website.git

# Install the required packages
## Using NPM
npm install

## Using yarn (preferred)
yarn install

Configuration

• You can edit .env.example add the Clerk API keys in their respective places:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_
CLERK_SECRET_KEY=sk_test_

• Edit the DATABASE_URL field to add your own database connection. If you are planning to use a specific database type other than MySQL, then please make sure to edit schema.prisma in provider field.

  • Database schema design is available in zabatly.sql with dummy data. Its already synced with the current schema.prisma. You can use prisma to push the schema directly to your database, so it can create the appropiate tables. Incase you want to do it manually by importing the zabatly.sql first, then you can use in prisma introspection to synchronize your schema.prisma with your database design.

  • Here is the complete database design in Entity Relation Diagram Form:

• After configuring the database, you'll need to generate Prisma Client

# Using NPM
npm run generate

# Using Yarn
yarn generate

• You can add / edit data on your database using Prisma Studio

# Using NPM
npm run studio

# Using Yarn
yarn studio

# Usually Should run on localhost:5555

Running the Project (Development mode)

• You can start by running the web version of the application. It is essential to access the web version of the application and also act as an server for the native (mobile) version of the application

# Using NPM
npm run web

# Using Yarn
yarn web

# Usually Should run on localhost:3000

• You can also now run the native (mobile) version of the application. You'll need Expo Go application on your phone in-order to check your application.

# Using NPM
npm run native

# Using Yarn
yarn native

# Should open an Expo menu to launch the application on IOS/Android

• Last step is to setup the Zabatly AI which would be needed for the chatbot & the recommendation system

Technology stack and Project structure

To know more about it, you can check the CUA template's explanation

Wishlist

• Update the project to use the all new T4 Stack
• Enhance the interface further in terms of design
• Payment API support such as Stripe
• Ability to host venues.
• Reviews for venues and hosts

Contributors

Special thanks to the team for the help across the board

• Youssef Elmarakshy
• Taha Hesham
• Mostafa Awara
• Mohammed Effat

Credits

• Create universal Application (CUA) for the amazing template
• Tamagui for the incredible dynamic cross-platform UI
• T3 Stack which includes an amazing technology stack that helped form this project
• Solito which made cross platform totally possible due to the navigation unification of both platforms (web + native)

Showcase

FAQ

1. Where should I install the packages? If it contains native code you must install it into the /expo folder.

2. How do I know if it contains native code? In general if it involves some interactions with the phone OS like the APIs to interact with storage, camera, gyro, notification, etc. it involves native code!