Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tapader13/uspace
Uspace is a space booking platform built with Next.js and React.js, allowing users to search, book, and manage spaces. It features secure Stripe payments, social login, and media storage via Cloudinary, with a backend powered by MongoDB and Prisma.
https://github.com/tapader13/uspace
axios bycrypt cloudinary mailtrap mongoose motion nextjs14 react-datepicker react-hook-form react-icons stripe zod zustand
Last synced: about 18 hours ago
JSON representation
Uspace is a space booking platform built with Next.js and React.js, allowing users to search, book, and manage spaces. It features secure Stripe payments, social login, and media storage via Cloudinary, with a backend powered by MongoDB and Prisma.
- Host: GitHub
- URL: https://github.com/tapader13/uspace
- Owner: tapader13
- Created: 2024-10-21T20:24:05.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-02-04T20:32:47.000Z (1 day ago)
- Last Synced: 2025-02-04T21:27:57.982Z (1 day ago)
- Topics: axios, bycrypt, cloudinary, mailtrap, mongoose, motion, nextjs14, react-datepicker, react-hook-form, react-icons, stripe, zod, zustand
- Language: TypeScript
- Homepage: https://space-booking-psi.vercel.app
- Size: 5.49 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🏠 Uspace - Space Booking Platform
## Overview
**Uspace** is a modern space booking platform where users can browse, search, and rent spaces seamlessly. From category-based searches to secure Stripe payments, Uspace provides a smooth experience for both users and space owners.
---
## 📸 Screenshot
---
## 🛠️ Technologies Used
### **Frontend & Backend**
- Next.js 14
- React.js 18
- Tailwind CSS
- Framer Motion (for animations)
### **State Management**
- Zustand (lightweight global state management)
### **Authentication**
- NextAuth.js with @auth/prisma-adapter
- Social login support
### **Database & ORM**
- MongoDB with Mongoose
- Prisma ORM
### **File & Media Storage**
- Cloudinary (for images & videos)
### **Payment Integration**
- Stripe with webhooks
### **Others**
- Mailtrap (for email confirmations)
- Radix UI components
---
## 🚀 Core Features
✔️ **Space Booking & Management**
- Browse spaces based on categories (e.g., offices, warehouses, studios).
- Search for spaces by name.
- Filter results by price, category, or name.
- View detailed space pages with images, videos, and descriptions.
✔️ **Seamless Booking Process**
- Choose start and end dates for rental.
- Add selected spaces to the cart before checkout.
- Secure Stripe payments with webhook integration.
✔️ **Authentication & User Management**
- Social login for easy access.
- Users can add new spaces, upload images & videos via Cloudinary.
- After login, users can manage their bookings and spaces.
✔️ **Order Confirmation & Email Notifications**
- Upon successful payment, users receive a confirmation email.
- View past orders with payment status.
---
## 📦 Dependencies
### **Production Dependencies**
```json
{
"@auth/prisma-adapter": "^2.7.0",
"@hookform/resolvers": "^3.9.0",
"@prisma/client": "^5.20.0",
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-navigation-menu": "^1.2.1",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-slider": "^1.2.1",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-toast": "^1.2.2",
"@stripe/stripe-js": "^4.8.0",
"axios": "^1.7.7",
"bcrypt": "^5.1.1",
"class-variance-authority": "^0.7.0",
"cloudinary": "^2.5.1",
"clsx": "^2.1.1",
"formidable": "^3.5.1",
"framer-motion": "^11.11.8",
"lucide-react": "^0.452.0",
"mailtrap": "^3.4.0",
"mongodb": "^6.9.0",
"mongoose": "^8.7.2",
"next": "14.2.15",
"next-auth": "^5.0.0-beta.22",
"react": "^18",
"react-confetti": "^6.1.0",
"react-datepicker": "^7.5.0",
"react-dom": "^18",
"react-hook-form": "^7.53.0",
"react-icons": "^5.3.0",
"stripe": "^17.2.1",
"tailwind-merge": "^2.5.3",
"tailwindcss-animate": "^1.0.7",
"zod": "^3.23.8",
"zustand": "^5.0.0-rc.2"
}
```
---
## 🛠️ Getting Started (Run Locally)
### 1️⃣ Clone the Repository
```sh
git clone https://github.com/tapader13/USpace.git
cd USpace
```
### 2️⃣ Install Dependencies
```sh
npm install
```
### 3️⃣ Set Up Environment Variables
Create a `.env` file in the root directory and add the following:
```env
NEXT_PUBLIC_STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret
NEXT_PUBLIC_URl=https://space-booking-psi.vercel.app/
DATABASE_URL=your_mongodb_connection_string
AUTH_GOOGLE_ID=your_google_auth_client_id
AUTH_GOOGLE_SECRET=your_google_auth_secret
NEXT_PUBLIC_SECRET=your_secret_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
NEXT_PUBLIC_STRIPE_PUBLISABLE_KEY=your_stripe_public_key
NEXT_PUBLIC_STRIPE_SECRET_KEY=your_stripe_secret_key
NEXT_PUBLIC_MAIL_TOKEN=your_mailtrap_token
```
### 4️⃣ Run Migrations (For Prisma)
```sh
npx prisma migrate dev --name init
```
### 5️⃣ Start the Development Server
```sh
npm run dev
```
### 6️⃣ Open in Browser
Visit **[http://localhost:3000](http://localhost:3000)** to see the app in action.
---
## 🔗 Live Demo & Resources
🚀 **Live Project:** [Uspace Live](https://space-booking-psi.vercel.app/)
---
## 🤝 Contributing
Contributions are always welcome!
1. Fork the repository
2. Create a new branch (`git checkout -b feature-name`)
3. Commit your changes (`git commit -m 'Add new feature'`)
4. Push to the branch (`git push origin feature-name`)
5. Open a Pull Request
---
⭐ **Like this project?** Give it a star on GitHub!