TRIPSYNC is a vacation planning platform developed with React, Typescript, Next.js, NextUI, ShadCN/UI, Tailwind CSS, Prisma, PostgreSQL, and Vercel. Plan and organize unforgettable vacations with TRIPSYNC. Your go-to vacation planner for effortless holiday management, collaboration with participants, and PDF itinerary generation. Explore our features for a seamless and memorable trip!
- To see a brief demonstration of the project, be sure to visit my YouTube video where I showcase all the project functionalities.
- User Interface, Navigation, and Design
- Through the combination of React + Tailwind + NextUI + ShadCN/UI, a modern, attractive, intuitive, and fully responsive interface was created.
- Custom Vacation Plans Creation
- Allows the creation of custom vacation plans where users can input various types of information such as name, title, description, countries to visit, start/end dates, and participant names.
- Data Validation
- Input data validation is done using React Hook Form + Zod.
- Login with Clerk
- Simplified registration and login integration using the system provided by Clerk.
- To enjoy the incredible TRIPSYNC platform, simply click here
- Along with these technologies, the following libraries were also used: Clerk, Date-fns, React Country Flag, React Date Picker, React Hot Toasts, React Icons, React to Print, React PDF, and Uuid.
To run the front-end application locally, follow these steps:
- Clone the repository to your local machine using the following command:
git clone https://github.com/gui-bus/TRIPSYNC.git
- Navigate to the project directory:
cd TRIPSYNC
- Install the dependencies:
npm install
- Create a .env file and add the following information:
DATABASE_URL=[ADD YOUR DATABASE URL] NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=[ADD YOUR CLERK KEY] CLERK_SECRET_KEY=[ADD YOUR CLERK SECRET KEY] NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/ NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
- Once the installation is complete, you can run the application using the following command:
npm run dev
- Open your web browser and navigate to localhost