/daVjncjDissonance.theTechBlog

blog site built with mern stack/paradigms

Primary LanguageCSSBoost Software License 1.0BSL-1.0

14 Model-View-Controller (MVC): 'daVjncjDissonance: the tech blog'

Your Task:

<!--
- consider deployment at first connection
-complete full connection to database/seed to database
- create database models/tables, what do I want to save, how do I want to organize them, for reference?
-considering building out front end logic/code/templateEngine
-for every htmlTemp a display rout is required, for every piece of info stored - it needs to be sent to database(manipulated however 4 whatever) to then be sent back for whatever the requet, to be displayed in whatever fashion for whatever reason
- login page logic needs to be handled, data needs to grant/deny access
-->

Writing about tech can be just as important as making it. Developers spend plenty of time creating new applications and debugging existing codebases, but most developers also spend at least some of their time reading and writing about technical concepts, recent advancements, and new technologies. A simple Google search for any concept covered in this course returns thousands of think pieces and tutorials from developers of all skill levels!

Your task this week is to build a CMS-style blog site similar to a Wordpress site, where developers can publish their blog posts and comment on other developers’ posts as well. You’ll build this site completely from scratch and deploy it to Heroku. Your app will follow the MVC paradigm in its architectural structure, using Handlebars.js as the templating language, Sequelize as the ORM, and the express-session npm package for authentication.

User Story

AS A developer who writes about tech
I WANT a CMS-style blog site
SO THAT I can publish articles, blog posts, and my thoughts and opinions

Acceptance Criteria

GIVEN a CMS-style blog site
WHEN I visit the site for the first time
THEN I am presented with the homepage, which includes existing blog posts if any have been posted; navigation links for the homepage and the dashboard; and the option to log in <!--will have to write in authentication routing-->
WHEN I click on the homepage option
THEN I am taken to the homepage<!--handle routing to the hopmPage, from every possible page-->
WHEN I click on any other links in the navigation 
THEN I am prompted to either sign up or sign in<!--any route other than / reqs authentication-->
WHEN I choose to sign up
THEN I am prompted to create a username and password<!--this is accomplished-->
WHEN I click on the sign-up button
THEN my user credentials are saved and I am logged into the site
WHEN I revisit the site at a later time and choose to sign in
THEN I am prompted to enter my username and password
WHEN I am signed in to the site
THEN I see navigation links for the homepage, the dashboard, and the option to log out <!--focus on building MVP first, then add in da Vjncj code-->
WHEN I click on the homepage option in the navigation
THEN I am taken to the homepage and presented with existing blog posts that include the post title and the date created
WHEN I click on an existing blog post
THEN I am presented with the post title, contents, post creator’s username, and date created for that post and have the option to leave a comment <!--study previous database driven client code-->
WHEN I enter a comment and click on the submit button while signed in
THEN the comment is saved and the post is updated to display the comment, the comment creator’s username, and the date created <!--routs based on user requests/asyns.await functionality/error handling all built into routes-->
WHEN I click on the dashboard option in the navigation
THEN I am taken to the dashboard and presented with any blog posts I have already created and the option to add a new blog post <!--all user input recorded-->
WHEN I click on the button to add a new blog post
THEN I am prompted to enter both a title and contents for my blog post
WHEN I click on the button to create a new blog post
THEN the title and contents of my post are saved and I am taken back to an updated dashboard with my new blog post <!---store to database upon user request-->
WHEN I click on one of my existing posts in the dashboard
THEN I am able to delete or update my post and taken back to an updated dashboard <!--enable routing for updating/deleting-->
WHEN I click on the logout option in the navigation
THEN I am signed out of the site <!--rout for exiting/logginOut of site-->
WHEN I am idle on the page for more than a set time
THEN I am automatically signed out of the site <!--I must monitor sessions/limit idle time-->

Mock-Up

The following animation demonstrates the application functionality:

Animation cycles through signing into the app, clicking on buttons, and updating blog posts.

Getting Started

Your application’s folder structure must follow the Model-View-Controller paradigm. You’ll need to use the express-handlebars package to implement Handlebars.js for your Views, use the MySQL2 and Sequelize packages to connect to a MySQL database for your Models, and create an Express.js API for your Controllers.

You’ll also need the dotenv package to use environment variables, the bcrypt package to hash passwords, and the express-session and connect-session-sequelize packages to add authentication.

Grading Requirements

This homework is graded based on the following criteria:

Technical Acceptance Criteria: 40%

  • Satisfies all of the preceding acceptance criteria plus the following:

    • Application’s folder structure follows the Model-View-Controller paradigm.

    • Uses the express-handlebars package to implement Handlebars.js for your Views.

    • Application must be deployed to Heroku.

Deployment: 32%

  • Application deployed at live URL.

  • Application loads with no errors.

  • Application GitHub URL submitted.

  • GitHub repository contains application code.

Application Quality: 15%

  • User experience is intuitive and easy to navigate.

  • User interface style is clean and polished.

  • Application resembles the mock-up functionality provided in the homework instructions.

Repository Quality: 13%

  • Repository has a unique name.

  • Repository follows best practices for file structure and naming conventions.

  • Repository follows best practices for class/id naming conventions, indentation, quality comments, etc.

  • Repository contains multiple descriptive commit messages.

  • Repository contains quality readme file with description, screenshot, and link to deployed application.

Review

You are required to submit BOTH of the following for review:

  • The URL of the functional, deployed application.

  • The URL of the GitHub repository, with a unique name and a readme describing the project.


© 2020 Trilogy Education Services, LLC, a 2U, Inc. brand. Confidential and Proprietary. All Rights Reserved.