Starting with the Planning page

Planning.jsx

Here come the main functionalities of this website, the user will enter location names and the scheduled date and time inside the given input fields, and they will appear on a card-like tab on the right side.

👆 When the website is first Loaded on your browser

👆After adding some destination cards.

Let’s take a look at the structure of our main component first. It is divided into two further child elements, on the left-hand side we have a div named (class name) “planning-board”, where the destination cards appear (compare this with the actual website screenshot), on the right side, we have <MapsBoard/> contains the logo and some other elements along with the input elements.

Let’s start with the basic structure of the class component, also don’t forget to import the CSS file for the Planning component, although it is empty now, we’ll keep adding styling to this file iteratively for each component,

import React from "react";
import "./planning.css";

class Planning extends React.Component{
    render(){
    return (
        <div className="planning-container">
		        Planning component goes here
        </div>
    )
}  }
export default Planning;

👆Planning.jsx

To view the progress we need to show it on the page, so add it to the app component,

import React from "react";
import Home from "./pages/Home";
import "./utilities.css";
import Planning from './pages/planning';

const App = () => {
    return (
        <div>
            <Home />
            <Planning />
        </div>
    )
}  
export default App;

👆 app.jsx

Scroll down to the bottom of the page and you will find something like this,