Added API docs!

The last devlog of this project on FT… After 100 hrs of code, these words are the last words before the final ship. Wrote docs for the API at exo-atlas/docs/API.md in a single file. It consists of regular docs and examples with python and JS examples too! Updates the project dependencies for the last time before shipping the project.

Tasks completed -

• Wrote API Docs (a149b9e)
• Updated deps (a499615)

Added README and fixed the error!

Figured out what was wrong earlier with compare page, it was due to ISR. I have now excluded the compare page from the ISR and also the atlas page which also has search params. Also added README - polished by claude to the project which I should I have changed a lot earlier! The readme has actually become a lot long. The attached images are now from hosted website as the planet compare page is working fine. Also, crossed 100 commits for this project. Working on the API docs now and then we are ready for the ship!!! Take a look at it now -

Tasks completed

• Updated deps (f7c9593)
• Fix compare page and atlas page by excluding them from ISR (87e678c)
• Change icon for the compare with button on planet page (36b452d)
• Add MIT License to the project (4b3fd95)
• Added README to the project (f03a68c)

Added comparision page!

Now you can compare planets on the /compare page or compare a planet with another planet from the planet page from compare with button. It compares the planets on basis of basic metrics and adds a buff or nerf style arrows. The compare page also shows an AI analysis, for that I have created on POST API endpoint which takes the IDs of the both planets. It currently doesnt have caching because it was hard to figure out caching with two planets, and I also might not add it because flavortown is ending soon. Idk, whats the error but the compare page only works on the local dev, not when deployed, sharing images of locally hosted stie. And I think I will need to ship this project by tmr itself. Till then check the compare page -

Tasks completed -

• Create POST API for AI comparision (0d506bf)
• Designed the planets comparision page and added it to navbar (f907249)
• Added compare with button on the planet passport page (821e274)
• Updated the CSS on a few pages (5cc3b64)

Added atmosphere visualization!

Added atmosphere section in the planet page where you can view the planets atmosphere composition (estimated), its breathability, and surface atmospheric pressure. All the atmosphere types and information are just an estimation and pre-loaded. The data is based on chatGPT and google search results. All the information is based on planet type and some other data like - radius, mass, temperature. Also, added atmosphere visuals over the planet. Take a look at it now!

Tasks completed -

• Added atmosphere visual to the planet canvas && Added its composition to planet page (0195962)

Added habitable zone visualizer!

Created a new section on the planet page to visualize the habitable zone range. It was possible with the help of claude and resources like https://arxiv.org/abs/1301.6674 and habitable zone calculations based on Kopparapu et al. (2013). I have more features to add! working on them. Till then take a look at this new section.

Tasks completed -

• Added react to solve error (54a98e4)
• Added habitable zone visualizer to planet page (297610c)

Added keyboard navigation!

Yes now you can finally navigate through your keyboard without leaving it! I have added a couple of shortcuts to navigate the website. And the hints for those shortcuts can be viewed by pressing ? button in the nav bar or typing ? on your keyboard. Keyboard shortcuts include travelling to different page by pressing G + initial of the targetted page, shortcuts also include focusing to search by pressing /, R for random page, enter to open focused planet, arrow keys to navigate atlas, esc to go back to atlas, s to share the page, and b to book mark the planet. Also added a section on the index page which include the link to other pages. Updated deps.

Tasks completed

• Updated deps (1eb34d3)
• Added links to other pages on index page (d8ad0f7)
• Added keyboard navigation (762f31d)

Added dynamic OG images!

Yes now when you share the exoplanet passorport pages you get a unique OG image for each planet. Well, it took long time to complete that but I still feel it to be unpolished and the images are not that good ig. I have created an API endpoint for that at /og/[slug].png and it uses satori and resvg for the image to render. Also, in order to use the geist font on the image I have hosted the geist.ttf geistMono.ttf on the web. I think it doesnt have support for woff2 files which are already present in the assets directory. And then added the props to base layout for OG stuff and added it to meta. Take a look at it. Ik the image seems small but it was my first time designing such an complex image. I had to play around with layouts and styles.

Tasks completed -

• Updated deps && added satori and resvg (020672e)
• Hosted geist fonts (d4d1ae4)
• Created dynamic OG image endpoint (3012cf2)
• Added OG meta tags and its props to the layout (4e10640)
• Passed the planet details to layout for OG meta (d994ff9)

Added another page!

