Check out the live demo here.
Hey there, glad you stopped by! This isn't your run-of-the-mill, framework-heavy project. Nope, we're going back to basics with good old Vanilla JavaScript. If you're tired of all the npm install commands and just want to build something fun and essential, you're in the right place.
- Let's Get Started!
- How to Install
- Technologies
- What's Inside?
- Server.js Explained
- How to Use
- Routes
- Wanna Contribute?
- Licenses & Stuff
Wanna take this for a spin? Cool, follow these steps to get the app running on your machine. It's super simple, promise.
- Clone it:
git clone https://github.com/YourUsername/VanillaJS-FullStack-Blog.git - Navigate into the project:
cd VanillaJS-FullStack-Blog - Install all the things:
npm install - Fire it up:
npm start
- Node.js
- Express
- Handlebars
- MongoDB
- PostgreSQL
- Multer
- Cloudinary
This is where the magic happens for our posts. It sets up our PostgreSQL database with Sequelize and does all the heavy lifting. Think of it as your blogging Swiss army knife.
Need to keep your users in check? This is your go-to file. It's hooked up to MongoDB and even takes care of password encryption. Yup, we've thought of everything.
The server.js file requires several npm packages for functionality:
express: Framework for Node.js.express-handlebars: Template engine for express.client-sessions: For managing user sessions.cloudinary: For image upload to Cloudinary service.multer: For handling multipart/form-data.
clientSessions: Sets up session management.express.urlencodedandexpress.static: For parsing request body and serving static files.
ensureLogin: Checks if the user is logged in.
safeHTML: Strips JavaScript from a string to prevent XSS attacks.
Various routes for user interface and API functionality:
/loginand/registerfor user login and registration./posts/addfor blog post creation./postsand/categoriesfor listing all posts and categories.
This is the main layout template that contains common elements like headers and footers.
Displayed when a page is not found.
About the blog and its author.
Form to add a new category.
Form to add a new blog post.
Main page displaying the blog posts.
Lists all categories.
User login form.
Lists all posts, typically with options to edit or delete.
User registration form.
Displays the history of user activities.
initialize(): Call this first to set up your database.getAllPosts(): Want to see all the posts? Run this.getPublishedPosts(): Only interested in published posts? No problem.
initialize(): Run this first to get your user database up and running.registerUser(): New user? No problem, this function's got you covered.checkUser(): Quick and dirty user check for authentication.
/login- Displays login form./register- Displays registration form.
/posts/add- Form to add a new post./posts- Lists all posts.
/categories/add- Form to add a new category./categories- Lists all categories.