A simple blog built using Django RestFramework and React using Notion as a CMS

• Notion Blog
  • Table of Contents
• Motivation
• Why is backend required? Why not just build it in React?
• Techstack
  • Why React?
  • Why Django?
  • Why Notion?
  • Main Challenges Faced?
    • Nesting lists till the end(used recursion or DFS)
• Run it Locally
  • Backend
  • Frontend
• Perparing for Production
• Deployment
• Unsuppported Blocks
• TODO
  • Functional
  • Visual

• I wanted to build a blog but wanted easy access to write and publish with out getting into code again and again or logging into a CMS and have to think about how to structure the blog post
• I use notion everyday so it was best option for me instead of getting into a CMS or headless CMS
• went through other notion page renderers like react-notion-x and react-notion but they each were opinionated on how they called the official APIs rather than using the APIs as is
• I wanted to build it myself ;p

I did try calling the APIs from react in a useEffect hook like you normally would. But all the calls to the would result in a cors error.

Hence you need a backend to call the APIs because while making the request to the official notion APIs you can set the cors setting in the request headers no matter which backend framework you decide to use

Due to this there's not much to be done in the backend, just calling the official APIs and passing over the data to the frontend.

I'm currently learning react and being a beginner I wanted to build a real world project with it to learn and understand about its fundamentals as well as state management

I'm primaryly a python developer and have some expeirence with django and django rest framework so that felt the optimum choice instead of learning node/express getting even more frustrated than I already am.

Please note that you can use any backend you want, the backend code is fairly simple

I use it everyday from planning and todos to notes and content and now, even blogging!

• Make sure you have python3 installed
• Install pipenv

  pip install pipenv

  OR

  pip3 install pipenv

• Create the virtual environment

  pipenv shell

• Install all the dependencies

  pipenv install

• Run the server

  python manage.py runserver

• Make sure you have nodejs installed
• Install the dependencies

  npm install

• Run the frontend

  npm run start

Deployed on fly.io

• Columns
• Toggle
• Table
• File
• Numrical nested lists

• handle the lists ul and ol
• handle has_children for block in python code so i can show childrens in nested lists or toggle
• Lists nesting problem; Nesting problem in general
• Add a search bar
• Sort filter by date
• tab filter by tags
  • tags are populating and working correctly
  • Make the filters act like AND gate
• paginate the blogs lists
• previous post is there in dom when loading new post
• Error response in backend
• Lazy load images
  • Have added loading attribute to the img tag
• Post open, shows loading for a split second but the content still takes time to load - switched to useState instead of Suspense
• Error when individual post url open instead of opening from home page - need to fix this so i can share articles
  • URls are conflicting between react router and django urls hence the post not opening - missing a / while calling get-database in the get-page function
• After above fix add sharing option in navbar
  • Make navbar appear on scroll up
  • Add different platform to share to, linkedin, twitter, copy to clipboard etc
• Add analytics
• Tags dont load in the tag filter when the page is first loaded - https://docs.pmnd.rs/zustand/recipes/recipes#read-from-state-in-actions
• Dark mode

• make proper padding for all blocks
• Display video(youtube, loom etc)
• anchor style
• custom pulse loader for blog list and pos
• Date in blog list view
• mobile responsiveness [ ](make back button show on scoll)
• Navbar (back button)
• Add tags in the blog list view
• Fix the width of the list when searching; the width collapses when the article isnt wide enough or no articles present
• Width collapses in mobile when the article is small in length
• Color in paragraph
• image fullscreen
• Real data in Hero section
• Add animations
• Hover states
• Update the Logo in title bar?
• Optimise the meta tag for seo