aplybeah/grapevine

General Assembly Project 2

Grapevine

General Assembly Project 2

About:

Grapevine is a online blogging app dedicated to keeping the conversation going about local topics. The app features full CRUD on making articles, and a comment feature. Future aspects will include an upvote function which will priority sort the articles, and a sign-in feature.

Technologies:

In this app, I used a MEHN stack with external CSS. If I were to redo this project, I would probably use Bootstrap, or some other design tmeplate to save time. I've noticed that everytime I got frustrated with smething on this project, I would go back to the CSS and spend a lot of time there. One thing I am very proud of is how I formatted the forms for the app:

textarea {
  display: inherit;
  width: 900px;
  font-size: 18px;
  font-family: "Righteous", cursive;
  background-color: rgba(255, 255, 255, 0.5);
  border: 0.5px solid rgba(255, 255, 255, 0.5);
}

<div class="centerspace">
    <form action="/article" method="POST">
        <input type="text" name="title" id="title" maxlength="50" placeholder="Title">
        <textarea rows="16" cols="90" name="content" id="" placeholder="Say Something..."></textarea><br>
        <input type="submit" value="Post">
    </form>
</div>

it wasn't too difficult to make them look nice, eg. with different fonts in the forms or adding character limits. In fact, I may be using these as templates for forms in later projects. One of the more challenging aspects of this project was connecting my two models. One solution to this problem was creating an embedded Schema in the article model. It made it easier to callback content in the database, and it was one of the only ways that made making the comment section into an array.

Credits:

Photo by Amos Bar-Zeev on Unsplash

grapevine's Issues

Mongoose connection twice

You have mongoose.connect twice in connection.js - that will likely cause some issues connecting to your database in production!

Grapevine/db/connection.js

Line 2 in a13a8e2

mongoose.connect("mongodb://localhost/grapevine");

Condense this

This:

Grapevine/controllers/article.js

Lines 1 to 2 in a13a8e2

	const { Article } = require("../models/index");
	const { Comment } = require("../models/index");

can just be this:

const { Article, Comment } = require("../models/index"); 

This is cool!

Really cool to see you using this:

Grapevine/controllers/article.js

Lines 28 to 33 in a13a8e2

	Article.findByIdAndUpdate(req.params.id, {
	$set: {
	title,
	content
	}
	}).then(article => {

Adding comments

You may not need a controller for Comments, you can probably get away with doing this in your Article controller, since adding a comment is just updating the comments array in your Article model.

Your Article and Comment models

Make it so your Article model is referencing your Comment model

Grapevine/models/article.js

Line 7 in a13a8e2

comments: [{ content: String }],

These validations are awesome

It's really awesome that you're using these validations! Add more for your other model properties!

Grapevine/models/article.js

Lines 8 to 11 in a13a8e2

	createdAt: {
	type: Date,
	default: Date.now
	}