I feel better and better when I add new pages. Added another page the “explore” page which is like shorts / reels kind of thing where you get the snapshots of random planets with brief information and AI Summary. You can either press the next planet button or use keyboard key “r” to go to the next planet, which is basically refresh of SSR page. Also, you can bookmark the planet directly from the explore page! Updated index page canvas size issue, due to which it wasn’t centered and added THREE.js in built with section of footer.

Tasks completed -

• Added THREE.js under built with in footer (62402cf)
• Designed the explore page && Added it to the navbar (389e647)
• Fix canvas size on index page (c091760)

Updated the index page!

Added a new section - EPOD (exoplanet of the day) just like APOD from the project astroDaily. Its like a introductory card of passport of the planet page containing information like habitability, host star, radius, mass, period, temperature, ESI, Distance, and AI summary. It uses a custom supabase function to get planet of the day by asscoiating random dates to random IDs and shuffling that data. Also updated the heading styles on the index page and updated styling. Also, added the new pages link to the footer.

Tasks completed -

• Create supabase function to get the planet of the day (4936d47)
• Add planet of the day section (EPOD) (390a335)
• Add more links to the footer (390a335)
• Update styles and heading style (f121ee7) (4c8924b)

Added planet orbit visualization (again, but now 3D)

Added planet’s orbital view again, but this time its in 3D. I have used THREE.js for this because i feel it a lot easier to use. Its again canvas based on the planet / passport page. You can drag the canvas move the perspective and click on the canvas to pause the simulation. It consists of 3 components - star / sun, the planet, and the orbit. Also, there are stars in the background. Take a look at it here. Also, performed astro check and removed unwanted variables and imports, and simplifies ingest script, and added a custom github actions CI workflow, where it performs bun astro check and bun run lint (bun tsc --noEmit under the hood).

Tasks completed

• Added 3D planet orbit visualization (d3f9bf1)
• Simplify Ingest script (99af6fb)
• Created custom GH actions CI workflow && Fixed it (thrice) (6019b2e)(5f889eb)(1f80f63)(322921b)
• Fixes after bun astro check (13c96d6)(b4135cc)

Added planet radius gap (Fulton gap) diagram!

Added the the third section to science plot page - planet radius gap (Fulton gap). From the Kepler data it can be inferred that the exoplanets barely have radii between 1.5-2 Earth radii (1.5x - 2x times of earth radius). I have created another graph (number of planets vs radii (earth radii)), which helps us to visualize that gap. Though the gap in not very clear on the graph, it is a real discovery from Kepler data. Also, enlarged font for descriptions as it wasnt that very visible.

Tasks completed -

• Add Fulton gap diagram (736420a)

Added Hertzsprung - Russell diagram!

Basically, this again a graph this time, radius (solar radii, log scale) vs temperature (kelvin). And the stars are plotted on the graph. It has bands (O, B, A, F, G, K and M) based on the temperature range. The stars are plotted with colors depending on these bands. And again this time you can hover to see the planets of the respective hovered star. Nothing much really, though I am doing math from 2 days. Working on another chart diagram! Take a look at this -

Tasks completed -

• Added Hertzsprung - Russell graph (b9b4ffa)

Added another page!

Yes! this page is not an ordinary one, its for real scientists and physists. LOL, jk, it is just a page having more scientific knowledge and comparision graphs. I have worked on one of its section that is mass radius graph presentend on a logarithmic scale. I will continue with two another graphs tmr. The mass-radius graph shows all the exo-planets with known mass and radius, along with that, there are three lines - the water-world line and the earth like conditioned line, and pure iron line to give idea about the planets density. All the planets are represented in the form of dots of theit respective type colors. You can hover the planet to see its name and click it to view its passport just like the systems page. Also fixed the fonts issue on chromium based browser due default font weight was missing.

Tasks completed -

• Fixed typo in footer (c2b097b)
• Added font default weight to astro config (f55dc5b)
• Fixed type errors in collections page (f55dc5b)
• Design the mass vs radius graph (log scale) section in new science page (784b52d)
• Fixed pixel font for chromium based browsers (784b52d)

Added AI overview!

Yeah, AI is here too! I dont like AI everywhere though I added it here to add some text to the planet pages. I have used groq AI for this. I created two APIs - narrative AI (What if you lived on the planet) and summary (AI overview). These two sections are added in the planet passport page. And yes it took much time! but the result is not bad. Also created another supabase table which is just a cache of these ai responses generated on every visit. This is just to prevent my groq AI credits. And also to prevent that attacks, I have used the planet id instead of planet name to generate those AI responses. Also, removed ISR from APIs, updates dependencies, simplified HTML in some components.

Tasks completed -

