Space Tourism Website by JoshDev using Next TSX, and Tailwind CSS
Design comparison
Solution retrospective
What am I proud of?
I’m proud of how the space tourism website turned out. One of the highlights for me was successfully implementing a responsive design that looks great on both desktop and mobile devices. This was my first time using Tailwind CSS extensively, and it made styling so much more efficient and enjoyable. Additionally, I managed to integrate interactive elements like the destination selection and crew details, which enhanced the user experience significantly.
What would I do differently next time?
Next time, I would focus more on optimizing the website's performance. While the site functions well, I realized some images and assets could be better optimized to improve load times. Lastly, I would spend more time on accessibility to ensure the website is usable for everyone, including those with disabilities.
What challenges did you encounter, and how did you overcome them?One of the significant challenges I faced while building the space tourism website was managing the state and navigation in Next.js.
To overcome this, I turned to Bing Chat AI for assistance. The AI provided clear and concise guidance on how to implement state management using React hooks and context. It also helped me understand how to set up dynamic routing in Next.js, which was crucial for navigating between different pages of the website. Additionally, Bing Chat AI offered valuable tips on optimizing the performance and accessibility of the site, which greatly improved the overall user experience.
Thanks to the support from Bing Chat AI, I was able to resolve these challenges efficiently and enhance my understanding of advanced React and Next.js concepts.
What specific areas of your project would you like help with?Navbar active view
Community feedback
- @WlfernandoPosted about 2 months ago
I see you have commented the NavBar in the layout, I recommend to erase all other NavBars and decomment that in the layout. You should fetch the value in URL with usePathname to know what link is active. Here is the sheet: https://nextjs.org/docs/app/api-reference/components/link#checking-active-links
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord