Live Demo: Tripster on Vercel
Tripster is a destination booking web application built with Next.js and React.js. The app provides accommodation listings based on search inputs like date range, number of guests, and location. Enhanced by Tailwind CSS, the application offers a robust, visually appealing, and stable UI that's responsive across devices. Continue reading to learn more about its features and the technologies involved.
Visit the live demo here: Tripster on Vercel.
- User Authentication: Authenticate via Google, GitHub, or Discord.
- Dynamic Searching: Listings based on date range, guests, and location.
- Payment Processing: Integrated Stripe for secure transactions.
- Real-time Mapping: Uses Mapbox for real-time location mapping.
- Responsive Design: Adapts to various device aspect ratios.
- Next.js: For server-side rendering and robustness.
- React.js: For building the user interface.
- Stripe: For payment processing and verification.
- Rapid API: Data sourcing based on search input.
- Mapbox: Real-time mapping and location marking with react-map-gl.
- JSONKeeper: Fallback data storage for API call exhaustion.
- Imgur: Image asset management.
- next-auth: User authentication.
- Heroicons: SVG icon rendering.
- TailwindCSS: Styling for performance and speed.
- Vercel: Hosting and custom domain.
To run this project locally:
-
Clone the repository:
git clone https://github.com/your-username/Tripster.git
-
Navigate to the project directory:
cd Tripster -
Install dependencies:
npm install
-
Set up environment variables:
# .env file NEXT_PUBLIC_STRIPE_KEY=your_stripe_key -
Run the development server:
npm run dev
Open http://localhost:3000 with your browser to see the app.