Malin och Mimmi + Final Project #120

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

MalLunBar wants to merge 288 commits into Technigo:main from MalLunBar:main

README.md

-Original file line number
+Diff line change
@@ -1,13 +1,37 @@
     # Final Project
-    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.
+    A full-stack web application where users can discover and create flea markets (“loppis”) nearby. The app allows people to browse events on a map, add their own flea markets with details and images, and interact with the community.
     ## 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?
+    We wanted to make it easier for people to find and share local flea markets in a simple and user-friendly way. To achieve this, we built a responsive web app with the following approach:
+    - **Planning:** We started by breaking down the project into core features, user registration & login, map integration, creating new flea markets, and browsing events. We also created a design in figma and a flowchart.
+    - **Frontend:** Built with React, Tailwind CSS, React Router, Zustand, and Leaflet for interactive maps. We also used libraries for e.g. keen-slider, react focus lock and then lucide for icons.
+    - **Backend:** Node.js with Express, MongoDB (Atlas) for data storage, Nominatim API for Open Source Street Map and Cloudinary for image handling. Swagger/OpenAPI for API documentation. Also other libraries like multer to be able to handle formdata submittion with different file formats.
+    - **Techniques:** We focused on reusable components, clean state management with hooks, and a mobile-first design.
+    - **Next steps:**
+    With more time, we would like to:
+    - Allow users to upload a profile picture, edit contact information, and choose dark mode.
+    - Automatically filter out flea markets with past dates.
+    - Add more flexible scheduling options when creating an event, e.g. “every Sunday until further notice.”
+    - Let users click “add to calendar” so their calendar app opens with the flea market details pre-filled.
+    - Improve the user experience with more transitions and animations.
+    - Implement a global error handler to manage larger issues such as network failures.
+    # Credits
+    - [Bianca Van Dijk](https://pixabay.com/users/biancavandijk-9606149/) – images from Pixabay
     ## 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.
+    [Live demo on Netlify]
+    https://runthornet.netlify.app/
+    [Backend on Render]
+    https://runthornet-api.onrender.com/

backend/middleware/authMiddleware.js

-Original file line number
+Diff line change
@@ -0,0 +1,22 @@
+    import { User } from "../models/User.js"
+    export const authenticateUser = async (req, res, next) => {
+      try {
+        const accessToken = req.header("Authorization")
+        const user = await User.findOne({ accessToken: accessToken })
+        if (user) {
+          req.user = user
+          next()
+        } else {
+          res.status(401).json({
+            message: "Authentication missing or invalid.",
+            loggedOut: true
+          })
+        }
+      } catch (error) {
+        res.status(500).json({
+          message: "Internal server error",
+          error: error.message
+        });
+      }
+    }

backend/models/Like.js

-Original file line number
+Diff line change
@@ -0,0 +1,23 @@
+    import mongoose from "mongoose"
+    const likeSchema = new mongoose.Schema({
+      user: {
+        type: mongoose.Schema.Types.ObjectId,
+        ref: "User",
+        required: true
+      },
+      loppis: {
+        type: mongoose.Schema.Types.ObjectId,
+        ref: "Loppis",
+        required: true
+      },
+      createdAt: {
+        type: Date,
+        default: Date.now
+      }
+    })
+    // Ensure that a user can only like a loppis once
+    likeSchema.index({ user: 1, loppis: 1 }, { unique: true })
+    export const Like = mongoose.model("Like", likeSchema)

backend/models/Loppis.js

-Original file line number
+Diff line change
@@ -0,0 +1,114 @@
+    import mongoose from 'mongoose'
+    const loppisSchema = new mongoose.Schema({
+      title: {
+        type: String,
+        required: true,
+        minLength: 5,
+        maxLength: 50
+      },
+      location: {
+        address: {
+          street: String,
+          city: String,
+          postalCode: String,
+          country: {
+            type: String,
+            default: 'Sweden'
+          }
+        },
+        coordinates: {
+          type: {
+            type: String,
+            enum: ['Point'],
+            default: 'Point'
+          },
+          coordinates: {
+            type: [Number], // [longitude, latitude]
+            required: true
+          },
+        },
+      },
+      dates: [
+        {
+          date: {
+            type: Date,
+            required: true
+          },
+          startTime: {
+            type: String, // HH:MM format
+            required: true
+          },
+          endTime: {
+            type: String, // HH:MM format
+            required: true
+          }
+        }
+      ],
+      categories: {
+        type: [String],
+        required: true,
+        enum: [
+          "Vintage",
+          "Barn",
+          "Trädgård",
+          "Kläder",
+          "Möbler",
+          "Böcker",
+          "Husdjur",
+          "Elektronik",
+          "Kök",
+          "Blandat"
+        ],
+        default: "Blandat"
+      },
+      description: {
+        type: String,
+        maxLength: 500
+      },
+      likes: {
+        type: Number,
+        default: 0,
+        min: 0
+      },
+      images: [{ type: String }],      // bara public_id
+      coverImage: { type: String },    // public_id
+      createdAt: {
+        type: Date,
+        default: Date.now
+      },
+      createdBy: {
+        type: mongoose.Schema.Types.ObjectId,
+        ref: 'User'
+      }
+    })
+    // Pre-save hook to automatically geocode address
+    loppisSchema.pre('save', async function (next) {
+      if (this.isModified('location.address')) {
+        const { street, city, postalCode } = this.location.address
+        const query = `${street}, ${postalCode} ${city}, Sweden`
+        try {
+          const url = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=1`
+          const response = await fetch(url)
+          const data = await response.json()
+          if (data.length > 0) {
+            const { lat, lon } = data[0]
+            this.location.coordinates = {
+              type: 'Point',
+              coordinates: [parseFloat(lon), parseFloat(lat)]
+            }
+          } else {
+            throw new Error('Address not found')
+          }
+        } catch (error) {
+          return next(error)
+        }
+      }
+      next()
+    })
+    export const Loppis = mongoose.model('Loppis', loppisSchema)

backend/models/User.js

-Original file line number
+Diff line change
@@ -0,0 +1,27 @@
+    import mongoose from "mongoose"
+    import crypto from "crypto"
+    const userSchema = new mongoose.Schema({
+      firstName: {
+        type: String,
+        required: true,
+      },
+      lastName: {
+        type: String,
+      },
+      email: {
+        type: String,
+        required: true,
+        unique: true
+      },
+      password: {
+        type: String,
+        required: true
+      },
+      accessToken: {
+        type: String,
+        default: () => crypto.randomBytes(128).toString("hex")
+      }
+    })
+    export const User = mongoose.model("User", userSchema)

backend/package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -12,9 +12,18 @@ @@
         "@babel/core": "^7.17.9",
         "@babel/node": "^7.16.8",
         "@babel/preset-env": "^7.16.11",
+        "bcrypt-nodejs": "^0.0.3",
+        "cloudinary": "^2.7.0",
         "cors": "^2.8.5",
+        "dotenv": "^17.2.1",
         "express": "^4.17.3",
+        "express-list-endpoints": "^7.1.1",
+        "luxon": "^3.7.1",
         "mongoose": "^8.4.0",
-        "nodemon": "^3.0.1"
+        "multer": "^2.0.2",
+        "nodemon": "^3.0.1",
+        "sharp": "^0.34.3",
+        "swagger-jsdoc": "^6.2.8",
+        "swagger-ui-express": "^5.0.1"
       }
-    }
+    }

backend/routes/geocodeRoutes.js

-Original file line number
+Diff line change
@@ -0,0 +1,137 @@
+    import express from "express"
+    const router = express.Router()
+    // Swagger
+    /**
+     * @openapi
+     * tags:
+     *   name: Geocoding
+     *   description: Endpoints for converting between addresses and geographic coordinates using OpenStreetMap Nominatim.
+     */
+    // Forward geocoding route
+    /**
+     * @openapi
+     * /api/geocode:
+     *   get:
+     *     tags:
+     *       - Geocoding
+     *     summary: Forward geocode an address or place
+     *     description: Uses OpenStreetMap Nominatim to convert an address or place name into coordinates.
+     *     parameters:
+     *       - in: query
+     *         name: q
+     *         required: true
+     *         schema:
+     *           type: string
+     *         description: Search query (address, place name, etc.)
+     *     responses:
+     *       200:
+     *         description: Geocoding result
+     *         content:
+     *           application/json:
+     *             schema:
+     *               type: array
+     *               items:
+     *                 type: object
+     *       400:
+     *         description: Missing query parameter
+     *       500:
+     *         description: Upstream error
+     */
+    router.get("/", async (req, res) => {
+      const q = req.query.q
+      if (!q) return res.status(400).json({ error: "Missing q" })
+      // Build Nominatim URL
+      const url = new URL("https://nominatim.openstreetmap.org/search")
+      url.searchParams.set("q", String(q))
+      url.searchParams.set("format", "json")
+      url.searchParams.set("limit", "1")
+      url.searchParams.set("addressdetails", "1")
+      url.searchParams.set("countrycodes", "se")
+      try {
+        const r = await fetch(url, {
+          headers: {
+            // Required by Nominatim policy: identify your app + contact
+            "User-Agent": `LoppisApp/1.0 (${process.env.GEOCODER_CONTACT ?? "malinelundgren1991@gmail.com"})`,
+            "Accept": "application/json",
+          },
+        })
+        if (!r.ok) {
+          return res.status(r.status).json({ error: "Geocoding failed" })
+        }
+        const data = await r.json()
+        res.json(data)
+      } catch (e) {
+        console.error("Geocode proxy error:", e)
+        res.status(500).json({ error: "Upstream error" })
+      }
+    })
+    // Reverse geocoding route
+    /**
+     * @openapi
+     * /api/geocode/reverse:
+     *   get:
+     *     tags:
+     *       - Geocoding
+     *     summary: Reverse geocode coordinates
+     *     description: Uses OpenStreetMap Nominatim to convert latitude/longitude into a human-readable address.
+     *     parameters:
+     *       - in: query
+     *         name: lat
+     *         required: true
+     *         schema:
+     *           type: number
+     *         description: Latitude
+     *       - in: query
+     *         name: lon
+     *         required: true
+     *         schema:
+     *           type: number
+     *         description: Longitude
+     *     responses:
+     *       200:
+     *         description: Reverse geocoding result
+     *         content:
+     *           application/json:
+     *             schema:
+     *               type: object
+     *       400:
+     *         description: Missing coordinates
+     *       500:
+     *         description: Upstream error
+     */
+    router.get("/reverse", async (req, res) => {
+      const { lat, lon } = req.query
+      if (!lat || !lon) return res.status(400).json({ error: "Missing coordinates" })
+      // Nominatim URL
+      const url = new URL("https://nominatim.openstreetmap.org/reverse")
+      url.searchParams.set("lat", lat)
+      url.searchParams.set("lon", lon)
+      url.searchParams.set("format", "json")
+      try {
+        const r = await fetch(url, {
+          headers: {
+            // Required by Nominatim policy: identify your app + contact
+            "User-Agent": `LoppisApp/1.0 (${process.env.GEOCODER_CONTACT ?? "malinelundgren1991@gmail.com"})`,
+            "Accept": "application/json",
+          },
+        })
+        if (!r.ok) {
+          return res.status(r.status).json({ error: "Geocoding failed" })
+        }
+        const data = await r.json()
+        res.json(data)
+      } catch (e) {
+        console.error("Geocode proxy error:", e)
+        res.status(500).json({ error: "Upstream error" })
+      }
+    })
+    export default router

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Malin och Mimmi + Final Project #120

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Malin och Mimmi + Final Project #120

Are you sure you want to change the base?

Uh oh!

Malin och Mimmi + Final Project #120

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!