itinerarey

Itinerarey is complete! The last thing that I needed to get done was the recap page, which takes all the data in your localstorage and displays it for you! I had to rewrite how the flights and hotels are displayed to show the booking links, but overall it was pretty simple.

The main thing that I am proud of is the budget tracker, which shows the prices for everything, including how much is leftover in the budget! This is done with some pretty simple math, but it definitely ties the project together.

Lastly, the user can save a copy of this page to their computer. They can then also reset their localstorage to create a brand new trip!

Lastly, I got the readme and license done (id take a look if I were you!), and finished deploying everything on vercel. Overall, I am really happy with how Itinerarey came out. I learned a lot about web scrapping and hosting websites from this project, which I hope will come in handy in the future!

Thank you all for the support, stardance has been incredible! feel free to dm me in slack! - nate

The activities portion of the website is done! I did some research, and it turns out that the best way for me to find information on local events is AI!

The way it works is by using Google Gemini along with Zod, which allows me to format my API requests to return in JSON. Since it has the same information each time, I can then just treat it as a regular API call. However, I might change it and put this on the backend to try to hide the API key.

Anyways, we are almost at the end! The last major portion of the project is the recap page, where I plan to show all info on the trip, let users download, and maybe more! Today went pretty well, and I am excited to finally get this thing done.

So… quick update, I tore my ACL! havent really been able to do much since, but today I sat down and got work done.

Mainly, I got the hotels done! It works pretty similar to flights system, where the user is prompted with a list, and they choose whichever they want. Now, if you remember, I have been struggling with finding a hotel API, since amadeus shut down. Originally, the plan was rapidAPI, but the rate limits are horrid for that.

After some very intense googling, I found omkar.cloud! They have a bunch of web scrappers with a 200/month limit, so their booking.com API works perfectly. I genuinely was considering dropping the project from this, and I am so happy I found something that worked.

Now, the future. There is like 10 days left in stardance, and I need to do the activities, final page, and fix deployment. Activities shouldn’t be that dificult, my plan is to use gemini and prompt it for activity ideas, and then format it to look cool? Im going to still do some research.

Now, the main issue is deployment. Github pages doesn’t really support having a .env, so I tried switching to vercel. However, I now need to get localstorage (which I had to use as the cookie got too big lol) working on that, plus the flight API and everything else.

Did I get work done on the hotels part? No!

BUT, I did some very needed work on the flight system so that it should work in general. The main issue was that there was no way to convert from cities to airport codes, but I sat down and actually got it done.

When the user enters a city and goes to the flight screen, a modal now appears. In the background, a function runs that gets the coordinates of the city, and then creates a 100 km circle around the location, returning all airports inside of it!

Originally, the plan was to use nominatim for the geolocating, since it’s free, open source, and the goat, but I may have gotten IP banned for having it run 60 times a second for a good few minutes. (This is around 60 times the amount I am supposed to do it). I forgot to remove a variable from a dependency array. ANYWAYS, I used Mapbox instead! I have some experience with it, and its free tier is pretty comprehensive.

Once the locations show on the modal, they choose which ones, it reloads to show departures, and then the same system as before applies! This works SO much better, and I’m really proud of the system.

So, I got some work done on itinerarey since.

Mainly, I’ve been working on error trapping and trying to find a hotel’s API. Firstly, I am trying to use airport-data-js to convert city names to airports, but it returns the incorrect values usually.

Otherwise, I got the base for the hotel page done. It’s going to look pretty similar to the flights, just with different information. Currently, I need to find an API that works for hotels, but it’s going to be a bit of a struggle. I tried fast-hotels, but they are no longer maintained, or at least the current version broke on me.

Wish me luck!

The flight system is complete!

To reiterate how it works, once you put in a date, a render server with an API is called that uses Python to scrape Google Flights and return (hopefully) accurate flight data.

Then, a user chooses the flight they want, it gets saved to the cookie, and it does the same actions for the return flight. The main issue I had with this was getting to swap between departure and returns, since it required some refactoring of the code. It wasn’t anything too bad, though.

Next up is going to be finding a hotel API. This is going to be probably just as annoying as with the flights, but there is only one way to find out. That’ll be tomorrow, though; I am so tired right now lol.

