Final project-ParkHive

README.md

@@ -1,13 +1,39 @@
-# Final Project
+<h1 align="center">
+  <a href="">
+    <img src="./parkHive-cover.png" alt="Project Banner Image">
+  </a>
+</h1>
 
-Replace this readme with your own information about your project.
+# Final Project
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+ParkHive is a website about introducing national parks both in Finland and Sweden.  For nature lovers in Sweden and Finland to gather information about national parks. 
 
 ## 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?
+- This is the first project we combine both frontend and backend. Setting database is relatively easy since our data is small. But we want to make the website as real as possible, we want user can save parks to their own account, we had to change the api for adding and removing parks. We also use localStorage to keep the data. Now once the user login.
+
+- [Leaflet](https://leafletjs.com/) has been implemented in our work to display each parks' location. At the beginning we use the default code but the marker didn't show on the map after deployment. We checked the official website again as well as youtube to find other people's solution. In the end, we use custom icon instead of default marker. 
+
+- It was not hard if only use libraries' code, but to figure out the customize one was not easy especially in a limited time. For example, the arrows of carousel, marker icon of the map. We will work on cusomized arrows of carousel later. 
+
+## Documentation
+
+We have documented all the resources and libraries in separate README files for both the backend and frontend. You can find the detailed documentation in the respective directories:
+- [Backend README](./backend/README.md)
+- [Frontend README](./frontend/README.md)
+
+## Design inspiration
+
+Our website design was mainly inpired by [Visit Finland](https://www.visitfinland.com/en/), combined with our own style to create ParkHive. 
+We also took inspiration from [Skåne](https://visitskane.com/). 
+
+[Design in Figma](https://www.figma.com/design/WACN2weddzXbjb0yrVwHyx/National-Parks?node-id=20-576&t=1mGpOpHNuaNr9GFL-1)
 
 ## 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.
+- [ParkHive Frontend Link](https://parkhive.netlify.app)
+- [ParkHive Backend Link](https://parkhive.onrender.com)
+
+## Collabrators' portfolio
+- [Yia Tsai](https://yia-porfolio.netlify.app/)
+- [Trista Shan](https://trista-portfolio.netlify.app/)

backend/README.md

@@ -1,8 +1,11 @@
-# Backend part of Final Project
+# Backend part of Final Project - Park Hive
 
 This project includes the packages and babel setup for an express server, and is just meant to make things a little simpler to get up and running with.
 
-## Getting Started
+## Description 
 
-1.  Install the required dependencies using `npm install`.
-2.  Start the development server using `npm run dev`.
+National parks' JSON file was made by ChatGPT. Database has been set up on mongo compass. 
+For login/sign up, we will try Passport if we have time before deadline.
+
+### Live
+[ParkHive API](https://parkhive.onrender.com/)

backend/package.json

@@ -12,9 +12,13 @@
     "@babel/core": "^7.17.9",
     "@babel/node": "^7.16.8",
     "@babel/preset-env": "^7.16.11",
+    "bcrypt": "^5.1.1",
     "cors": "^2.8.5",
+    "dotenv": "^16.4.5",
     "express": "^4.17.3",
+    "express-list-endpoints": "^7.1.0",
+    "mongodb": "^6.6.2",
     "mongoose": "^8.4.0",
     "nodemon": "^3.0.1"
   }
-}
+}

backend/server.js

@@ -1,31 +1,257 @@
 import express from "express";
 import cors from "cors";
-import mongoose from 'mongoose'
+import mongoose, {Schema, model}from 'mongoose'
+import expressListEndpoints from 'express-list-endpoints';
+import dotenv from "dotenv"
+import bcrypt from "bcrypt"
+import parkData from "./data/park.json"
 
-const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/flowershop"
+
+dotenv.config()
+
+const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/park-hive"
 mongoose.connect(mongoUrl)
 mongoose.Promise = Promise
 
+//setup Schema
+const parkSchema = new Schema({
+  "nation": String,
+  "name": String,
+  "address": String,
+  "rating": Number,
+  "opening_hours": String,
+  "parking_info": String,
+  "location": {
+    "latitude": Number,
+    "longitude": Number,
+  },
+  "introduction": String
+});
+
+const userSchema = new Schema({
+  name: {
+    type: String,
+    required: true
+  },
+  email: {
+    type: String,
+    required: true,
+    unique: true
+  },
+  password: {
+    type: String,
+    required: true
+  },
+  token: {
+    type: String,
+    default: () => bcrypt.genSaltSync()
+  },
+  favourites: [{
+    type: mongoose.Schema.Types.ObjectId,
+    ref: "Park"
+  }]
+})
+//set model
+const Park = mongoose.model ("Park", parkSchema)
+const User = mongoose.model ("User", userSchema)
 
+//seed the database
+if(process.env.RESET_DATABASE){
+  console.log("restting database")
+  const seedDatabase = async() => {
 
+    await Park.deleteMany()
+    parkData.forEach(park => {
+      new Park(park).save()
+    })
+  }
+  seedDatabase()
+}
 // 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:
 // PORT=9000 npm start
 const port = process.env.PORT || 8080;
 const app = express();
 
+function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+}
 // Add middlewares to enable cors and json body parsing
 app.use(cors());
 app.use(express.json());
 
 // Start defining your routes here
 // http://localhost:8080/
 app.get("/", (req, res) => {
-  res.send("Hello Technigo!");
+  const endpoints = expressListEndpoints(app);
+  res.json(endpoints)
+});
+
+app.get("/parks", async (req, res) => {
+  try {
+    // Check if query parameters are provided
+    const nationName = req.query.nation;
+    const parkName = req.query.name;
+
+    if (nationName) {
+      const escapedNationName = escapeRegExp(nationName);
+      const nationRegex = new RegExp(escapedNationName, "i");
+
+      const nationResult = await Park.find({ nation: nationRegex });
+
+      if (nationResult.length > 0) {
+        return res.json(nationResult);
+      } else {
+        return res.status(404).send("No park data was found for the specified nation.");
+      }
+    }
+
+    if (parkName) {
+      const escapedParkName = escapeRegExp(parkName);
+      const nameRegex = new RegExp(escapedParkName, "i");
+
+      const nameResult = await Park.find({ name: nameRegex });
+
+      if (nameResult.length > 0) {
+        return res.json(nameResult);
+      } else {
+        return res.status(404).send("No park data was found for the specified name.");
+      }
+    }
+
+    // If no query parameters, return all parks
+    const allParks = await Park.find();
+    if (allParks.length > 0) {
+      return res.json(allParks);
+    } else {
+      return res.status(404).send("No park data was found.");
+    }
+
+  } catch (err) {
+    res.status(500).send("An error occurred while fetching park data.");
+  }
 });
 
 
+app.get("/parks/:id", async (req, res) => {
+
+  try {
+    const id = req.params.id;
+    if (!mongoose.Types.ObjectId.isValid(id)) {
+      return res.status(400).send("Invalid park ID.");
+    }
+
+    const parkById = await Park.findById(id);
+    if (parkById) {
+      res.json(parkById);
+    } else {
+      res.status(404).send("No park data was found.");
+    }
+  } catch (err) {
+    res.status(500).send("An error occurred while fetching park data.");
+  }
+})
+
+//auth
+app.post("/register", (req,res) => {
+  try{
+    const {name, email, password} = req.body
+    const salt = bcrypt.genSaltSync()
+    const user = new User({
+      name, 
+      email,
+      password:bcrypt.hashSync(password, salt)
+    })
+    user.save()
+    res
+      .status(201)
+      .json({ 
+        success: true,
+        message: "User created",
+        id: user._id,
+        accessToken: user.accessToken
+      });
+  } catch (err) {
+    res.redirect("/register")
+    res.status(400).json({
+      message: "Could not create user.",
+      errors: err.errors,
+    });
+  }
+})
+
+app.post("/login", async (req, res) => {
+  const matchUser = await User.findOne({
+    email: req.body.email,
+  });
+  if (matchUser && bcrypt.compareSync(req.body.password, matchUser.password)) {
+    res.json({
+      message: "User logged in.",
+      matchUserId: matchUser._id,
+      token: matchUser.token,
+    });
+  } else {
+    res.redirect("/register")
+    res.json({ message: "User not found." });
+  }
+});
+
+const authenticateUser = async (req, res, next) => {
+  const user = await User.findOne({
+    token: req.header("Authorization"),
+  });
+  if (user) {
+    req.user = user;
+    next();
+  } else {
+    res.status(401).json({
+      message: "failed.",
+    });
+  }
+};
+
+app.get("/secrets", authenticateUser);
+app.get("/secrets", (req, res) => {
+  res.json({
+    secret: "This is secrets.",
+  });
+});
+
+app.post ("/add-favourite", authenticateUser, async (req, res) => {
+  try {
+    const user = req.user
+    const parkId = req.body.parkId
+    user.favourites.push(parkId)
+    await user.save()
+    res.status(200).json({message: "park added to favourites"})
+  } catch (error) {
+    res.status(500).json({message: "Failed to add park to favourites", error})
+  } 
+})
+
+app.post ("/remove-favourite", authenticateUser, async (req, res) => {
+  try {
+    const user = req.user
+    const parkId = req.body.parkId
+    user.favourites.pull(parkId)
+    await user.save()
+    res.status(200).json({message: "park removed from favourites"})
+  } catch (error) {
+    res.status(500).json({message: "Failed to remove park to favourites", error})
+  }
+})
+
+app.get("/favourites", authenticateUser, async (req, res) => {
+  try {
+    const user = req.user
+    const favourites = await User.findById(user._id).populate("favourites").exec()
+    res.status(200).json(favourites)
+  } catch( error) {
+    es.status(500).json({ message: 'Failed to get favourites', error });
+  }
+})
+
 // Start the server
 app.listen(port, () => {
   console.log(`Server running on http://localhost:${port}`);
-});
+});

frontend/README.md

@@ -1,8 +1,33 @@
 # Frontend part of Final Project
 
-This boilerplate is designed to give you a head start in your React projects, with a focus on understanding the structure and components. As a student of Technigo, you'll find this guide helpful in navigating and utilizing the repository.
+[ParkHive](https://parkhive.netlify.app/)
 
-## Getting Started
+## Libraries and recources
 
-1.  Install the required dependencies using `npm install`.
-2.  Start the development server using `npm run dev`.
+During the process of our final project, it was fun to explore more libraries for implementation.
+
+1. Weather in Helsinki and stockholm will be displayed on web pages. 
+- Regarding the time zone, we use [Moment Timezone](https://momentjs.com/timezone/)
+- External API [Open Weather](https://openweathermap.org/current)
+- Icon 
+
+2. Back-to-top button
+- [react-scroll-to-top](https://www.npmjs.com/package/react-scroll-to-top)
+
+3. Map for each parks
+- Since Google map API is only for free 3 months, so we use [React Leaflet](https://react-leaflet.js.org/) instead of using Google Map. 
+
+4. Carousel
+- We use [react-multi-carousel](https://www.npmjs.com/package/react-multi-carousel) for displaying parks.
+
+5. Styling
+- Tailwind CSS
+
+6. Timezone
+- This website introduces parks from two countries: Finland and Sweden. [Moment Timezone](https://momentjs.com/timezone/) has been used. 
+
+7. Animation
+- [LottieFiles](https://lottiefiles.com/) when data is loading.
+
+8. Forms
+- Signup, login forms and parks' rating: [MUI](https://mui.com/)