Frontend Mentor - Scoot website

Table of contents

• Overview
  • Built with
  • Screenshot
• My process
  • What I learned
  • Useful resources

Overview

Users should be able to:

• View the optimal layout for each page depending on their device's screen size
• See hover states for all interactive elements throughout the site
• Switch between light and dark theme

Built with

Screenshot

My process

What I learned

1. How to use React Router

I explored the documentation of React Router in order to create a seamless web application with the ability to navigate between pages without the need for page refresh.

While the documentation was well-written, I encountered some issues in my application that didn't behave as expected. To overcome these challenges, I resorted to watching YouTube tutorials and reading articles to achieve the desired outcome. Many of the articles and some of the YouTube videos focused on React Router v5, which initially confused me. However, as I researched deeper, everything began to make more sense.

There are two ways we can create Browser Routes:

A.With the object approach, the one that this project was built with

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: 'about',
        element: <About />,
      },
      {
        path: 'locations',
        element: <Location />,
      },
    ],
  },
]);

B. If you prefer to create your Routes as JSX instead of objects, you can do that with the help of 'createRoutesFromElements'

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<App />}>
      <Route path="about" element={<About />} />
      <Route path="dashboard" element={<Dashboard />} />
    </Route>
  )
);

2. Building reusable components to reduce the number of files needed

3. How to use the Framer Motion Library to add animation into my project

4.How to use the Theme Provider from styled components to enable theme switching

First you need to wrap all the components that are going to be needing the theming support, just wrap the top parent element and all children are going to have access to the Theme Provider as well.

In my project I created two objects light and dark, that is where I saved the colors for each theme.

Example:

const light = {
  name: 'light-theme',
  colors: {
    body: '#fff',
    primary: '#FCB72B',
    background: '#E5ECF4',
  },
};

const dark = {
  name: 'dark-theme',
  colors: {
    body: '#001E3D',
    primary: '#46C2CB',
    background: '#21325E',
  },
};

Then you need to wrap your App with the Theme Provide, but you need to provide a theme attribute which is the one initially applied.

<ThemeProvider theme={light}>
  <App />
</ThemeProvider>

Useful resources

• Styled components Docs - Getting familiar with the documentation of styled components.
  
• Build a React theme switcher app with styled-components - This step by step guide helped me implement my theme switcher function and understand how it works.
  
• React router Docs - Getting familiar with the documentation of react router. There are so many outdated reasources online, where most of the features are deprecated
  
• How to Deploy Your Vite React App to GitHub Pages - I had troubles uploading my project on Github, since this was the first time I used the react router, and there were some additional configuration to be taken into account. This was a very useful article that helped upload my project properly.
  
• Framer motion Docs - Getting familiar with the documentation of Framer motion to apply cool animations and interactions to your website.
  

(back to top)