/blog-cms

The CMS for the Blog website and Blog API from The Odin Project.

Primary LanguageJavaScript

Blog CMS

  • This is a simple blog CMS website created with React and Bootstrap.
  • The website allows the admin to manage blog posts and comments.
  • This client side app uses the REST Blog API.
  • See the blog website with published posts built with Next.js: Blog NextJS.

Getting Started

To get started with the website, follow these steps:

  1. Clone the repository to your local machine.
  2. Run npm install to install the project dependencies.
  3. Run npm start to start the development server.
  4. Open http://localhost:3000 in your web browser to view the website.

Features

The website includes the following features:

  • View all blog posts.
  • View a specific blog post by ID.
  • View all comments for a specific blog post.
  • TODO: Add a new comment for a specific blog post.
  • Create a new blog post.
  • Edit an existing blog post.
  • Delete an existing blog post.

Dependencies

The following dependencies are used in this project:

  • react: JavaScript library for building user interfaces.
  • react-dom: Entry point to the DOM and server renderer for React.
  • react-router-dom: DOM bindings for React Router.
  • bootstrap: Popular front-end open source toolkit.

Pages

The website includes the following pages:

  • /posts: The homepage, which displays all blog posts.
  • /posts/:postId: Displays a specific blog post by ID and its comments. Allows users to edit an existing blog post.
  • /posts/new: Allows users to create a new blog post.

Components

The website includes the following components:

  • Navbar: The website header navbar.
  • Footer: The website footer.
  • useToken: A custom hook for storing JWT to sessionStorage, allowing only admin to manage contents.

API Endpoints

The website uses the following API endpoints:

  • GET /api/posts: Get all blog posts.
  • GET /api/posts/:postId: Get a specific blog post by ID.
  • GET /api/posts/:postId/comments: Get all comments for a specific blog post.
  • TODO: POST /api/posts/:postId/comments: Create a new comment for a specific blog post.
  • POST /api/posts: Create a new blog post.
  • PUT /api/posts/:postId: Update an existing blog post.
  • DELETE /api/posts/:postId: Delete an existing blog post.

Contributing

Contributions are welcome! If you'd like to contribute to this project, please fork the repository and submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.