Skip to content

Latest commit

 

History

History
97 lines (79 loc) · 2.96 KB

README.md

File metadata and controls

97 lines (79 loc) · 2.96 KB

pollinator_haven

==== A full CRUD app built for Citizen Scientists for viewing and cataloging existing pollinator gardens in a local area. Complete with community and educational resources.

Pollinator Haven on Heroku

Project Trello Board

SHORT GOAL

  • Home Page can show species sightings/observations or locations of pollinator gardens or plants.
  • Give user access to add plants and pollinators to their own GARDEN page.
    • Complete with meta data.
  • Allow users to add their garden to garden INDEX/HOME page.

Will require two models. Gardens and garden contents

LONG GOAL

  • Give user access to education resources on pollinators and pollinator plants for their region.
  • ADD Google maps API to plot locations of gardens and species sightings.
  • Allow users to add photos from their phone.

WIREFRAMES

Wire Frame 1 Wire Frame 2

Developer Environment Installations:

  1. npm init
  2. npm i express
  3. npm i ejs
  4. npm i method-override
  5. npm i mongoose
  6. npm i express-session
  7. npm i bcrypt
  8. npm i bootstrap
  9. npm i jquery
  10. npm i popper.js
  11. npm i multer

Uploading Images

TUTORIAL: https://www.youtube.com/watch?v=srPXMt1Q0nY

  1. Install multer to parse form data bodies (for type=file).
  • npm i multer
  1. Require multer in the controller and initialize it with upload. Set the destination to uploads
const multer = require('multer');
const upload = multer({dest: 'uploads/'});
  1. Pass MIDDLEWARE into POST route to handle incoming request. 3.1. Add enctype="multipart/form-data" to your form tag.
router.post('/', upload.single('image'), (req,res) => {
  res.send(req.body);
})
  • Can now access req.file from form data.
  • TIP: Make sure the form input name is the same as the name passed through upload.single().
upload.single('image')
Upload Image: <input type="file" name="image"><br>
  1. Add a storage method and update the upload method to reflect.
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, './uploads');
  },
  filename: (req, file, cb) => {
    cb(null, new Date().toISOString() + file.originalname)
  }
});

const upload = multer({storage: storage});
  1. Edit model to store image info in mongoDB.
  2. Set the object image to the path of the image.
  3. Make uploads publicly available.

Structure:

  • The My Garden page is an index view of species.
  • The Home page is an index view of all gardens and species/sightings.
  • Species and sightings are created through the same model.

Nature Resources

Steps for improvement

  • Give users their own garden access.
  • Home page with common plants and pollinators that can be added to a user's garden.
  • STYLING and Mobile Optimization.
  • Location populates to location field.
  • Locations shown on map.
  • Connecting sightings.