CRUD Post UI | Lereste

View live demo: https://crud-post-ui.vercel.app/

• API_URL: https://js-post-api.herokuapp.com/api

• Author: https://app.swaggerhub.com/apis/paulnguyen.mn/easy-javascript/

How to run this source?

1- Download source

2- Run terminal:

• Enter yarn or npm install

This simple website has 3 pages:

• Home page: /
• Add/Edit a post page: /add-edit-post.html
• Post detail page: /post-detail.html

❓ Questions you may have

What is query params and example?

• Query params is the parts after question mark.

Let break the following url into smaller parts:
URL: https://js-post-api.herokuapp.com/api/posts?_sort=createdAt&_order=desc&_limit=9&_page=1

- origin: "https://js-post-api.herokuapp.com"
- pathname: "/api/posts"
- sort: "?_sort=createdAt&_order=desc"
- search: "&_limit=9&_page=1"
- When you parse search, you'll get query params object with four keys:
  - `_sort`: 'createdAt'
  - `_order`: 'desc'
  - `_limit`: 9
  - `_page`: 1

How to know whether add or edit mode when visit /add-edit-post.html page?

• Well, depend on the availability of query param postId. If it exists, then edit mode, otherwise add mode.

How to know which post to show detail when visiting /post-detail.html?

• Same as above. Let check postId query param.

How many external libs used in the final project?

• Boostrap: Used for building responsive layout
• Bootstrap Carousel: Used for slide show on Home page.
• Bootstrap Modal: Used for show modal at post-detail and confirmation when remove post.
• Bootstrap Pagination: Used for handle prev/next button.
• Fetch: Used for working with API.
• Axios: Used for working with API.
• Dayjs: Used for show time when create post.
• Lodash.debounce: Used for search post with "title_like="
• Toastify: Used for show toast message.

🏠 Home page

Render list of posts

• Research Bootstrap Carousel and add to home page.
  • Include 3 slides
  • Each slide has title and description.
  • Auto move the next slide.
• Search post with title.
• Fetch list of posts and render to UI.
• Sort list of post to show the latest post first.
• Pagination to be able to to fetch posts by page and limit the number of posts per page.

Handle event on each post item

• Click: Go to detail page and show detail of clicked post.
• Edit button click: Go to edit page and populate detail of clicked post to form.
• Remove button click: Show a modal confirmation to remove? If yes, remove it and show a toast with message Remove post successfully. Otherwise, do nothing :P

➕ Add/Edit post page

• Add form validation
  • Require title field
  • Require author field

ADD MODE (if postId query param doesn't exist)

• Handle form submit
  • Show error if validation is failed. Stop form submit.
  • Add new post with submitted values: title, author, description and imageUrl
  • If add successfully, show a toast with message Save post successfully and redirect to Edit page of the new post.
  • If failed, show a toast with error message.

EDIT MODE (if postId query param exists)

• Get post detail and set initial value for form.
• Handle form submit
  • Do nothing if user doesn't change anything.
  • Show error if validation is failed. Stop form submit.
  • Update existing post with field that has changes. Don't include unchanged properties inside payload.
  • If update successfully, show a toast with message Save post successfully.
  • If failed, show a toast with error message.

👀 Post detail page

• Get post detail.
• Update corresponding DOM: title, description, author, createdAt and imageUrl.
• Integrate with Lightbox to view image when click on image.