Panorama browser

Hey everyone! Today I am showcasing a panorama browser I built using React and JavaScript.

Github
Replit
Live demo

How it works

The panorama viewer is easily configurable. If you edit…

src/shared/panoramas.js

… you can easily change what panoramas are displayed.

    {
        title: "Ampleben Sternenhimmel",
        panorama: 'https://upload.wikimedia.org/wikipedia/commons/0/04/Ampleben_Sternenhimmel_Panorama.jpg',
        slug: 'Ampleben-Sternenhimmel'
    }

The title entered for the Panorama is what shows up in the button name and title.

I dubbed two components, Navigation and Panorama. The state is the spaceId, which keeps track of which panorama is currently selected by the user. (The other state is the input itself, but that does not change based on user input).

The panorama itself is generated using Pannellum. The Pannellum project has an iframe that’s really simple to use, so I opted to do that rather than make it a dependency of the project.

Known issues

  • Adding more than 3 or so Panoramas causes the buttons to squish up.
  • The slug property is not yet implemented.

Thanks for reading everyone! Check it out, let me know what you think, and feel free to leave feedback! The FreeCodeCamp curriculum was incredibly helpful for this project, and I seriously can’t say enough good things about this site :smiley:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.