Completed Project

.firebase/hosting.YnVpbGQ.cache

@@ -0,0 +1,24 @@
+favicon.ico,1701324781159,eae62e993eb980ec8a25058c39d5a51feab118bd2100c4deebb2a9c158ec11f9
+logo192.png,1701324782749,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872b2a39dc8b
+logo512.png,1701324782914,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
+manifest.json,1701324781392,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
+robots.txt,1701324783694,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
+bg/bg.png,1701347069276,f3da082aa49cee668dac1d4f8edf150c36f7c9f485bf4a5d4b42b6b27e7cad99
+homePage/user.png,1701857344122,3bacf05181c4a286087afee612ab2971cd3c46b4ec45cde9147ee2dc076067f2
+logo/image1.png,1701347048566,a8e687d0d310e78081f90752f3f81ca2b53ee1785378c9babd9b1995ea075d68
+submitCard/close.svg,1701844216163,1fc165e347762212e40c3de9a81b678cef0b393509f1588b8e1b738bced2f96d
+index.html,1704175810131,f9cc5c8c688a002d6baed5b2d731220db3dbaa3b2a8bf59e16aa2da525fb5a9b
+asset-manifest.json,1704175810131,d8af1f61df0f364263bfc2eb6d4cb919ee36dad19d0d7c50af2d5f3b8d99e5c8
+static/css/main.37bf2c02.css,1704175810150,7dc36c6606b5b9e05e1a1db815bf4589004a387cc93791b2f107ad0ea355243a
+static/js/787.97a755d5.chunk.js,1704175810148,cc114f23b43e5415100680b4a7ceb5aa62d0c5bb5f54f160a9808319fd91935c
+static/css/main.37bf2c02.css.map,1704175810148,7f599aeebb0bdde30826e9d5a093a0e7819dbc76178bee4dc73dd3032b89b0ae
+static/js/787.97a755d5.chunk.js.map,1704175810149,20b6b43ba98871fc71423361cfcc46397a0e31efa2dc284e97cbcfce4333dafb
+static/js/main.5dee8f23.js.LICENSE.txt,1704175810148,ac5a220873d7f6d9ea7abb16648904d28aaff03529a143225133761dc8b64cd9
+static/media/public-sans-latin-400-normal.395632508f028112812e.woff2,1704175810147,561c4f5d59db36f529a794d5948346d81f245744120c8959354e942b8e21ed3a
+static/media/public-sans-latin-ext-400-normal.ec6f5fe4a39d95207b1f.woff,1704175810147,3d786a89fa8a91c4ce85f1b7bfde31b0853d535f1635d5918d127b272cf9c150
+static/media/public-sans-vietnamese-400-normal.529cb4480800870e4c21.woff,1704175810147,e1a3002976a355cecb3b9970347d25c7d7222b72ec7dad04999445350bacf567
+static/media/public-sans-vietnamese-400-normal.cd61d3bcc45fcd8389b9.woff2,1704175810147,a736201581a86c25eeb0a4e33d4941e0827fe034f7efb50d1cd7f93b772875b0
+static/media/public-sans-latin-ext-400-normal.fb7d8869799c6eec9401.woff2,1704175810147,9ab844a64857f2c1a12a9b8a9efa25d47e3ddd60e4c9cc676da7c0a67bdadd69
+static/media/public-sans-latin-400-normal.c49c54e2dace7c6c0d24.woff,1704175810147,d54a1ec84ddd47afd2661a3c9cdb879b818c1ddbba14295e34e61b5c9e919376
+static/js/main.5dee8f23.js,1704175810148,f88f8000c03e9f2276eb97a08febe457f0611ae9244a24f2dbcad64bba6c6a6d
+static/js/main.5dee8f23.js.map,1704175810153,d1f0f47ff087ecefc3e36605a54994b7e20363b01701661688982c479adafb4f

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "dear-diary-emailusername-6a3d7"
+  }
+}

firebase.json

@@ -0,0 +1,10 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}

src/.env

@@ -1 +1,7 @@
-PUBLIC_URL = "./public/"
+PUBLIC_URL = "./public/"
+REACT_APP_API_KEY = AIzaSyCduh8Bd6T3lqaMxFxihVPZQSRH7_vPODY
+REACT_APP_AUTH_DOMAIN = dear-diary-emailusername-6a3d7.firebaseapp.com
+REACT_APP_PROJECT_ID = dear-diary-emailusername-6a3d7
+REACT_APP_STORAGE_BUCKET = dear-diary-emailusername-6a3d7.appspot.com
+REACT_APP_MESSAGING_SENDER_ID = 107317734441
+REACT_APP_APP_ID = 1:107317734441:web:2b5d34185dce4a01564038

src/App.tsx

@@ -1,7 +1,7 @@
 
 import './App.css';
 
