Facilitated an easy-to-use drag and drop itinerary planner, allowing users to visually organize their travel schedule.
1.Trello-Inspired Interface: Familiar drag-and-drop functionality for intuitive travel scheduling.
2.AI-Driven Recommendations: Provides AI-generated travel suggestions for travel planning.
3.Share Trips with Other Users: Easily share your trips with friends or family via generated links.
The homepage of the travel planning platform, providing users with an overview and navigation options.
Displays all saved trips, allowing users to view, select their trips.
The interface for creating a new trip, allowing users to input basic details and start organizing.
The system automatically generates day lists for the trip after the initial trip creation.
The user can update information on individual trip cards such as notes.
Users can upload or select a cover image for their trip to personalize it.
Allows users to mark a trip as completed or add color tags for better organization.
Allows users to edit the general information for a trip, including trip title, dates, and details.
Users can ask AI for travel recommendations to assist in planning their trip.
The platform generates trip cards based on AI-generated suggestions, simplifying the planning process.
Users can share a trip link with others through email for easy collaboration.
The drag-and-drop interface allows users to rearrange entire day lists within their trip itinerary.
Users can drag and rearrange individual trip cards to adjust their travel schedule.
Users can delete a trip, removing it from their saved list.
Users can restore a previously deleted trip from the archive.
The registration page for creating a new account on the platform.
The platform supports two-factor authentication (2FA) via email for added security.
Users can request a password change through email verification to update their credentials.
The interface for resetting a forgotten password through email verification.
Users can update their personal information, such as preferences.
The platform supports toggling between light and dark modes for user preference.
Create a .env file in the root directory and add the following variables:
NEXT_PUBLIC_APP_URL="http://localhost:3000" or "YOUR_NEXT_PUBLIC_APP_URL"
AUTH_SECRET="YOUR_AUTH_SECRET"
MONGODB_URI="YOUR_MONGODB_URI"
GOOGLE_CLIENT_ID="YOUR_GOOGLE_CLIENT_ID"
GOOGLE_CLIENT_SECRET="YOUR_GOOGLE_CLIENT_SECRET"
OPENAI_API_KEY=="YOUR_OPENAI_API_KEY"
TOKEN_SECRET="YOUR_TOKEN_SECRET"
EMAIL_USER="YOUR_EMAIL_USER"
EMAIL_PASSWORD="YOUR_EMAIL_PASSWORD"
AWS_APP_ACCESS_KEY="YOUR_AWS_APP_ACCESS_KEY"
AWS_SECRET_ACCESS_KEY="YOUR_AWS_SECRET_ACCESS_KEY"
AWS_BUCKET_NAME="YOUR_AWS_BUCKET_NAME"
AWS_BUCKET_REGION="YOUR_AWS_BUCKET_REGION"GOOGLE_CLIENT_ID & GOOGLE_CLIENT_SECRET
-
Navigate to https://console.cloud.google.com .
-
Create a new project.
-
Head over to APIs & Services => Credentials.
-
Click on CREATE CREDENTIALS => OAuth client ID.
-
Choose the Web application.
-
Add to Authorized JavaScript origins: http://localhost:3000 .
-
Add to Authorized redirect URIs: http://localhost:3000/api/auth/callback/google.
-
Finish by going to APIs & Services => OAuth consent screen and publishing the app.
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.