Code Monkey home page Code Monkey logo

django-blog's Introduction

Django-Blog

Django-Blog is a Full Stack Django Website which allows you to create blog posts with Medium style formatting using the open source Medium Editor.

Heroku Python Django

Try It Out

Link: https://cedarfall-blog.herokuapp.com/

Test Username: John

Test Password: pass@123

Local Installation

  1. Clone this repository to your local machine and cd into it.

  2. Create a virtual environment using

    python3 -m venv myvenv
    
    # Or
    
    python -m venv myvenv
    

    myvenv will be the name of your virtual environment.

  3. Activate the virtual environment

    myvenv\Scripts\activate
    
  4. Install the requirements given in requirements.txt

    pip install -r requirements.txt
    
  5. Inside settings.py file make the following changes:

    # import django_heroku
    
    SECRET_KEY = "123"
    
    DEBUG = False
    
    # django_heroku.settings(locals(), allowed_hosts=False, secret_key=False)
  6. You now have all the requirements for running the Django app in your browser. However we don't have a database connection yet, we are using the Heroku PostgreSQL database in production. Locally we will use the sqlite database available by default. To use this database, you just need to migrate your models using python manage.py makemigrations and then python manage.py migrate

  7. Next step is to create a super user that will allow us to create and edit blog posts, approve comments etc. Create a superuser using python manage.py createsuperuser and follow the prompts.

  8. Locate the manage.py file and navigate to its directory. Run the command to start the server

    python manage.py runserver
    
  9. Copy the URL and open in your browser.

  10. You now should have the complete app running locally.

Features

Responsive UI

Navbar

Home Screen 1

Home Screen 2

Medium Style Editor

Quickly add and style your content with various tabs available in the helper tool.

Medium Style Editor

Custom Styling

You can also use your own HTML and styling to get the look you want by using the HTML tags, this also provides you with full access to Bootstrap classes.

This may pose a security risk as discussed in the Limitations section.

Drafts

Clear separation between the main blog and your drafts, posts aren't visible to the general public unless you publish them

Drafts

Easy Edits

Easily edit posts and add comments in your blog post. Anyone can come and add comments to your post.

Edits

Approve Comments

Only approved comments are visible to visitors, easily approve or remove comments on your post.

Comments

Custom Time Filter

Custom template filter used to filter time based on current time. This mimics the functionality of Facebook or YouTube.

Time Filter

Limitations

  • Although the HTML tab in the Medium Style Editor provides great flexibility, it should be disabled because of possibility of XSS attacks.
  • There is no direct way to attach classes to the Medium Style Editor's options. For example when you use the image option, no classes are attached to that image, making it unresponsive. Here we have used JavaScript OnClick Event Listeners to attach classes to make the images responsive.
  • Image uploads are not allowed to save space, any images that have been shown in this project have been online images through Pexels.
  • The data or rather the HTML that the Medium Style Editor generates is not clean.

Further Work

To address these limitations, we could make use of Editor.js which produces clean JSON data. We must also remove the HTML option for styling and instead provide some abstraction for complicated styling to ensure better use and security.

Acknowledgements

This project was created with reference to Jose Portilla's Full Stack Django Development Course, although it has been heavily modified.

Also thanks to Pexels for their amazing images.

django-blog's People

Contributors

dependabot[bot] avatar iofall avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.