This project is a comprehensive booking application designed for Vels Institutions. The application provides functionalities for room and facility bookings, equipment reservations, event scheduling, and user management. The project utilizes a modern monorepo setup to manage multiple packages and applications efficiently.
- Project Structure
- Technologies Used
- Getting Started
- Development Guide
- Adding New Components
- Contributing
- License
Vels Institutions Booking Application
├── apps
│ ├── api # Backend service
│ │ ├── src # Source code for API
│ │ ├── package.json # NPM configuration for API
│ │ └── tsconfig.json # TypeScript configuration for API
│ └── web # Frontend application
│ ├── app # Next.js app directory
│ ├── public # Static files
│ ├── package.json # NPM configuration for Web
│ ├── next.config.mjs # Next.js configuration
│ ├── postcss.config.mjs # PostCSS configuration
│ ├── tailwind.config.ts # Tailwind CSS configuration
│ └── tsconfig.json # TypeScript configuration for Web
├── packages
│ ├── eslint-config # Shared ESLint configuration
│ ├── typescript-config # Shared TypeScript configurations
│ └── ui # Shared UI components and utilities
│ ├── src # Source code for UI components
│ ├── globals.css # Global styles
│ └── tailwind.config.ts # Tailwind CSS configuration
├── package.json # Root package configuration
├── turbo.json # Turborepo configuration
└── README.md # Project documentation
- Turborepo: For managing the monorepo and optimizing build processes.
- Next.js: A React framework for building the frontend.
- Shadcn UI: Component library for consistent UI design.
- Supabase: Backend as a Service for database and authentication.
- Hono.js: Lightweight web framework for API development.
- TypeScript: For type-safe JavaScript development.
- Zod: For runtime type checking and validation.
- Tailwind CSS: Utility-first CSS framework for styling.
- Node.js (v14 or higher)
- Yarn (preferred) or npm
-
Clone the repository:
git clone https://github.com/Coding-Club-VISTAS/booking-hall-repo.git cd booking-hall-repo -
Install dependencies:
yarn install
To start the development servers for both the frontend and backend:
-
Start the API server:
yarn turbo run dev --filter=api
-
Start the Web server:
yarn turbo run dev --filter=web
Both servers will be accessible locally, typically at http://localhost:3000 for the frontend.
- Location:
apps/api/src - Start:
yarn turbo run dev --filter=api - Main file:
index.ts
The API is developed using Hono.js, with Supabase handling data storage and authentication. Routes and services are defined in the respective directories under src.
- Location:
apps/web - Start:
yarn turbo run dev --filter=web - Main files:
app/page.tsx,app/layout.tsx
The frontend uses Next.js, with Shadcn UI components for a consistent design and Tailwind CSS for styling.
- UI Components: Located in
packages/ui - Configurations: Shared ESLint and TypeScript configurations in
packages/eslint-configandpackages/typescript-config.
To add new components to the project, follow these steps:
-
Shadcn UI Components:
- Copy the relevant code from the Shadcn UI component into the
components/uifolder. - Ensure the component is properly styled and integrated with Tailwind CS 5F53 S.
- Copy the relevant code from the Shadcn UI component into the
-
Custom Components:
- Place custom components in the
componentsdirectory. - Refer to the example provided by the
Countercomponent for structure and conventions.
- Place custom components in the
-
Component Integration:
- Import and use the new components in the appropriate files under
apps/weborpackages/ui. - Ensure all components are properly tested and documented.
- Import and use the new components in the appropriate files under
Note: Look at components/ui/button.tsx for the changes to be done when copying the shadcn component.
For guidance on component structure, refer to the Counter component example in the components directory.
Contributions are welcome! Please read our contributing guidelines to get started.
This project is licensed under the MIT License.