Angry happy note

README.md

@@ -1,13 +1,11 @@
-# Final Project
+# Angry Happy Note
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+Final project for Technigo web developer bootcamp 2024. Angry Happy Note is a full-stack web app where users can leave angry (or happy) notes at their current location on a public map.
 
 ## The problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+The app is built using Google Maps, React, Vite, and Mongo DB. It's hosted on Netlify, Render, and Mongo DB Atlas.
 
 ## View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+https://happyangrynote.netlify.app/

backend/server.js

@@ -1,12 +1,29 @@
 import express from "express";
 import cors from "cors";
-import mongoose from 'mongoose'
-
-const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/flowershop"
-mongoose.connect(mongoUrl)
-mongoose.Promise = Promise
+import mongoose from "mongoose";
 
+const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/flowershop";
+mongoose.connect(mongoUrl);
+mongoose.Promise = Promise;
 
+const Note = mongoose.model("Note", {
+  latitude: {
+    type: Number,
+    required: true,
+  },
+  longitude: {
+    type: Number,
+    required: true,
+  },
+  text: {
+    type: String,
+    required: true,
+  },
+  createdAt: {
+    type: Date,
+    default: Date.now,
+  },
+});
 
 // Defines the port the app will run on. Defaults to 8080, but can be overridden
 // when starting the server. Example command to overwrite PORT env variable value:
@@ -24,8 +41,32 @@ app.get("/", (req, res) => {
   res.send("Hello Technigo!");
 });
 
+const maxAge = 14 * 24 * 60 * 60 * 1000;
+app.get("/notes", async (req, res) => {
+  const notes = await Note.find({
+    createdAt: { $gt: new Date(Date.now() - maxAge) },
+  });
+  res.json(notes);
+});
+
+app.post("/notes", async (req, res) => {
+  const { latitude, longitude, text } = req.body;
+  const newNote = new Note({
+    latitude,
+    longitude,
+    text,
+  });
+  try {
+    const savedNote = await newNote.save();
+    res.status(201).json(savedNote);
+  } catch (error) {
+    res
+      .status(400)
+      .json({ message: "Could not save note to the database", error });
+  }
+});
 
 // Start the server
 app.listen(port, () => {
   console.log(`Server running on http://localhost:${port}`);
-});
+});

frontend/netlify.toml

@@ -0,0 +1,4 @@
+[[redirects]]
+  from= "/*"
+  to = "/index.html"
+  status = 200

frontend/package.json

@@ -10,8 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@fontsource/roboto": "^5.0.13",
+    "@mui/material": "^5.15.19",
+    "@vis.gl/react-google-maps": "^1.0.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
@@ -23,4 +29,4 @@
     "eslint-plugin-react-refresh": "^0.4.3",
     "vite": "^4.4.5"
   }
-}
+}

frontend/src/App.css

