This is my firts project for CS 312 It is a simple blog application built with Node.js, Express, and EJS. The project showcases my ability to handle server-side logic, create dynamic web pages, and manage CRUD (Create, Read, Update, Delete) operations on blog posts.
For the layout of the homepage I went for a simple and user friendly design after all nothing beats straightforward in my opinion! At the top of the page is a header that says "Start a New Blog " Below this heading is a form that includes fields for entering the blog title, author's name and blog content. The design of the form is neat and uncomplicated utilizing Bootstraps styling to ensure spacing and adaptability, for screen sizes. The "Post" button stands out in a blue color. Below the form is the "Blog list" showing all blog entries, in a card layout design format. Each blog entry is shown within a Bootstrap card element that includes the title of the blog the author's name and date of publication. For every entry displayed, "Edit" and "Delete" buttons are provided alongside it. The "Edit" button I made yellow and made it to make any changes to the post while the delete button I made red allows for removing. When users choose to edit a blog entry they are taken to a form that already has the title author name and content of the chosen blog entry filled in.The heading "Update Blog”, at the top of the page explains what the page is for. The "Update" button looks like the "Post" button, on the page to keep things visually consistent; there's also a "Cancel" option for users to go back to the homepage without saving any changes. I got inspire by how twitter did it as well as facebook.
In terms of routing, the application consists of several core routes. The homepage (GET /) displays the form and the list of blog posts. The /create route (POST /create) handles the submission of new blog posts, while /edit/:id (GET /edit/:id) brings up the editing page for a specific post. The /edit/:id route (POST /edit/:id) processes updates to the blog post, and the /delete/:id route removes the selected blog from the list.