- Simple fullstack app where users can make posts of California parks, write a description, and give a rating. Users can also comment & rate other posts.
- Uses EJS (Embedded JavaScript) templates for the frontend and requests processed on the backend with an Express server. Parks are saved in a hosted Mongodb database, MongoDB Atlas. Images are saved in a hosted cloud database, Cloudinary. Mapbox is used for location and displaying maps.
- Users can register, login, and logout; full Create Read Update Delete (CRUD) functionality for making posts where users can write a description of a park, upload pictures, and add the location. If they choose, they can delete their post. Also, users can post a rating of the park and leave comments, users can comment on other users' posts, but cannot delete others' posts or comments.
- Uploading images takes more writing and research than just posting to the server and database. The form type is different, the html forms need to be
multipart/form-datato send files. Multer middleware helps by adding a file (or files) object to the request object. The request object is received by the Express server, the file is uploaded to Cloudinary, and MongoDB holds the link. The reason for this is MongoDB isn't the best place to hold images, so a hosted cloud database like Cloudinary was needed. - Joi validation does not work with files. So image uploads are problematic and the Joi middleware has to work around the file upload.
- One issue that is still being worked on is the lag in loading images and split-second display of a login and register form.
- Node.js
- Express server
- MongoDB Atlas for cloud hosted database
- EJS View Engine for frontend user interface
- Passport for authentication
- Passport Local local username and password strategy
- Cloudinary for hosted image storage
- Multer handling multipart/form-data, in this case, sending images
- Mapbox for cluster map and park location
- Joi for validation
- Bootstrap frontend framework
- Normally, the setup would be to clone this repo, change directory into it, then type
npm install, however because of the environment variables for MongoDB Atlas, Cookie Session secret, etc, and the associated setup with those services the easiest method is click on the link to the Heroku site either here or below:
link: https://whispering-thicket-78456.herokuapp.com/
- User register, login, and logout
- Create, Read, Update, & Delete (CRUD) posts
- User authorization: only the creator of a post can delete their post
- Image upload for parks using Cloudinary
- User rating (5-star) and comments for other parks
- Cluster map for all parks
- Map for individual park location
- The inspiration for this app was Yelp and a few tutorials with an Express server, Passport, Mongoose, MongoDB Atlas, Mapbox, and Cloudinary.
- repo created by Don Spire Nspired1, email: don.spire1@gmail.com