#VANLIFE

Table of Contents

• Live version

• Project Overview

  • Description
  • Features
  • Figma design
  • Main topics learned
  • Technologies used
  • Disclaimers
  • To-Dos

• React Router glossary

Live version

You can check out the live version of this app deployed on Netlify here.

Project Overview

This project is part of the Frontend Developer Career Path on Scrimba.

is an online platform that offers interactive coding screencasts. Its main advantage is that it allows you to write and run code directly in the browser, which makes it a great tool for learning how to code, spcially for beginners. As i got more experienced through out the course, i started to use my own code editor and run the code locally. I love scrimba because it offers a good mix of theory and practice, allowing me to learn new concepts and apply them in real projects at the same time.

Description

VANLIFE is a website for people to rent out camper vans for their next road trip adventure.

Features

• SPA with 10+ routes
• Filter by van type
• Active link styling (a way to easily tell where the user is in the app)
• Protected routes (certain pages are only accessible to authenticated users)
• Nested routes (a way to share a common layout between routes)
• Using mock server to simulate a real server and test the application without having to connect to a real server

Figma design

The design for this project was created using Figma. You can check it out here (you need to have a Figma account to access it).

Main topics learned

• Routing basics: The basics of routing in a single page application, like how to set up routes, how to navigate between routes, and how to pass data between routes.
• Navigation: How to create links to navigate between routes and how to use the useLocation hook to access the current URL.
• Layout and index routes: How to use layout and index routes to create nested routes and shared UI components.
• Nested routes: How to create nested routes and use the Outlet component to render child routes.
• Route and search parameters: How to use route parameters to access dynamic data and how to use search parameters to filter and sort data.
• Protected routes: How to create protected routes that require authentication and how to use the useNavigate hook to redirect users to a login page.

Technologies used

• React: A JavaScript library for building user interfaces.
• React Router: A library that provides client side routing for our single page application.
• Miragejs: A library that allows us to create a fake server to simulate a real server and test our application without having to connect to a real server.
• JavaScript: A programming language that allows us to add interactivity to our website.
• HTML: A markup language that allows us to create the structure of our website.
• CSS: A styling language that allows us to style the structure of our website.
• Tailwind CSS: A utility-first CSS framework that allows us to style our website using utility classes.
• Figma: A design tool that allows us to create and share designs for our website.
• Git: A version control system that allows us to track changes in our code and collaborate with other developers.
• GitHub: A platform that allows us to host our code and collaborate with other developers.
• Vite: A build tool that allows us to build our website and run a development server.
• VsCode: A code editor that allows us to write and test our code.
• Netlify: A platform that allows us to deploy our website and make it accessible to the public.

Disclaimers

• This project is a learning project and is not intended for commercial use.
• The main focus was to learn react router and not to create a fully functional website, therefore there are still many features that can be added to make it a fully functional website.
• The website is not connected to a real database, so the data is hardcoded in a mock server created using miragejs. Miragejs is a library that allows us to create a fake server to simulate a real server and test our application without having to connect to a real server.
• The website is not connected to a real authentication system, so it's only possible to sign in using a hardcoded user.
• To access the host page, you can use the following credentials:
  • Email: b@b.com
  • Password: p123

To-Dos

• Some ideas for future improvements include:
  • Authentication: Add authentication to the website so that users can create accounts, log in, and log out.
  • Database: Connect the website to a real database so that users can save their van listings and view other users' listings.

React Router glossary

• Nested routes: Nested routes are used to create routes that are children of other routes. They allow us to create routes that share a common parent route and a common layout. This is useful when we have some shared UI between routes in our app. We can use a layout route to create a parent route that contains just the portion of the UI that will be shared, and then we can use nested routes to create child routes that contain the unique portion of the UI for each route. This allows us to create a more organized and maintainable routing structure in our app. The child routes are rendered inside the parent route using the <Outlet /> component. This component is used anytime we have a parent route that's wrapping children routes. It renders the matching child route's element prop given in its route definition. This means that when the parent route matches, the <Outlet /> component will render the matching child route's element prop. This allows us to create a nested routing structure in our app that is easy to understand and maintain.

• <BrowserRouter /> is a component that provides the routing context to the rest of the app. It should be placed at the root of the app.

• <Routes /> is a component that contains all the routes in our app. It should be placed inside a <BrowserRouter /> component.

• <Route /> is a component that defines a route in our app. It should be placed inside a <Routes /> component.

• path is a prop that tells the <Route /> component which path to match.

• element is a prop that tells the <Route /> component what to render when the path matches.

• end is a prop that tells the <Route /> component to only match the path if it's an exact match.

• index is a prop that tells the <Route /> component to render the element when the path matches the parent route.

• params is a prop that tells the <Route /> component to pass the route parameters to the element.

• useParams is a hook that gives us access to the route parameters in the current URL.

• <Outlet /> is a component that renders the matching child route's element prop given in its route definition.

• <Link /> is a component that allows us to navigate to a different route in our app.

• <NavLink /> is a component that allows us to navigate to a different route in our app and apply a class name when the route is active.

• useNavigate is a hook that gives us a function to navigate to a different route in our app. It takes two arguments: the path to navigate to and an object with a replace property that tells the router to replace the current entry in the history stack. If set the replace property to true, it will replace the current entry in the history stack with the new entry. This means that when the user clicks the back button, they will be taken to the previous page in the history stack, not the page they were on before they navigated to the new page.

• state is a prop that tells the <Link /> component to pass state to the new route.

• useLocation is a hook that gives us access to the current URL. It is an object that contains information about the current URL, such as the pathname, search, and hash. It also contains a state object that we can use to pass state to the new route.

• useSearchParams is a hook that gives us access to the search parameters in the current URL. Using /: notation in the path of a route allows us to access the route parameters in the current URL.