{"id":6064,"date":"2021-04-07T16:22:00","date_gmt":"2021-04-07T16:22:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=6064"},"modified":"2021-04-03T18:28:50","modified_gmt":"2021-04-03T18:28:50","slug":"django-black-dashboard-design","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/freebies\/django-black-dashboard-design\/","title":{"rendered":"Django: Black Dashboard Design"},"content":{"rendered":"\n<p>This article presents a simple, open-source\u00a0<strong>Django Dashboard<\/strong>\u00a0crafted on top of\u00a0<strong>Black Dashboard\u00a0Template<\/strong>, a popular Bootstrap 4\u00a0design downloaded 39k times and used by many designers and developers across the globe.\u00a0The product might help beginners (and not only) to\u00a0deliver faster a new\u00a0<strong>Django<\/strong>\u00a0project\u00a0and reuse the existing codebase already enhanced with a database, authentication, and deployment scripts. \u00a0For newcomers,\u00a0<strong><a href=\"https:\/\/www.djangoproject.com\/\">Django<\/a><\/strong>\u00a0is a Python Web framework built by experienced developers that encourages the rapid development of modern web applications.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"6067\" data-permalink=\"https:\/\/azoora.com\/blog\/freebies\/django-black-dashboard-design\/attachment\/django-black-dashboard-design-01\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-01.png\" data-orig-size=\"1280,640\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"django-black-dashboard-design-01\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-01-300x150.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-01-1024x512.png\" loading=\"lazy\" width=\"1024\" height=\"512\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-01-1024x512.png\" alt=\"\" class=\"wp-image-6067\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-01-1024x512.png 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-01-300x150.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-01-768x384.png 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-01.png 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Black Dashboard Django \u2013 Dashboard page.<\/p>\n\n\n\n<p>Using a starter project, sometimes called \u201c<strong>boilerplate code<\/strong>\u201c,&nbsp;might help developers start faster a new project by reusing code already tested and production-ready. The seed project presented in this article is crafted with a basic set of modules and features common to many Django projects: authentication, a codebase structured using best practices, form validation, and deployment scripts for well-known&nbsp;technologies like Docker and Gunicorn\/Nginx.<\/p>\n\n\n\n<h2>What is Django<\/h2>\n\n\n\n<p>This popular&nbsp;<strong>Python<\/strong>-based was initially developed in 2003 by a team that was responsible for&nbsp;creating and maintaining newspaper websites. After&nbsp;creating a few websites, the team started to isolate the common parts and reuse the features shared across all products. This&nbsp;codebase evolved&nbsp;into a&nbsp;generic framework, which was&nbsp;open-sourced as the \u201c<strong>Django Framework<\/strong>\u201d in 2005.&nbsp; Currently, Django gathered many developers across the globe and the Github metrics are really impressive: 55k Starts, 24k Forks plus an active community with 2k contributors.&nbsp;<strong>Why Django is so popular?<\/strong><\/p>\n\n\n\n<p><strong>Complete \u2013&nbsp;<\/strong>Django follows the \u201cBatteries included\u201d philosophy and provides almost everything developers might want to do \u201cout of the box\u201d. Once the developers learn the framework, they can do almost anything from simple websites. API\u2019s, microservices, or complex eCommerce platforms.<\/p>\n\n\n\n<p><strong>Secure \u2013&nbsp;<\/strong>Django comes with a built-in security pattern coded by experienced developers.&nbsp;Django helps developers avoid many common security mistakes by providing modules and layers that have been engineered and tested to protect the website automatically.<\/p>\n\n\n\n<p><strong>Versatile \u2013&nbsp;<\/strong>Django is used&nbsp;to code many types of products, from hobby presentation sites to blog platforms or heavy traffic, scalable architectures.&nbsp;<strong>Instagram<\/strong>&nbsp;for instance has built a big part of the product on top of&nbsp;<strong>Django<\/strong>. Another important aspect is the integration with other systems and frontend technologies like React, Vue, Google as authentication or data provider.<\/p>\n\n\n\n<p>For more resources related to this&nbsp;modern web framework, feel free to access:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/www.djangoproject.com\/\">Django<\/a>&nbsp;\u2013 The official website<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Server-side\/Django\/Introduction\">Django Introduction<\/a>&nbsp;\u2013 a popular tutorial provided by Mozilla<\/li><\/ul>\n\n\n\n<h2>Django Codebase<\/h2>\n\n\n\n<p>To use this free Django starter we need to be familiar&nbsp;with Python (basic knowledge) and feel comfortable using a terminal. The product can be downloaded directly from the&nbsp;<a href=\"https:\/\/github.com\/creativetimofficial\/black-dashboard-django\">repository<\/a>&nbsp;published on Github and by following the built instructions provided in the README file, Black Dashboard Django will run in the browser in less than 5 minutes. Curious minds can follow&nbsp;the build instructions presented below and effectively start coding a new product on top.<\/p>\n\n\n\n<p><strong>1# \u2013 Clone the sources (from Github)<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$ # Get the code \n$ git clone https:\/\/github.com\/creativetimofficial\/black-dashboard-django.git \n$ cd black-dashboard-django\n<\/pre>\n\n\n\n<p><strong>2# \u2013 Install modules\/dependencies<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$ # Install modules - SQLite Storage\n$ pip3 install -r requirements.txt\n<\/pre>\n\n\n\n<p><strong>3# \u2013 Create database &amp; Tables<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$ # Create tables\n$ python manage.py makemigrations\n$ python manage.py migrate\n<\/pre>\n\n\n\n<p><strong>4# \u2013 Start Project (development mode)<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$ # Start the app \n$ # python manage.py runserver\n<\/pre>\n\n\n\n<p>If all goes well, we should see our starter running in the browser (the login page).&nbsp;Being a functional starter, only authenticated users can see the private pages like the dashboard, or profile page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"6066\" data-permalink=\"https:\/\/azoora.com\/blog\/freebies\/django-black-dashboard-design\/attachment\/django-black-dashboard-design-03\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-03.png\" data-orig-size=\"1280,640\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"django-black-dashboard-design-03\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-03-300x150.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-03-1024x512.png\" loading=\"lazy\" width=\"1024\" height=\"512\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-03-1024x512.png\" alt=\"\" class=\"wp-image-6066\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-03-1024x512.png 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-03-300x150.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-03-768x384.png 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-03.png 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Black Dashboard Django \u2013 User Profile Page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"6065\" data-permalink=\"https:\/\/azoora.com\/blog\/freebies\/django-black-dashboard-design\/attachment\/django-black-dashboard-design-04\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-04.png\" data-orig-size=\"1280,640\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"django-black-dashboard-design-04\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-04-300x150.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-04-1024x512.png\" loading=\"lazy\" width=\"1024\" height=\"512\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-04-1024x512.png\" alt=\"\" class=\"wp-image-6065\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-04-1024x512.png 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-04-300x150.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-04-768x384.png 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design-04.png 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Black Dashboard Django \u2013 RTL Support.<\/p>\n\n\n\n<p>The&nbsp;<strong>Black Dashboard<\/strong>&nbsp;design&nbsp;comes packed with all plugins that you might need inside a project and documentation on how to get started. It is light and easy to use, and also very powerful.&nbsp;<strong>Black Dashboard&nbsp;Django<\/strong>&nbsp;features over 16 individual components, giving you the freedom of choosing and combining. This means that there are thousands of possible combinations. All components can take variations in color, that you can easily modify using SASS files. You will save a lot of time going from prototyping to full-functional code because all elements are implemented.&nbsp;This template comes in dark mode for your app to keep up with trends. If you are not a dark-mode lover, no worries; this template comes in light mode, too.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article presents a simple, open-source\u00a0Django Dashboard\u00a0crafted on top of\u00a0Black Dashboard\u00a0Template, a popular Bootstrap 4\u00a0design downloaded 39k times and used by many designers and developers across the globe.\u00a0The product might help beginners (and not only) to\u00a0deliver faster a new\u00a0Django\u00a0project\u00a0and reuse the existing codebase already enhanced with a database, authentication, and deployment scripts. \u00a0For newcomers,\u00a0Django\u00a0is a [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":6068,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[85,8],"tags":[86,228,195],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/04\/django-black-dashboard-design.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1zO","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6064"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=6064"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6064\/revisions"}],"predecessor-version":[{"id":6069,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6064\/revisions\/6069"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/6068"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=6064"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=6064"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=6064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}