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

• Motivation
• Why is backend required? Why not just build it in React?
• Techstack
  • Why React?
  • Why Django?
  • Why Notion?
• Run it Locally
• How to make changes?
• Prepaing for Production
• Deployment

• 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

• 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

• tab filter by tags
• paginate the blogs lists
• previous post is there in dom when loading new post
• Error response in backend
• Post open, shows loading for a split second but the content still takes time to load
• Lazy load images

• make proper padding for all blocks
• Display video(youtube, loom etc)
• Hover states
• anchor style
• custom pulse loader for blog list and pos
• image fullscreen
• Date in blog list view
• mobile responsiveness [ ](make back button show on scoll)
• Navbar (back button)
• Add tags in the blog list view
• Paragraph and text color
• Add animations
• Fix the width of the list when searching