Technigo · Bianka2112 · May 2, 2025 · May 2, 2025 · May 2, 2025 · May 20, 2025
diff --git a/.gitignore b/.gitignore
@@ -8,10 +8,12 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+.env
 dist
 dist-ssr
 *.local
 package-lock.json
+todo.md
 
 # Editor directories and files
 .vscode/*

diff --git a/README.md b/README.md
@@ -1 +1,45 @@
-# Happy Thoughts
+![Made with React](https://img.shields.io/badge/React-2023-blue?logo=react)
+![Node.js](https://img.shields.io/badge/Node.js-API-green?logo=node.js)
+![MongoDB](https://img.shields.io/badge/MongoDB-Mongoose-brightgreen?logo=mongodb)
+![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)
+![Status](https://img.shields.io/badge/status-In_Progress-yellow)
+
+# 💬 Happy Thoughts
+
+A social message board app where users can share short positive thoughts, ❤️ like others', and edit/delete their own posts. Built with full CRUD functionality and user authentication.
+
+---
+
+## 🔗 **Project Access**:
+
+🚀 [Live Demo](https://happy-thoughts-blr.netlify.app)
+📚 [View API Documentation](https://your-api.onrender.com/)
+
+## 🛠 Technologies Used
+
+- Frontend: React, Vite, Zustand (state management), MUI (Material UI)
+- Backend: Node.js, Express, MongoDB, Mongoose
+- Auth: Access tokens with protected routes and user-based permissions
+
+---
+
+## 💡 Features
+
+- Register or log in to post a thought
+- Like others' thoughts ❤️
+- See your own thoughts marked as `"✨ Yours"`
+- Edit or delete your own posts
+- Logout safely with feedback via Snackbar
+
+---
+
+## 📌 Future Improvements
+
+- 🌈 Add Lottie animation in the header
+- 🌓 Theme toggle (dark/light mode)
+- 🗂️ Paginate thoughts or infinite scroll
+- 🔐 Expiring access tokens or JWT
+
+### 🤝 Contributing
+
+Got ideas or want to improve the app? Fork the repo, create a branch, and open a PR!
diff --git a/index.html b/index.html
@@ -2,15 +2,27 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="A cheerful app where people share and celebrate positive thoughts."
+    />
+    <!-- Theme Color for Mobile Browsers -->
+    <meta name="theme-color" content="#ffffff" />
+    <!-- Prefetch for Faster Loading -->
+    <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=Comfortaa:wght@400;700&family=Quicksand:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+
+    <link rel="icon" type="image/png" href="/happy.cloud.png" />
     <title>Happy Thoughts</title>
   </head>
+
   <body>
-    <div id="root"></div>
-    <script
-      type="module"
-      src="./src/main.jsx">
-    </script>
+    <main id="root" role="main" aria-label="Happy Thoughts App"></main>
+    <script type="module" src="./src/main.jsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -10,14 +10,24 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.1.1",
+    "@mui/material": "^7.1.1",
+    "dotenv": "^16.5.0",
+    "moment": "^2.30.1",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
+    "styled-components": "^6.1.17",
+    "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.4.1",
+    "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",

diff --git a/public/happy.cloud.png b/public/happy.cloud.png
diff --git a/public/pixel-heart.png b/public/pixel-heart.png
diff --git a/pull_request_template.md b/pull_request_template.md
@@ -1 +1,5 @@
-Please include your Netlify link here.
+Please include your Netlify link here.
+
+Deployed site: https://happy-thoughts-blr.netlify.app/
+
+Github: https://github.com/Bianka2112/js-project-happy-thoughts
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,28 @@
-export const App = () => {
+import { useEffect } from "react"
+import Form from "../src/sections/Form"
+import Header from "../src/sections/Header"
+import { Loader } from "./components/Loader"
+import { GlobalStyle } from "./GlobalStyles"
+import { MsgBoard } from "./sections/MsgBoard"
+import { useThoughtStore } from "./store/useThoughtStore"
+
+const App = ({ toggleTheme, mode }) => {
+
+  const fetchThoughts = useThoughtStore((state) => state.fetchThoughts)
+  const loading = useThoughtStore((state) => state.loading)
+
+  useEffect(() => {
+    fetchThoughts()
+  }, [fetchThoughts])
+
   return (
-    <h1>Happy Thoughts</h1>
+    <>
+      <GlobalStyle />
+      <Header toggleTheme={toggleTheme} mode={mode}/>
+      <Form />
+      {loading ? <Loader /> : <MsgBoard />}
+    </>
   )
 }
+
+export default App
diff --git a/src/AppWrapper.jsx b/src/AppWrapper.jsx
@@ -0,0 +1,58 @@
+import { ThemeProvider as StyledThemeProvider } from "styled-components"
+import { ThemeProvider as MuiThemeProvider, CssBaseline, createTheme } from "@mui/material"
+import { useState, useMemo } from "react"
+
+import App from './App.jsx'
+import { lightTheme, darkTheme } from "./theme"
+
+const AppWrapper = () => {
+  const [mode, setMode] = useState("light")
+
+  const styledTheme = useMemo(() => (
+    mode === "dark" ? darkTheme : lightTheme
+  ), [mode])
+
+  const muiTheme = useMemo(() =>
+    createTheme({
+      palette: {
+        mode,
+        primary: { main: styledTheme.colors.primary },
+        background: { default: styledTheme.colors.background },
+        text: { primary: styledTheme.colors.text },
+      },
+      typography: {
+        fontFamily: styledTheme.font,
+      },
+      components: {
+        MuiButtonBase: {
+          defaultProps: {
+            disableRipple: true, 
+          },
+        },
+        MuiCssBaseline: {
+          styleOverrides: {
+            "*:focus": {
+              outline: "none",
+              boxShadow: "none",
+            },
+            "button:focus-visible": {
+              outline: "2px solid #f95f86",
+              outlineOffset: "2px",
+            },
+          },
+        },
+      },
+    }), [styledTheme]
+  )
+
+  return (
+    <MuiThemeProvider theme={muiTheme}>
+      <StyledThemeProvider theme={styledTheme}>
+        <CssBaseline />
+        <App toggleTheme={() => setMode(prev => prev === "light" ? "dark" : "light")} />
+      </StyledThemeProvider>
+    </MuiThemeProvider>
+  )
+}
+
+export default AppWrapper
diff --git a/src/GlobalStyles.jsx b/src/GlobalStyles.jsx
@@ -0,0 +1,39 @@
+import { createGlobalStyle } from "styled-components";
+
+export const GlobalStyle = createGlobalStyle`
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    margin-top: 40px;
+    margin-bottom: 20px;
+    background: 
+    linear-gradient(
+        to bottom, 
+        rgba(255, 237, 230, 0.85), 
+        rgba(255, 237, 230, 0.3)
+      );
+    background-size: cover;
+    font-family: 'Quicksand', sans-serif;
+    font-weight: 600;
+    background-color: #fdfdfd;
+    color: #111;
+  }
+
+  button {
+    font-family: 'Comfortaa', sans-serif;
+  }
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  *:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.colors.primary};
+    outline-offset: 2px;
+  }
+`
diff --git a/src/components/BackToTop.jsx b/src/components/BackToTop.jsx
@@ -0,0 +1,37 @@
+import styled from "styled-components"
+
+const BtnIcon = styled.button`
+  font-size: 2rem;
+  cursor: pointer;
+  border: 2px solid lightgray;
+  padding: 5px;
+  box-shadow: 2px 2px 5px #00000033;
+  border-radius: 20%;
+  left: 50%;
+  margin: 0 auto;
+
+
+  &:hover {
+    border: 2px solid gray;
+    scale: 1.1;
+  }
+
+`
+
+const scrollToTop = () => {
+  window.scrollTo({ top: 0, behavior: "smooth" })
+}
+
+const BackToTop = () => {
+  return (
+    <>
+      <BtnIcon 
+        type="button"
+        onClick={scrollToTop}>
+        🔝
+      </BtnIcon>
+    </>
+  )
+}
+
+export default BackToTop
diff --git a/src/components/DeleteButton.jsx b/src/components/DeleteButton.jsx
@@ -0,0 +1,80 @@
+import { useState } from "react"
+import { useThoughtStore } from "../store/useThoughtStore"
+import { useAuthStore } from "../store/useAuthStore"
+import {
+  IconButton,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Snackbar,
+  Alert,
+  Tooltip,
+} from "@mui/material"
+
+const DeleteThought = ({ id }) => {
+  const deleteThought = useThoughtStore((state) => state.deleteThought)
+  const accessToken = useAuthStore((state) => state.accessToken)
+  const [openConfirm, setOpenConfirm] = useState(false)
+  const [snackbarOpen, setSnackbarOpen] = useState(false)
+
+  const handleDelete = async () => {
+    try {
+      await deleteThought(id)
+      setOpenConfirm(false)
+      setSnackbarOpen(true)
+    } catch (error) {
+      console.error("Failed to delete thought:", error)
+    }
+  }
+
+  if (!accessToken) return null
+
+  return (
+    <>
+      <Tooltip title="Delete">
+        <IconButton onClick={() => setOpenConfirm(true)} aria-label="Delete your thought">
+          🗑️
+        </IconButton>
+      </Tooltip>
+
+      <Dialog open={openConfirm} onClose={() => setOpenConfirm(false)}>
+        <DialogTitle>Confirm Deletion</DialogTitle>
+        <DialogContent>
+          Are you sure you want to delete this thought? This action can't be undone.
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpenConfirm(false)} color="primary">
+            Cancel
+          </Button>
+          <Button
+            onClick={handleDelete}
+            color="error"
+            variant="contained"
+            sx={{ fontWeight: "bold" }}
+          >
+            Yes, Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
+
+      <Snackbar
+        open={snackbarOpen}
+        autoHideDuration={3000}
+        onClose={() => setSnackbarOpen(false)}
+        anchorOrigin={{ vertical: "top", horizontal: "center" }}
+      >
+        <Alert
+          onClose={() => setSnackbarOpen(false)}
+          severity="success"
+          sx={{ width: "100%" }}
+        >
+          💭 Thought deleted successfully.
+        </Alert>
+      </Snackbar>
+    </>
+  )
+}
+
+export default DeleteThought