Skip to content
Submitted over 1 year ago

SPACE TOURISM VITE REACT AND SCSS

Caleb Sim•410
@CodeLamp168
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Space tourism multi-page website
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

HELLO THERE

This would be the fifth time I had created a multi page website using Vite REACT and the second time creating this challenge project from scratch

I had spent about a week building and debugging.

Challenge Faced:

  • The hardest part here would be deploying the react app to the gh-pages. Took a while but finally figured out a solution.

  • Did my best to manage the scss for each website and making it as "optimized" and "clean" as it could be. Although personally Tailwind would be more preferable

Things I learned

  • How to display a REACT app on a gh-pages.
  • How REACT projects display images and assets in gh-pages and what needs to be fixed in your code for it to display

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted about 1 year ago

    Hey @CodeLamp168, here is some feedback on your submission for this challenge. For this feedback, I'll only focus on three (3) improvements.

    • Your src folder lacks proper structure and organization, I highly recommend reorganizing your folder. Organizing your React src folder is essential for maintaining a clean and maintainable codebase as your application grows. A well-organized folder structure makes it easier for you and your team to find and manage files efficiently.
    • To better improve the navigation system of your React app, I would highly recommend using routes to all the different pages your app has.

    So something like this:

    function App() {
  return (
        <BrowserRouter>
        <Routes>
          <Route path="/" element={Home} />
          <Route path="/destinations" element={Destinations} />
          <Route path="/crew" element={Crew} />
          <Route path="/tech" element={Tech} />
        </Routes>
        <BrowserRouter>
  );
}
    • For navigation component, instead of doing this <NavItem navNum="00" navKey="home" NavSite="HOME" /> you can mainstream the code and use either <Link to="/">Home</Link> or <NavLink to="/">Home</Link>.
    0
  • Hein Zar Ne•280
    @HeinZarNePosted over 1 year ago

    We need active state in Technology page and also in Navbar

    0
    Caleb Sim•410
    @CodeLamp168Posted over 1 year ago

    @HeinZarNe

    Completely missed that, thank you. It should show now.

    0

Please log in to post a comment

Log in with GitHub

Join 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