andrewjbateman / mehn-stack-published

:clipboard: This app displays publications for multiple authors in Bootstrap cards. It uses the MongoDB, Express, Handlebars & Node.js (MEHN) stack to perform Create, Read, Update and Delete (CRUD) operations.

⚡ MEHN Stack Published

• This app displays publications for multiple authors in Bootstrap cards.
• Uses the MongoDB, Express, Handlebars & Node.js (MEHN) stack to perform Create, Read, Update and Delete (CRUD) operations.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ MEHN Stack Published
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Login authentication using google auth API
• After authentication dashboard displays list of publications for the person logged in
• Side menu has navigation to all public publications and a logout link
• Public publications page displays everyones publications stored in the MongoDB that have 'public' status

📷 Screenshots

📶 Technologies

• Express Handlebars v4 view engine for Express

• Express method-override to be able to use HTTP verbs PUT or DELETE

• Bootstrap v4 components and styles

• font-awesome v5 iconic SVG, font, and CSS toolkit

• Materialize v1 front-end framework based on Material Design

• moment v2 to convert UTC date to a more readable format

• CKEditor v4 to add a wysiwyg editor for creating/editing publications

• Express v4 fromework for Node.js

• express session v1 to save session data

• Mongoose v5

• passport v0.4.1 authentication for Node.js

• connect-mongo v4 MongoDB session store for Express

• cors Cross Origin Resource Sharing Connect/Express middleware

• morgan v1 HTTP request logger middleware for node.js

• cross-env v7 to run scripts that set and use environment variables across platforms

• blindtextgenerator Lorem Ipsum to create text to fill publications cards for testing

💾 Setup

• Create a .env file and add MONGO_URI connection string - see .env.example
• npm run dev to run handlebars client and backend server concurrently. Navigate to http://localhost:3000/ to see frontend (refresh after changes - does not auto-update).

💻 Code Examples

• routes/publications.js method to add the new article to the database

// desc    Process the add form
// route   POST /publications
router.post('/', ensureAuth, async (req, res) => {
  try {
    req.body.user = req.user.id;
    await Publication.create(req.body);
    res.redirect('/dashboard');
  } catch (err) {
    console.error(err);
    res.render('error/500');
  }
});

🆒 Features

• In dev - Front and backends are run with one command

📋 Status & To-Do List

• Status: Mostly working. Refactor - add controllers and add functionality. Change 'read more' footer to floating buttons?
• To-Do: not seeing css file - fix. Fix CKEDITOR error. replace moment with smaller version. Correct grid of cards to even row height.
• To-Do: backend code separates Express controller functions from routes
• To-Do: Updating a note will automatically update the date so it goes to the front of the (date-sorted) notes list

👏 Inspiration

• Traversy Media: Node.js App From Scratch | Express, MongoDB & Google OAuth

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]