Let's create a simple blog to practise CRUD with express!
Live demo: https://ih-christmass-project.herokuapp.com/
Your project MUST follow this structure. You'll need to create files manually :).
├── README.md
├── app.js
├── config
│ └── routes.config.js
├── controllers
│ └── posts.controller.js
├── models
│ └── post.model.js
├── package.json
├── public
│ └── stylesheets
│ └── style.css
└── views
├── layout.hbs
├── partials
│ └── navbar.hbs
└── posts
├── detail.hbs
├── edit.hbs
├── list.hbs
└── new.hbs
You'll need to install (and configure) express
, hbs
, morgan
and nodemon
npm dependencies and use app.js
as your main program file.
Your project MUST respond to the following npm commands:
npm run dev
npm start
Your web site MUST use the following HTTP routes:
- GET /posts: render the list of posts.
- GET /posts/:id: render post detail.
- GET /posts/new: render HTML form to create a new post.
- POST /posts: create a new post and redirect to post detail.
- GET /posts/:id/edit: render HTML form to edit post.
- POST /posts/:id: edit post and redirect to post detail.
- POST /posts/:id/delete: delete post and redirect to posts list.
We provide the Post
class as an interface to manipulate an (in-memory) array of posts.
You don't need to modify this file.
import models/post.model.js
file and use it's API:
find()
: returns a Promise with the array of posts.create(post)
: receives post object, returns a Promise with the created post (or error).findById(id)
: receives id string, returns a Promise with the target post (or error).findByIdAndDelete(id)
: receives id string, returns a Promise with the deleted post (or error).findByIdAndUpdate(id, post)
: receives id string and post update object. returns a Promise with the updated post (or error).
use hbs to create your UI. It MUST contain the following content:
- Menu to navigate between site sections
- Home page
- List of posts
- Buttons to edit/delete posts
- Link to visit post detail
- Form (with validation) to create/edit post
- Layout
- Some custom CSS
Good luck!