Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/victoriamcn/tech-blog

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.
https://github.com/victoriamcn/tech-blog

express expressjs heroku javascript mysql nodejs spectre-css

Last synced: about 7 hours ago
JSON representation

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.

Awesome Lists containing this project

README

        

# Tech-Blog
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.

## Table of Contents
- [Deployed Application](#deployed-applicaiton)
- [User Story](#user-story)
- [Installation and Usage](#installation-and-usage)
- [MVC Paradigm](#mvc-Paradigm)
- [Other npm Packages](#other-npm-packages)
- [Contributing](#contributing)
- [Questions](#questions)
- [License](#license)
- [Credits](#credits)
- [Badges](#badges)

## Deployed Application
[https://git.heroku.com/sheltered-oasis-68094.git](https://git.heroku.com/sheltered-oasis-68094.git)

## 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
```

## Installation and Usage
1. Clone this repository to your local computer.
2. Open the repo in ```VS Code```.
3. Open the server.js file in the Integrated Terminal.
4. Log-in to ```MySQL```.
5. **Create your own .env file:**
- Add new file called ```.env```
- Use following syntax in your ```.env``` file with your ```MySQL``` username and password instead of ```example```:
```
DB_NAME='techblog_db'
DB_PASSWORD='example'
DB_USER='example'
```
6. **Install all dependencies:** type the following in the command line: ```npm i```.
7. **Create the SQL database locally** [Refer to this documentation to get started:](https://dev.mysql.com/doc/mysql-getting-started/en/). This covers installation for both Windows and MacOS.
8. ***Optional*** **Seed the database:** type the following in the command line: ```npm run seed```.
9. **Start the server:** type the following in the command line: ```npm start```.

## MVC Paradigm
- Model: [mysql2](https://www.npmjs.com/package/mysql2) packages to connect to a MySQL database.
- Model: [sequelize](https://www.npmjs.com/package/sequelize) packages to connect to a MySQL database.
- View: [express-handlebars](https://www.npmjs.com/package/express-handlebars).
- Controller: Created an [Express.js](https://expressjs.com/en/starter/installing.html) API.

## Other npm Packages
- [dotenv](https://www.npmjs.com/package/dotenv) package to use environment variables
- [bcrypt](https://www.npmjs.com/package/bcrypt) package to hash passwords
- [connect-session](https://www.npmjs.com/package/express-session) package to add authentication
- [connect-session-sequelize](https://www.npmjs.com/package/connect-session-sequelize) package to add authentication

## Contributing
To contribute to this project, you may create a git fork.

## Questions
![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white) To view my other projects, you may visit my Git Hub profile: [victoriamcn](https://github.com/victoriamcn).

![LinkedIn](https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white) To contact me or see my resume, please visit my LinkedIn profile: [Victoria McNorrill](https://www.linkedin.com/in/victoria-mcnorrill/)

## License
[MIT](https://img.shields.io/badge/License-MIT-blue.svg)
This project is licensed under MIT.
- [Click](https://pitt.libguides.com/openlicensing/MIT#:~:text=Users%20of%20software%20using%20an,and%20the%20X%20Windows%20System.) here to view the license documentation or,
- Go to the [license file](https://github.com/victoriamcn/Tech-Blog/blob/main/LICENSE) with in this repository.

## Credits

### Georgia Tech Staff
- My instructor, [Saurav Khatiwada](https://github.com/khatiwadasaurav).
- My tutor, Juan Delgado.

### Example Code

- I based my code on the Module 14: Model-View-Controller (MVC) Mini-Project in the Georgia Tech Boot Camp.

### Tutorials
- StackOverflow: [TypeError: app.use() requires middleware functions](https://stackoverflow.com/questions/32883626/typeerror-app-use-requires-middleware-functions)
- The Full-Stack Blog: [Deploy with Heroku and MySQL](https://coding-boot-camp.github.io/full-stack/heroku/deploy-with-heroku-and-mysql)
- The Vanilla JS Toolkit: [Element.addEventListener()](https://vanillajstoolkit.com/reference/event-listeners/addeventlistener/)
- YouTube: [Deploying to Heroku with Sequelize and JawsDB](https://www.youtube.com/watch?v=AQp7b-1356k)

## Badges

### Cloud
![Heroku](https://img.shields.io/badge/heroku-%23430098.svg?style=for-the-badge&logo=heroku&logoColor=white)

### Database
![MySQL](https://img.shields.io/badge/mysql-%2300f.svg?style=for-the-badge&logo=mysql&logoColor=white)

### Frameworks and Libraries
![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB)
![Handlebars.js](https://img.shields.io/badge/Handlebars.js-f0772b?style=for-the-badge&logo=handlebarsdotjs&logoColor=black)
![Spectre.css](https://img.shields.io/badge/CSS-Spectre.css-purple)
![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white)
![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white)

### Integrated Development Environments (IDE)
![Insomnia](https://img.shields.io/badge/Insomnia-black?style=for-the-badge&logo=insomnia&logoColor=5849BE)
![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)

### Languages
![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)

### Linters
![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E)
![eslint](https://img.shields.io/badge/eslint-3A33D1?style=for-the-badge&logo=eslint&logoColor=white)

### ORM
![Sequelize](https://img.shields.io/badge/Sequelize-52B0E7?style=for-the-badge&logo=Sequelize&logoColor=white)