Astroma is an interactive web application that visualizes planetary information with stunning visuals. This project was created to enhance web development skills and provide an engaging way to learn about the planets in our solar system.
- Video Background: The homepage features a stunning space-themed video background to create an immersive user experience.
- Detailed View: Click on any planet to get detailed information, including its background and characteristics.
- Interactive Navigation: Use arrow buttons to navigate through different planets seamlessly.
- Dynamic Background: The background color changes based on the selected planet, enhancing the visual experience.
- Explore the Universe: View a gallery of breathtaking cosmic images, showcasing nebulae, galaxies, and other celestial bodies.
- Image Details: Click on images to get detailed information about each cosmic phenomenon.
- High-Quality Visuals: Enjoy high-resolution images sourced from NASA.
- Plan Your Journey: Discover optimal stargazing routes based on your location and current astronomical events.
- Interactive Map: Use an interactive map to see the best spots for stargazing in your area.
- Event Calendar: Stay updated with upcoming astronomical events of the Sun and the Moon.
- Fully Responsive: The website is designed to be completely responsive, ensuring a seamless experience across all devices, including desktops, tablets, and mobile phones.
- React: A JavaScript library for building user interfaces.
- Vite: A build tool that provides a faster and leaner development experience.
- Tailwind CSS: A utility-first CSS framework for rapid UI development.
- Vercel: A cloud platform for static sites and serverless functions, providing seamless deployment and scaling of web applications.
To run the project in your local environment, follow these steps:
- Clone the repository to your local machine.
- Run
npm installin the project directory to install the required dependencies. - Run
npm run startto get the project started. - Open http://localhost:5173 (or the address shown in your console) in your web browser to view the app.
- NASA API: Used to fetch images for the Cosmic gallery.
- OpenWeather API: Utilized for fetching weather data on different planets (if applicable).
- Astronomy API: Utilized for data for astronomical events and star charts for different Constellations.
- The Solar System OpenData API: Utilized for getting details like density, volume, etc of different planets.
- Wikipedia API: Utilized for getting summaries on different planets.
- Geolocation API: Utilized for getting the latitude and longitude of the user's location for fetching astronomical events data.
- Open Elevation API: Used for getting the elevation of the user from latitude and longitude.
During the development of Astroma, several key skills and concepts were learned and implemented:
- React and State Management: Mastered the use of React hooks like
useStateanduseEffectfor managing state and side effects. - RTK query: Leveraged the RTK query to manage data fetching across the application.
- Styling with Tailwind CSS: Gained proficiency in using Tailwind CSS for rapid and efficient styling.
- Video Integration: Integrated a video background using HTML5 video elements, ensuring cross-browser compatibility.
- Homepage Video: The background video on the homepage is sourced from Pinterest.
- Enhanced Details: Add more detailed information and images for each planet.
- Interactive Features: Implement additional interactive features such as 3D models of planets.
- Dark Mode: Introduce a dark mode toggle for a better user experience in low-light environments.
- Extended Navigation: Add more navigation options, such as mouse wheel navigation for easier planet switching.
Astroma represents a blend of cutting-edge technology and a passion for space exploration, offering users an immersive journey through our solar system and beyond. With ongoing improvements and new features planned, Astroma continues to evolve as a captivating educational tool and a visual delight for astronomy enthusiasts.