Lastly, I am writing this 3 minutes before my time as a Stardance Ambassador ends. I want to thank the team for letting me take this role; Nay-nay and Alex for their help; and everyone whom I’ve interacted with. While the role is done, I’m going to finish this project!

Now, the flights will actually show up in the website! Using the API, I get an array, and then each flight is put into a custom object that allows it to be displayed!
Each option includes basic info such as airline, price, legs, locations, timings, and more! Now that it is styled, the next goal is to save flights to the cookie, and than rerun the same process for the return flight! Overall, I think it looks pretty good!

This time is fully my bad, I sort of (100%) forgot about this. ANYWAYS, I got some of the biggest progress done yet.

Firstly, I got trips to save as cookies in your browser, since its an easier way for me to store data across the website. dont worry, im not stealing your data or anything lol.

Then, I did some research (with help from Claude) and found fast-flights, a Python library that is basically a Google Flights scraper, so it works perfectly. Except it’s a Python library… on a React website. So, I created a seperate repo that contains an API that requests the library and hosted it on render.com.

One note is that the links supplied reroute to google flights, so users will have to be careful with choosing correctly. Sadly, theres really no good free options for a flight API (literally everyone shut theirs down lol).

Lastly, I connected it all together by writing the base code for querying the API and getting the data back. I do need to actually format it, modify it to work with my data, and display it. But, its a good stopping point for now.
By next time, I want to have the flights page looking good, and my API to be more polished!

So… its been a minute!

I’ve been out of state doing an engineering program at ND for the past few weeks, and I am FINALLY back home!

So, here’s what I got done today!

I finished the layout (for now) on for the planning page. For now, you put in the departure/arrival, number of people, dates, and overall budgets.

The worst part of getting it to work was the date picker. I spent like 2 hours researching different date-range pickers and trying them out, such as react aria, react-date-range, and more.

Eventually, I settled on cally since its lightweight, easy to customize, and didn’t require me to spend 3 hours making it work!

I also created a new input type to shrink the file size down.

For the future, I plan to get data to actually save in the app, and then start looking for a flights API.

The API is going to be an issue. There is really not a lot of choices for a free and large-scale API for what I want. But, its the internet. Theres gotta be something!

the website thats published isn’t updated yet, since I have some code that needs to be implemented before I can redeploy.

I started to get some work done on the planning settings! Mainly, I need to track budgets, dates, and what the user actually wants to do and spend money on. The main issue I am currently having is making the date system work. I am going to do more research, though!

The home page is completely done! I spent around an hour adding in all of the other info, mainly about how the program works. I also spent a decent amount of time redoing the file structure of the website, just so everything is more organized.

Now, I have to find the APIs I need. Google Flights doesn’t have one, so I am going to need to do some deep research.

Been on vacation so progress been slow but here’s what I got done!

Mainly, the search bar is done! I haven’t been able to program my custom algorithm yet, so right now it just links to google maps. I tried to mimic websites like Kayak and Google Earth, and I think its pretty decent.

The main issue I had was with the website crashing when clicking the search bar. ThreeJS couldnt handle the pointer event (it doesnt really make sense), but with changing the z-order and adding a LOT of e.stoppropagation() fixed it.

Overall, good progress, and next post I want to get the home page done!

Two major things for today: I fixed responsiveness, so it looks better on small screens. Also, I started work on the search bar. I have to style it, but its coming along well!

shoutout to my friends @ fallout, wish i was allowed to come with! enjoy!

Card system works! When you click on a point (I added more), with around 3 per continent except Australia, a popup with basic info, a photo, and a button shows up. The button will eventually go to the itinerary algorithim, but for now just links to google maps.

I have to make it responsive, but tomorrow I will (hopefully) finish the base page.

check it out here!

Itinerarey (get it?) is going to be a website where you can put in a plan for a trip and get a full detailed list of what you can do, taking into consideration price, dates, and suggested ideas.

I got this idea while waiting at EWR for 3 hours before my flight got cancelled, lol. I was supposed to go to Atlanta, and I would have had a free day by myself. If I had this, I could have figured out what to do.

The plan is to take data from APIs to get flights, hotels, and other stuff, and combine it with AI to get a full list of what to do!

But, so far, all I got done is the start of the hero page. I want to have a globe spinning in the BG with points that can pop up some ideas, which I got done using globe.gl.

The points are not coded in yet to pop up, but that’ll be later.