Trip Secretary is a trip-planning app that helps you organize your travels down to the hour, track expenses, and manage your itinerary visually — built using React, Next.js, Pragmatic Drag-n-Drop, and many other cool technologies.
Try it here: 🔗 Trip Secretary
Traveling is exhilarating, but staying organized can be challenging. That's why I created Trip Secretary — a tool designed to help you squeeze every moment out of your travels.
I realized that traditional calendars just don't cut it when it comes to planning the perfect trip. I like to maximize my time (like exploring all of Prague in just two days!), and for that, I need to plan each minute meticulously. That's where Trip Secretary comes in.
With this app, I can clearly visualize everything I want to do, hour by hour, in a beautifully organized way. Plus, I can keep track of the costs associated with each activity, giving me a clear forecast of my expenses.
I’ve already tested this during my recent trip to Europe, and it was a game-changer! I believe it can add value to other travelers too.
- Deploy into Vercel
- Automatic testing through GitHub actions
- Compromise creation through clicking
- Use pragmatic drag-n-drop to manage compromises dragging and resizing
- Use jotai to manage state
- Change compromises for different dates
- Store compromises at appwrite
- Oauth2 login through appwrite
- Store in IndexedDB when not logged in
- Mobile-friendly data drawer to add compromises
- Delete compromises
- Login/Logout through dropdown menu
- SSR initial data fetching (if the user is logged in)
- Edit compromises
- See the whole compromise description
- Make the resize clearer by adding an arrow to indicate the resizable area
- Use react query to change dates (using cancellation token in case of rapid multiple changes)
- Date on the route
- Improve the date picker visuals (maybe use shadcn Datepicker?)
- Add loading feedback
- Add creating an item feedback
- Improve CSS animations
- Exhibit total amount of costs per day
- Get user's photo from Google Oauth2?
- Create a DockerFile
- Create a MakeFile
- Add a retry routine for appwrite
- Restrict user on appwrite to edit only his own registers
- Add a delete confirmation option
- Add an erase my data option
To run Trip Secretary, you’ll need the following:
- A working installation of Node.js.
Then, you can run the following commands on your terminal:
# Install Dependencies:
npm install
# Start the Development Server:
npm run dev
# The application will be available at http://localhost:3000.
# Run Tests:
npm run test| Category | Technology |
|---|---|
| 🖱️ User Interactions | Pragmatic Drag-n-Drop |
| 🌐 JavaScript Library | React |
| 🌐 Web Framework | Next.js |
| 📦 Programming Language | TypeScript |
| ⚙️ State Management | Jotai |
| 🎨 Styling | Tailwind CSS, Shadcn |
| 🖼️ Animations | Auto Animate |
| 🚀 Deployment | Vercel |
| 📂 Data Storage | IndexedDB, Appwrite |
| 💻 Testing | Jest, GitHub Actions |
| 🔧 Code Formatting | Prettier |