-import AppRoutes from './utility/appRoutes';
+import AppRoutes from './config/appRoutes/appRoutes';
 
 function App() {
   return (

src/components/header.tsx → src/components/Header/Header.tsx

@@ -34,7 +34,7 @@ const Header = () => {
         <div>
         <Container>
         <StyledBox>
-        <StyledImg src={process.env.PUBLIC_URL+'/image1.png'} alt="Logo"/>
+        <StyledImg src={'/logo/image1.png'} alt="Logo"/>
           <StyledSpan>Dear Diary</StyledSpan>
         </StyledBox>
 

src/config/appRoutes/appRoutes.tsx

@@ -0,0 +1,19 @@
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import SignInPage from "../../containers/SignInPage/SignInPage";
+import HomePage from "../../containers/HomePage/HomePage";
+import { SIGN_IN_PATH, HOME_PATH } from "../../utility/routeConstants";
+
+const AppRoutes = () => {
+    return (
+        <Router>
+            <Routes>
+                <Route path={SIGN_IN_PATH} element={<SignInPage/>}/>
+                <Route path={HOME_PATH} element={<HomePage/>}/>
+
+            </Routes>
+        </Router>
+
+    );
+};
+
+export default AppRoutes;

src/utility/firebaseConfig.ts → src/config/firebaseConfig/firebaseConfig.ts

@@ -4,8 +4,8 @@ import {
 } from "firebase/firestore";
 
 const firebaseConfig = {
-    apiKey: "AIzaSyCduh8Bd6T3lqaMxFxihVPZQSRH7_vPODY",
-    authDomain: "dear-diary-emailusername-6a3d7.firebaseapp.com",
+    apiKey: process.env.REACT_APP_API_KEY,
+    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
     projectId: "dear-diary-emailusername-6a3d7",
     storageBucket: "dear-diary-emailusername-6a3d7.appspot.com",
     messagingSenderId: "107317734441",

src/containers/HomePage/DiaryCard/DiaryCard.tsx

@@ -16,23 +16,32 @@ interface DiaryCardProps {
 const StyledCard = styled(Card)`
 
   width: 271px;
+  min-height: 10px;
   height: auto;
-  padding: 20px;
+  padding: 0px 0px 6px 0px;
   border-radius: 6px;
   align-items: flex-start;
 `;
 
 const StyledCardContent = styled(CardContent)`
   align-self: flex-start;
+
+
 `;
 
 const StyledBox = styled(Box)`
   display: flex;
-  height: auto;
   margin-bottom: 6px;
   align-items: flex-start;
 `;
 
+const StyledBoxDesc = styled(Box)`
+  display: flex;
+
+  align-items: flex-start;
+  padding-bottom: -16;
+`;
+
 const TypographyTitle = styled(Typography)`
   color: #4B465C;
   font-family: public sans;
@@ -68,43 +77,49 @@ const StyledButton = styled(Button)`
   letter-spacing: 0.43px;
   width: 271px;
   display: flex;
-  padding: 20px;
+  padding: 0px;
+  padding-left: 0px;
   flex-direction: column;
   align-items: flex-start;
   border-radius: 6px;
   background-color: #ffffff;
-  box-shadow: 0 4px 18px 0pc rgba(75, 70, 92, 0.10);
+  box-shadow: 0 4px 18px 0pc rgba(75, 70, 92, 0.0);
+  margin-left: 6px;
 }
 `;
 
 const DiaryCard: React.FC<DiaryCardProps> = ({ title, description }) => {
   const [showMore, setShowMore] = useState(false); // state to track whether to show more or not
 
-  const truncatedDescription = showMore ? description : `${description.slice(0, 100)}...`; // truncate description if showMore is false
+  const truncatedDescription = showMore ? description : `${description.slice(0, 100)}`; // truncate description if showMore is false
+  const showMoreButton = description.length > 100; // only show showMore button if description is longer than 100 characters
 
   const handleToggleShowMore = () => {
     setShowMore(!showMore);
   };
 
   return (
     <StyledCard>
-      <CardContent>
+      <StyledCardContent>
         <StyledBox>
           <TypographyTitle variant="h5" component="div">
             {title}
           </TypographyTitle>
         </StyledBox>
-        <StyledBox>
+        <StyledBoxDesc>
           <TypographyDescription variant="body2">
             {truncatedDescription}
           </TypographyDescription>
-        </StyledBox>
-      </CardContent>
-      <CardActions>
-        <StyledButton size="small" onClick={handleToggleShowMore}>
-          {showMore ? 'Hide' : 'Show More'}
-        </StyledButton>
-      </CardActions>
+        </StyledBoxDesc>
+      </StyledCardContent>
+      {showMoreButton && ( // conditionally render the button based on description length
+        <CardActions>
+          <StyledButton size="small" onClick={handleToggleShowMore}>
+            {showMore ? 'Hide' : 'Show More'}
+          </StyledButton>
+        </CardActions>
+      )}
+
     </StyledCard>
   );
 };