Aleksandar15 · Aleksandar15 · Mar 12, 2023 · Mar 12, 2023 · Mar 13, 2023 · Mar 13, 2023
diff --git a/README.md b/README.md
@@ -1,7 +1,5 @@
 # CARS CLUB
 
-##### Main Goal: Improve my **TypeScript** skills
-
 ---
 
 #### Plans & Features (in non-technical way):
@@ -11,3 +9,21 @@
 - Section for posting cars for sales (allowed by all users): Marketplace
 - Posts will be connected to the OP user (original poster) & they can update or delete their post
 - Users not related to a particular post will be able to comment; they will be related to their own comment & be able to update and delete their own comment
+
+### Run my frontend project
+
+- Clone this project.
+- Navigate (`cd`) into your project directory.
+- Run `npm install` in your command line.
+- Run `npm run dev` in your command line.
+- Visit http://localhost:5173 in your browser.
+  - Vite version 4 has changed the PORT from 3000 to 5173.
+- For the full functionality connect it with my <a href="https://github.com/Aleksandar15/Cars-Club-backend">backend</a> project.
+
+##### Technologies used:
+
+###### Postgres DB, TypeScript, ReactJS with Redux, NodeJS with ExpressJS
+
+##### Sources
+
+- For most of my SVG icons I've used a PNG version of icons8 and then converted that PNG into SVG using sites like https://www.pngtosvg.com
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="sportcar-96px+background.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Cars Club</title>
   </head>

diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,4 @@
+[[redirects]]
+from = '/*'
+to = '/index.html'
+status = 200
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.3.4",
     "bootstrap": "^5.2.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.2",

diff --git a/public/imgs/error404/error-png-128.png b/public/imgs/error404/error-png-128.png
diff --git a/public/imgs/error404/error-png-256.png b/public/imgs/error404/error-png-256.png
diff --git a/public/imgs/error404/error-png-512.png b/public/imgs/error404/error-png-512.png
diff --git a/public/imgs/error404/error-png-64.png b/public/imgs/error404/error-png-64.png
diff --git a/public/sportcar-96+no-background.png b/public/sportcar-96+no-background.png
diff --git a/public/sportcar-96px+background.png b/public/sportcar-96px+background.png
diff --git a/public/sportcar-97-svg-qweqpw.svg b/public/sportcar-97-svg-qweqpw.svg
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,30 @@
+/* width */
+::-webkit-scrollbar {
+  width: 15px;
+  /* height -> modifies the bottom(/horizontal) scrollbar */
+  height: 15px;
+}
+
+/* Trackpad */
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 5px rgb(22, 131, 186); 
+  border-radius: 10px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+background: blue;
+  border-radius: 10px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 255, 0.777); 
+}
+
+.form-login {
+  border: dotted red 2px;
+  padding: 20px;
+  border-radius: 10px;
+}
+
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,11 +1,15 @@
 import { useState } from "react";
 import { Container } from "react-bootstrap";
 // import reactLogo from './assets/react.svg'
-// import "./App.css";
+import "./App.css";
 import { Routes, Route } from "react-router-dom";
-import HomePage from "./components/Home/HomePage";
+import HomePage from "./pages/Home/HomePage";
 import NavBar from "./components/NavBar/NavBar";
-import Marketplace from "./components/Marketplace/Marketplace";
+import PageNotFound from "./pages/PageNotFound/PageNotFound";
+import Catalog from "./pages/ProtectedPages/Catalog";
+import Marketplace from "./pages/ProtectedPages/Marketplace";
+import Login from "./pages/PublicPages/Login";
+import Register from "./pages/PublicPages/Register";
 
 function App() {
   return (
@@ -15,14 +19,16 @@ function App() {
         <Routes>
           <Route path="/" element={<HomePage />} />
 
+          {/* Public routes */}
+          <Route path="/login" element={<Login />} />
+          <Route path="/register" element={<Register />} />
+
           {/* Protected routes */}
           <Route path="/marketplace" element={<Marketplace />} />
+          <Route path="/catalog" element={<Catalog />} />
 
           {/* Not found route */}
-          <Route
-            path="*"
-            element={<h1 className="text-danger">NOT FOUND</h1>}
-          />
+          <Route path="*" element={<PageNotFound />} />
         </Routes>
       </Container>
     </div>

diff --git a/src/assets/svg-icons/clearIcon/eraser-cleaner-icon-svg-icon.svg b/src/assets/svg-icons/clearIcon/eraser-cleaner-icon-svg-icon.svg
diff --git a/src/assets/svg-icons/createPostIcons/image2vector-by-pngtosvg.svg b/src/assets/svg-icons/createPostIcons/image2vector-by-pngtosvg.svg
diff --git a/src/assets/svg-icons/searchIcon/icons8-search.svg b/src/assets/svg-icons/searchIcon/icons8-search.svg
diff --git a/src/assets/svg-icons/showHideIcons/hide-password-svg-icon.svg b/src/assets/svg-icons/showHideIcons/hide-password-svg-icon.svg
diff --git a/src/assets/svg-icons/showHideIcons/show-password-svg-icon.svg b/src/assets/svg-icons/showHideIcons/show-password-svg-icon.svg
diff --git a/src/components/Catalog/Catalog.tsx b/src/components/Catalog/Catalog.tsx
diff --git a/src/components/Home/HomePage.tsx b/src/components/Home/HomePage.tsx
diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx
diff --git a/src/components/Marketplace/Marketplace.tsx b/src/components/Marketplace/Marketplace.tsx
diff --git a/src/components/MarketplaceComponents/CreatePost.tsx b/src/components/MarketplaceComponents/CreatePost.tsx
@@ -0,0 +1,22 @@
+import { Button } from "react-bootstrap";
+import CreatePostSVG from "../../utilities/icons-setup/createPost-SVG";
+
+const CreatePostButton = () => {
+  return (
+    <div>
+      <div className="mt-1 ms-1 mb-2 d-flex  align-items-center justify-content-space-between">
+        <h4 className="text-uppercase text-info fs-4  d-flex">
+          Have an offer? post yours instead
+        </h4>
+        <Button
+          size="lg"
+          className="btn-lg ms-4 mb-1 btn-outline-info bg-info "
+        >
+          <CreatePostSVG />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default CreatePostButton;