React Django Blog

screenshot of React Django Blog
django
html
react
bootstrap

Advance Blog Web App made The backend is completely build on Django using Django Rest Framework, while the frontend is completed using ReactJS.

Overview

Django-React-Blog is a "Blogging Platform" that provides all the general features a blog should have. The backend of the platform is built on Django using Django Rest Framework, while the frontend is built using ReactJS.

Features

  • Login/Registration
  • Minimal Design
  • Create/Edit/Delete Your Posts
  • User Profile
  • Comment Enable On Post Using disqus
  • Comment Count On Post
  • Live Search Blog
  • Filter Blog By Author By Click on Author Name
  • Admin Panel
  • Pagination on All blog list and Live search
  • Create/View/Edit/Delete A User
  • View/Reply All Comments In The Blog
  • View/Edit/Delete All Newsletter In The Blog
  • View/Reply All Comments To A Specific Post
  • Publish/Unpublish A Post

Backend Setup

  1. Clone this repository: git clone https://github.com/dojutsu-user/Django-React-Blog.git
  2. Change the current directory to the backend folder: cd ./Django-React-Blog/backend/adminapi/
  3. Create a virtual environment and install all backend dependencies with pipenv: pipenv install
  4. Start the virtual environment: pipenv shell
  5. Change the working directory to adminapi which contains the manage.py file: cd ./adminapi
  6. Run python manage.py makemigrations
  7. Run python manage.py migrate
  8. Create a superuser: python manage.py createsuperuser
  9. Run the server: python manage.py runserver

Frontend Setup

  1. Navigate the current working directory to landing: cd ./Django-React-Blog/frontend/blog_frontend/
  2. Install all frontend dependencies using npm: npm install
  3. Run the server: npm start

Creating The First Post

  1. Make sure that both the Backend and Frontend Servers are running.
  2. Open your browser and navigate to localhost:3000.
  3. Go to http://localhost:3000/login/.
  4. Go to the Signup page if you are not registered http://localhost:3000/signup/.
  5. Login with the superuser credentials created while setting up the Backend (Step: 8).
  6. Navigate to Dashboard -> Your all New Post (http://localhost:3000/user/dashboard/create-new-post).
  7. Navigate to Dashboard -> Create New Post (http://localhost:3000/user/addblog/).
  8. Fill the form to create a new post and then submit it.
  9. The submitted post will not appear on the homepage unless and until the admin approves it.
  10. To approve the post, go to Dashboard -> Admin Panel -> View All Posts and then click on the Edit Button.
  11. Check the checkbox labeled Verified and then submit.
  12. After the post gets published, it will be displayed on the homepage of the blog (localhost:3000).

Backend API Documentation

API Documentation is generated using the default tool provided by Django Rest Framework.

To view the API documentation:

  1. Make sure that the Backend Server is running.
  2. Access the API documentation through the provided tool.

Summary

Django-React-Blog is a blogging platform built with Django on the backend and ReactJS on the frontend. It offers a range of features including user registration, post creation, user profiles, comments, search, filtering, admin panel, and more. The installation process involves setting up the backend and frontend servers, creating a superuser, and creating the first post. API documentation is also available for reference.

django
Django

Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. It follows the model-view-controller (MVC) architectural pattern, providing an extensive set of built-in tools and conventions to streamline the creation of robust and scalable web applications.

html
HTML

HTML templates are pre-designed and pre-built web pages that can be customized and used as a basis for building websites. They often include common elements such as headers, footers, menus, and content sections, and can be easily edited using HTML and CSS to fit specific branding and content needs.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

bootstrap
Bootstrap

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.

dashboard
Dashboard

A dashboard style website template is a pre-designed layout that features a user interface resembling a control panel or dashboard. It typically includes charts, graphs, tables, and other data visualization tools that allow users to monitor and analyze data in real-time.