MASS CONVERTER: We created a calculator that convert mass weight in kilograms based on the gravitational force on each planet in the solar system. A result function is mapping through the list of planets and present the results accordingly, in a smooth scroll using useState, useRef and useEffect hooks.
POST FEED: The celestial feed is where users can share and interact with each other through posted messages.
We have used state management with useState hook for managing message input, error handling and tracking liked messages. For fetching and displaying messages we've used the UseEffect hook.
And to store and retrieve liked messages we’ve used localStorage.
For better user experience, the feed incorporates character count and visual feedback with animations during loading and for scrolling.
CAROUSEL: The planet carousel component creates an interactive carousel of planetary images using the "react-slick" library for smooth transitions and custom arrows for navigation.
We have used import useState, useEffect, Link and styled components to manage state, routing and for the styling.
The carousel is rendered inside the CarouselContainer. Each slide is wrapped in a Link component for navigation to different routes based on the planet name.
ACCESSIBILITY: We have thoughtfully considered colors and contrasts to ensure readability. Our site supports keyboard navigation, allowing users to easy tab between features. The top menu provides easy access to different sections, and we've included breadcrumbs so users can always see their current location and navigate through them as well. These features enhance the overall accessibility and usability of the site.
Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
Backend: https://project-final-45vw.onrender.com Frontend: https://thesolarsystemtravelguide.netlify.app