• Updates deps && Added astro check (256daf3)
• Removed ISR from APIs (cc09e6c)
• Simplified HTML structure for SEO (ad37fc7)
• Created groq client (5316c32)
• Create AI response cache table in supabase (31cc645)
• Create AI summary and narrative APIs (ee814a3)
• Added AI overview and “What if I lived there?” section to planet page (b67af1d)
• Updates CSS with keyframes (80af626)

Created a vercel cron job and ISR!

Added two things - first, added Vercel ISR to all the pages and a prerender states to all of the pages. The second things is, created a custom API for vercel cron job and added its config with the cron job! This cron job will check for new planets available and sync the database.

Tasks completed -

• Added prerender states to all pages (801041c)
• Added ISR to pages (86362de)
• Created a custom vercel cron job API (d520f25)
• Added vercel.json config file with cron job (d52403e)

Added footer and bookmarks!

Found out the favicon was from project astroDaily, therefore updates it to that of this project. Also designed the footer (similar to that from project astroDaily) and added the footer to base layout. I just love that footer, thus added to this project also! And fixed some HTML errors from previous commits and prettified it too. Worked on another feature - bookmarks! Now you can bookmark you favorite planet and comeback to collections page to see them! Designed a collections page and added it to navbar. Take a look at the new collections page and bookmarks -

Tasks completed -

• Updated favicon (35a16f5)
• Designed the footer (2b58e79)
• Added footer to base layout (2b58e79)
• Fixed HTML and prettify code (fe3f7ec)
• Added bookmarks to lib (265ae60)
• Designed the bookmarks (collection) page && Added bookmark button to planet page and collections page link to navbar(e22e9d3)

Added the similar planets section!

I worked on the planets similarity by factors such as planet type and habitibily percentage - and created a custom supabase function. And then created a section in planet passport page frontend by calling the similar planets in frontmatter and then mapping it inside HTML. Working on other features! Nothing much to day about. Take a look -

Tasks completd -

• Added get_similar_planets function (0660029)
• Added similar planets section (a38ea53)

Designed another page “systems”!

Worked on another page ‘systems’ which basically contains a network of exoplanet systems show beautifully on canvas - planets as nodes connected with their respective stars! And all those together create a network of systems. It was really tough and could have been possible to made without claude’s assistance. It took too much time just for a canvas! But the result is extremely good. There are three other boxes which show the no. of systems shown, planets shown and the nearest planet system. There are buttons to filter the planets based on their distance but I have to figure it out its working. The default distance is set to 2000 ly and 1000 planets are shown (supabse max rows returned limit).

Task completed -

• Design the systems page (2a5092d)

Designed the timeline page!

Yet another big devlog! Worked on the new timeline page and it has got some cool look! It consists of 2 sections - discoveries per year, where you can filter it by discovery method and view the year-wise discovery graph. Also, you can click any column to list the planets discovered in that particular year. Another section consists of planets disovered per discovery method shown in a bar chart. Take a look at newly added things -

Task completed -

• Updated project dependencies (a67ce01)
• Fixed tailwind css on several pages/components (51a7d93)
• Added the new timeline page (36036b8)

Added planet location map!

This is definitely the biggest devlog… Worked on a big thing not that big actually. Added the planet location section where you can see the planet’s location on the canvas like a map with co-ordinates. No words, just take a look at it. Also, updated the icons so that it can be color dynamic or change the color depending on the parent element and fixed the icon component where the icon path was not resolved. And added the icons to the index page and the atlas page!

Task completed -

• Updated icons with fill as current color (3fde803)
• Fix icon path in the icons.astro component (99cb0d1)
• Added icons to the index and planet page (e3974b7)
• Designed the sky map section for the planet page (0d34a67)

Added host star section!

Well completed the host star section but still there are bugs that need to be resolved. However UI is completed and here its is. It has the canvas which shows the host star with a different color with respect to its temperature! And also, it has information like spectral type, temperature, radius and name ofcourse. Also fixed some styling on the page! There are a lot of features in my mind that I just feel to add everthing together, but it will become a big devlog. Nvm, will devlog after every new feature!

Task completed -

• Add host star section && Change css to tailwind (dceee05)

Added orbit period comparision!

Added another section in the planet page, where you can see how much time 1 orbit takes, its speed compared to earth, and your age there, along with a canvas which shows comparision between the ornits of the earth and the planet by plotting them inside an orbit around the star. Also, deployed the website on vercel and fixed the padding on the base layout page. Worked on the a new section but it has errors, so showing only the working section. Will soon update about the another section in the next devlog.

Tasks completed -

• Deploy to vercel (c1a2d82)
• Fix padding on base layout (5d686a0)
• Add orbit section to planet page (7ba5746)

