started styling

backend/server.js

@@ -36,7 +36,7 @@ const storage = new CloudinaryStorage({
   cloudinary,
   params: {
     folder: "profileimage",
-    allowedFormats: ["jpg", "png"],
+    allowedFormats: ["jpg", "png", "jpeg"],
     transformation: [{ width: 500, height: 500, crop: "limit" }],
   },
 });

frontend/package.json

@@ -10,6 +10,7 @@
     "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-lottie": "^1.2.3",
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",

frontend/public/index.html

@@ -7,7 +7,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap"
       rel="stylesheet"
     />
     <meta name="theme-color" content="#000000" />

frontend/src/App.js

@@ -1,31 +1,49 @@
 import React from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { Provider } from "react-redux";
-import { combineReducers, configureStore } from "@reduxjs/toolkit";
+import { combineReducers, createStore } from "@reduxjs/toolkit";
+
 import { UserProfile } from "./components/UserProfile";
 import user from "./reducers/user";
 import add from "./reducers/add";
 import SignUp from "./components/SignUp";
 import AddsList from "./components/AddsList";
 import AddForm from "./components/AddForm";
+import NotFound from "./components/NotFound";
+import Navbar from "./components/Navbar";
+import ContactPage from "./components/ContactPage";
+import AboutPage from "./components/AboutPage";
 
 const reducer = combineReducers({
   user: user.reducer,
   add: add.reducer,
 });
+const persistedStateJSON = localStorage.getItem("userReduxState");
+let persistedState = {};
+
+if (persistedStateJSON) {
+  persistedState = JSON.parse(persistedStateJSON);
+}
 
-const store = configureStore({ reducer });
+const store = createStore(reducer, persistedState);
+
+store.subscribe(() => {
+  localStorage.setItem("userReduxState", JSON.stringify(store.getState()));
+});
 
 const App = () => {
   return (
     <Provider store={store}>
       <BrowserRouter>
+        <Navbar />
         <Routes>
           <Route path="/signup" element={<SignUp />} />
           <Route path="/adds" element={<AddsList />} />
           <Route path="/addsform" element={<AddForm />} />
           <Route path="/userprofile" element={<UserProfile />} />
-          {/* <Route path="*" element={<NotFound />} /> */}
+          <Route path="/contact" element={<ContactPage />} />
+          <Route path="/about" element={<AboutPage />} />
+          <Route path="*" element={<NotFound />} />
         </Routes>
       </BrowserRouter>
     </Provider>

frontend/src/components/AboutPage.js

@@ -0,0 +1,36 @@
+import React from "react";
+import styled from "styled-components";
+
+const AboutContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  p {
+    max-width: 60vw;
+    @media (min-width: 768px) {
+      width: 400px;
+    }
+  }
+`;
+
+const AboutPage = () => {
+  return (
+    <AboutContainer>
+      <h1>About</h1>
+      <p>
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum."
+      </p>
+      <h2>The idea</h2>
+      <h2>The idea</h2>
+    </AboutContainer>
+  );
+};
+
+export default AboutPage;