@@ -0,0 +1,72 @@
+@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
+
+
+.App-header {
+  font-family: "Rock Salt", cursive;
+  font-weight: 400;
+  font-style: normal;
+  background: rgba(240, 237, 25, 0.91);
+  color: #000000;
+  font-size: 12px;
+  margin: 0;
+  text-align: center;
+  padding: 10px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+
+.App-header a {
+  color: #1334ef;
+  text-decoration: underline;
+  font-family: sans-serif;
+  font-size: 15px;
+}
+
+.App-map {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.App-menu {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  column-gap: 15px;
+}
+
+
+/* https://github.com/remix-run/react-router/blob/dev/examples/view-transitions/src/index.css this is about the view transitions that ive added. */
+.App-outlet {
+  view-transition-name: outlet;
+}
+
+::view-transition-old(outlet) {
+  animation: 500ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+    500ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(outlet) {
+  animation: 500ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+    500ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+@keyframes slide-from-right {
+  from {
+    transform: translateX(500px);
+  }
+}
+
+@keyframes slide-to-left {
+  to {
+    transform: translateX(-500px);
+  }
+}

frontend/src/App.jsx

@@ -1,8 +1,127 @@
-export const App = () => {
+import { useEffect, useState } from "react";
+// here i imported the router ... https://github.com/remix-run/react-router/tree/dev/examples/view-transitions
+import {
+  createBrowserRouter,
+  Link,
+  Outlet,
+  RouterProvider,
+  useLocation,
+} from "react-router-dom";
 
+import { HomePage } from "./components/HomePage";
+import { FormPage } from "./components/FormPage";
+import { LocationContext } from "./LocationContext";
+import { Map } from "./components/Map";
+import { Note } from "./components/Note";
+
+import "./App.css";
+
+const sweden = { lat: 62.3875, lng: 16.325556 };
+
+const AppLayout = () => {
+  let { pathname } = useLocation();
+  const [notes, setNotes] = useState([]);
+  const [location, setLocation] = useState(sweden);
+  const [noteId, setNoteId] = useState("");
+
+  useEffect(() => {
+    const url = `${import.meta.env.VITE_BACKEND_URL}/notes`;
+    fetch(url)
+      .then((response) => response.json())
+      .then((data) => setNotes(data));
+    // fetch more notes, every time you change page
+  }, [pathname]);
+
+  useEffect(() => {
+    if (pathname === "/") {
+    } else if (pathname === "/new") {
+      navigator.geolocation.getCurrentPosition((position) => {
+        setLocation({
+          lat: position.coords.latitude,
+          lng: position.coords.longitude,
+        });
+      });
+    }
+  }, [pathname]);
+  // Plug in Material ui https://mui.com/base-ui/react-input/
   return (
-    <>
-      <h1>Welcome to Final Project!</h1>
-    </>
+    <div className="App">
+      <header className="App-header">
+        <h1 className="App-title">Angry happy note</h1>
+        <ul className="App-menu">
+          <li>
+            <Link to="/" unstable_viewTransition>
+              Note map
+            </Link>
+          </li>
+          <li>
+            <Link to="/new" unstable_viewTransition>
+              Add note
+            </Link>
+          </li>
+        </ul>
+      </header>
+
+      <Map
+        defaultCenter={sweden}
+        defaultZoom={5}
+        center={pathname === "/new" && location.lat && location}
+        zoom={pathname === "/new" && location.lat !== sweden.lat && 16}
+      >
+        <>
+          {pathname === "/" &&
+            // this is so the user can open one note at a time
+            notes.map((note) => (
+              <Note
+                key={note._id}
+                {...note}
+                open={note._id == noteId}
+                onClick={() => {
+                  if (note._id === noteId) {
+                    setNoteId("");
+                  } else {
+                    setNoteId(note._id);
+                  }
+                }}
+              />
+            ))}
+        </>
+      </Map>
+      <div className="App-outlet">
+        <LocationContext.Provider value={location}>
+          <Outlet />
+        </LocationContext.Provider>
+      </div>
+    </div>
   );
 };
+
+// https://github.com/remix-run/react-router/blob/dev/examples/view-transitions/src/main.tsx
+// https://stackblitz.com/github/remix-run/react-router/tree/main/examples/view-transitions?file=README.md this is how to make the note slide in and out
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <AppLayout />,
+    children: [
+      {
+        index: true,
+        element: <HomePage />,
+      },
+      {
+        path: "/new",
+        element: <FormPage />,
+      },
+    ],
+  },
+]);
+
+// https://reactrouter.com/
+export const App = () => (
+  <RouterProvider
+    router={router}
+    future={{
+      // Wrap all state updates in React.startTransition()
+      v7_startTransition: true,
+    }}
+  />
+);

frontend/src/LocationContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const LocationContext = createContext({ lat: 0, lng: 0 });

frontend/src/components/FormPage.css

@@ -0,0 +1,44 @@
+.FormPage {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100vh;
+}
+
+.FormPage-paper {
+  background: #f0ed18 !important;
+}
+
+.FormPage-form {
+  display: grid;
+  gap: 10px;
+  padding: 20px;
+  border-radius: 5px;
+}
+
+.FormPage-label {
+  font-size: 20px;
+  color: #ffffff;
+}
+
+.FormPage-textarea {
+  width: 100%;
+  height: 100px;
+  padding: 10px;
+  font-size: 16px;
+}
+
+.FormPage-error {
+  color: #960000;
+  font-family: sans-serif;
+}
+
+.FormPage-submit {
+  padding: 10px;
+  font-size: 16px;
+  background-color: #1a8121;
+  color: #ffffff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}