chpmnrssll/headline-creation-tool

Headline Creation Tool

Headline Creation Tool and Rendering API

Based on the MEVN stack
Mongo Express VueJS Node

Local Setup/Development

Edit your environment variables in .env as needed.

To develop using this project you can run

$ npm run dev:serve & npm run dev:client

This will allow hot reloading of both changes to the server and changes to the client.

The server will require you to be running a local instance of MongoDB.

npm run static will build the client-side JavaScript and start the hot reloading of the server environment.

npm run dev:serve can also be used to just start the API if you are working on that prior to worrying about the client.

Scripts

A more detailed breakdown of the scripts are as follows:

Command npm run	Server	Client
start	Static	Static (requires npm run build)
dev:serve	Hot reload	Static
dev:client	None	Hot Reload
build	None	Bundled by Webpack
static	Hot reload	Bundled by Webpack

Project Structure

Backend

/src

--/controllers/-- Contains controllers for our API resources. --/database/ ----/models/-- Contains the models for our API Resources using Mongoose. --/middleware/-- Any middleware you may need can go here. --/routes/-- All route definitions are here. ----/api.js-- Routes for the API. ----/headlines.js-- Routes specific to the headline resource.

Frontend

/views --/config/http.js-- Axios config for local request --/pages/-- Separate Component Pages go here. --/router/index.js-- Config for vue-router --/App.vue-- Component that has Nav-Drawer, Footer, and Toolbar wrapped around a router view of other components. --/main.js-- Registers the Vue components and Router --/index.html-- The file we return, has the Vue app in it.

Dependencies

• Dependencies Via NPM
  • Axios For client side HTTP requests
  • cors For CORS during development
  • dotenv Loads our .env variables
  • vue Realtime data binding on the frontend
  • vuetify Material design for Vue
  • vue-router Router for the SPA

Existing Routes

All headline endpoints are behind the /api endpoint.

GET

/headlines - returns a list of all headlines inside of an array called data. /headlines/:id - where :id is the id of a headline resource. The resource is then returned in JSON format.

POST

/headlines - Creates a new headline resource based on the payload of the request.

DELETE

/headlines/:id - Delete a headline resouce matching the :id specified.

PUT

/headlines - Update a headline based on the payload of the request