Initial App Structure created. More Refined later

src/components/App.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { Route, Switch } from "react-router-dom";
+import HomePage from "./home/HomePage";
+import AboutPage from "./about/AboutPage";
+import Header from "./common/Header";
+import PageNotFound from "./PageNotFound";
+import DashboardPage from "./dashboard/DashboardPage";
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <Header />
+      <div className="container">
+        <Switch>
+          <Route exact path="/" component={HomePage}></Route>
+          <Route path="/about" component={AboutPage}></Route>
+          <Route path="/dashboard" component={DashboardPage}></Route>
+          <Route component={PageNotFound}></Route>
+        </Switch>
+      </div>
+    </React.Fragment>
+  );
+};
+
+export default App;

src/components/PageNotFound.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const PageNotFound = () => {
+  return (
+    <div>
+      <h1>Oops! Page Not Found</h1>
+    </div>
+  );
+};
+
+export default PageNotFound;

src/components/about/AboutPage.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+const AboutPage = () => {
+  return (
+    <div>
+      <h2>About</h2>
+      <p>
+        This is a task management application that allows you to manage projects
+        and tasks along with pomodoro features inbuilt.
+      </p>
+    </div>
+  );
+};
+
+export default AboutPage;

src/components/common/Header.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+const Header = () => {
+  return (
+    <div className="container-fluid">
+      <nav className="navbar navbar-dark bg-dark">
+        <NavLink className="navbar-brand" to="/">
+          <img src="./src/favicon.ico" width="30" height="30" alt="" />
+          {"  "}
+          StayProductive
+        </NavLink>
+        <NavLink to="/" activeStyle={{ color: "#ff0055" }} exact>
+          Home
+        </NavLink>
+        <NavLink to="/about" activeStyle={{ color: "#ff0055" }} exact>
+          About
+        </NavLink>
+        <NavLink to="/dashboard" activeStyle={{ color: "#ff0055" }} exact>
+          Dashboard
+        </NavLink>
+      </nav>
+    </div>
+  );
+};
+
+export default Header;

src/components/dashboard/DashboardPage.js

@@ -0,0 +1,25 @@
+import React from "react";
+
+const DashboardPage = () => {
+  return (
+    <div className="container-fluid">
+      <div className="row">
+        <div className="col-2" style={{ textAlign: "left" }}>
+          <ul>
+            <li>Project 1</li>
+            <li>Project 2</li>
+          </ul>
+        </div>
+        <div className="col">
+          This is just a dummy sentence insidde the body content section
+          areadmThis is just a dummy sentence insidde the body content section
+          aread This is just a dummy sentence insidde the body content section
+          aread This is just a dummy sentence insidde the body content section
+          aread
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardPage;

src/components/home/HomePage.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const HomePage = () => {
+  const btnStyle = {
+    marginLeft: ".5rem",
+  };
+  return (
+    <div className="jumbotron">
+      <h1>Stay Productive Application</h1>
+      <p>Manage Your Tasks/ Projects</p>
+      <Link to="/login" className="btn btn-primary btn-md">
+        Login
+      </Link>
+      <Link to="/register" className="btn btn-primary btn-md" style={btnStyle}>
+        Register
+      </Link>
+    </div>
+  );
+};
+
+export default HomePage;

src/index.css

@@ -0,0 +1,3 @@
+.navbar {
+  margin-bottom: 1rem;
+}

src/index.js

@@ -1,8 +1,12 @@
 import React from "react";
 import { render } from "react-dom";
-
-function Hi() {
-  return <p>Hi. there</p>;
-}
-
-render(<Hi />, document.getElementById("app"));
+import { BrowserRouter as Router } from "react-router-dom";
+import "bootstrap/dist/css/bootstrap.min.css";
+import App from "./components/App";
+import "./index.css";
+render(
+  <Router>
+    <App />
+  </Router>,
+  document.getElementById("app")
+);

webpack.config.dev.js

@@ -1,4 +1,4 @@
-const webpack = require("webpack");
+// const webpack = require("webpack");
 const path = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");