By
@jermybiju
A daily astronomy image viewer that pulls from NASA's APOD API. Shows NASA's picture of the day, has a date picker, random button, and a favorites system saved to localStorage.
Built Cosmic Lens, a NASA APOD viewer. fetches NASA’s daily astronomy image, lets you browse any past image from June 1995 onwards, and has favorites saved to localstorage.
What was challenging: getting Vite’s .env setup to work for the API key, a timezone bug in the prev or next nav (toISOString uses UTC so my IST dates were off by a day) and a CORS issue with a download button I ended up removing.
What I’m most proud of is it all works .first project I’ve shipped with a real build system and API integration
To test: just open the live link. Try the random button, arrow keys to navigate, and click the star to save your favorites. no login needed.
1h 3m 33s logged
added a few more things. prev or next day buttons so i can jump between images without the date picker every time. also keyboard navigation with left or right arrows.
added a share button that copies the url with the date so sending someone a link shows the same image. took a bit to figure out URL SearchParams for reading the date back.
also added my contact details (github, email, instagram) to the footer and readme.
had a timezone bug with prev or next , they were jumping 2 days back because toISOString() uses UTC and im in IST. fixed it with a local date helper and noon time.
tried a download button but CORS blocked it. removed it instead of shipping something broken.
its completed now
3h 22m 3s logged
I worked on the css today, I decided to go with a black background and purple accents since the site’s theme is space. I went with color names such as mediumpurple and gold for the accents instead of hex codes, easier to remember.
I spent a lot of time working on the starfield, in the end, i decide to use sevral radial gradients to simulate stars and a twinkle animation.
used google fonts for the space vibe ,orbitron for titles and space grotesk for body.
made it responsive too, buttons stack on mobile. also had to add maxheight and objectfit ,contain on the image because some nasa pics are larg and would break the layout
3h 8m 49s logged
I have started the mission today. Vite setup was complicated because I have never used anything other than raw HTML, but I managed to configure it according to the documentation. I chose the vanilla plus javascript option.
The .env file configuration was confusing and took me forever to complete. First, I tried putting the API key in main.js, but then I realized that it has to be a .env file that has to have VITE_ at the beginning of the variable name, or it will not work. It took me around 20 minutes to realize that I was putting the file in the wrong directory, so it always said undefined. api works now. just console logged the data to check