Designed the planet page!

Designed the planet page or the main page that will caontain all the details about the planet! I have added everything I could think of. It contains habitability, mass, distance, radius, ESI Score, and discovery year. It also has the size comparision between earth, neptune, jupiter and the exo-planet itself. And also, a light transit curve animations is there! And the bonus includes your weight calculator on the planet. The gravity is calculated from the mass and radius of the exo-planet and if not there it shows estimation. Also fixed the planet card, habitability percent width showing full and changed rocky plant type color. Take a look at the page -

Tasks completed -

• Change rocky planet type color && Fix habitability % width (b349ca7)
• Design the planet page (ae190d6)

Worked on Atlas!

Working on the atlas page showed me, where I stand. Got tired working on the Atlas page, moreover the search wasnt working on the atlas page, and I thought that I did something wrong. I tried to figure out the cause why was the atlas page not working. And after checking supabase, API, I got no clue. Therefore, I asked claude and I came to know that my API was static thats why it wasnt picking up the params from the URL. And thus, the search page also malfunctioned. However, I also came to know that there was some error on the ESI score due to which even unknown planets were shown with 100% scores. Thus fixed that so that only planets with known types get a proper ESI score.

Tasks completed -

• Fix API; add SSR to the planets API (f74b6f0)
• Design the Atlas page (a492e71)
• Changed planet type to any with highest habitability % (9cb9c4f)

Started with the UI!

I have started with main page page of the website, the index page. And I think looks cool. I am completly inspired by the vercel’s Geist design system and I think the page also looks cool. For now it consists of hero section with two buttons and another section consisting of three top planets (they are preview cards just like the preview APOD cards from my astroDaily project) as same as earth. And also, designed the navbar completely inspired from astroDaily project. Working on the atlas page now!

Tasks completed -

• Add vercel typography to css (c6c2ca2)
• Design the navbar (de41a1c)
• Added navbar and props for title and description to base layout (79797e5)
• Design the index page and hero section (fb9bbba)
• Design the planet card (f2de0ac)

Created supabase functions

I have much time today to work on the project, and I have started by creating 3 new supabase/sql functions - get_planet_by_slug, get_planets, and get_random_planet. Then I created a new API endpoint to search for the planets by using these supabase functions. And then I moved on to UI, work in progress and will be updating it soon! Found 1 typo inside astro config-astro.config.mjs and also updated the dependencies and upgraded to latest bun version.

Tasks completed -

• Create supabase functions (5464df5)
• Add search planets API (28cc457)
• Update dependencies && upgrade bun (b352585)
• Fix typo inside astro config file (229c205)

Add theme, assets, and layout

Today I configured the tailwindcss configuration file for the custom theme and also added the color, and font varaibles to the global css file. Also, added the Geist fonts - regular, monospace, and pixel using the new Astro v6 fonts API! All the font files are in the src/assets/fonts. And also added the Geist icon set along with that. All tge icon files are stored under the src/assets/icons directory, and created a custom astro components for using that icons. And also created the base astro layout.

Tasks completed -

• Add tailwind config and custom tailwind theme (d3e619c)
• Add geist fonts (d3e619c)
• Add geist icons and its astro component (bf105d6)
• Add astro base layout (e41c8b2)

Designed the logo banner and UI design system

I designed the logo/favicon for the website and the banner/og image in figma. Also worked on the UI design system putrely inspired by Vercel and my another project astroDaily. It consists of the same fonts as verecl - the Geist font and has the same color system as of vercel. Here is the newly UI design system.

Tasks completed -

• Designed the logo/favicon and banner/og image (27d4bbc)
• Decided the UI system and color palette

Started the project!

Started with the new project - exoplanet collection. It will be a webpage with the collection and information about various exoplanets. I have kept the tech stack simple and fast = Astro JS + Bun + Tailwind + Supabase. Started with creation of the project, then added typescript and tailwindcss. Afterwards, setup database in supabse, added supabase libraries, and created a re-usable supabase client (both public and admin). Then wrote a custom script for ingesting exoplanet data from the NASA exo-planet archive to the newly built supabase database, in which I found a typo in the database schema and fixed that. Also created a custom github workfow for remote access.

Tasks completed today -

• Initialize astro JS project (5c997a1)
• Add typescript + tailwindcss (0bdb92c)
• Create supabase table and schema && Add supabase && Create supabase client (6bd9824) (613ec3a)
• Create custom script for ingesting exoplanet data to supabase database (a8ce25f)
• Create a manual database ingestion workflow trigger on github actions (a516557)