Overview

Build a full-stack web application using Django, Vue.js, and Flowbite. These three technologies provide a fast and easy way for beginners to learn web application development while creating a beautiful UI.

What are them?

Django and is python based Full-Stack Web Application framework that allow developer to build a by used. especially for beginner or python developer whose are looking a python Framework for Web-Application.

VueJS (Optional) is one of the JavaScript based framework it combine from React and Anglur .It's known as the framework that developer use to build a single-page website.

Flowbite is the modern UI and Framework that design for Frontend (Tailwind based).

Why should we use them?

Well actually if you are a Python expert you can use only Django to Complete all of them. but in case if you are a student or developer who want to challenge and exploring a new technology tools, I will 100% recommend to use those 3 (Django + VueJS + Flowbite).

First of all because it have a huge community to support you, so there are thousand of online resource is out there. And so on it really going to enchanted your knowledge of Web Developer. Secondly it not too complex to setup as well as use. it is a very simple technology with free-streesing about manually setup mostly it is a built-in library u can use in your Application.Lastly these 3 tools are the effective tools to use together if you can manage it correctly.

How to use them?

- Django Backend: Is a Handles data management, API endpoints, and serves as the core of the application.

- Vue.js Frontend: Provides a dynamic and responsive user interface.

- Flowbite: Utilized for UI components and styling.

Setup and Installation

Backend (Django)

Create Project Directory:

mkdir Project
cd Project

Create and Activate Virtual Environment:

python -m venv venv
venv\Scripts\activate # On Windows:
source venv/bin/activate # On Mac/Linux:

Setup and Install Django:

pip install django djangorestframework pillow django-cors-headers

Create Django Project:

django-admin startproject Your_Project_Name

Create Django App:

python manage.py startapp Your_Application_Name

Configure Settings and URLs as described in the setup guide.

Run Django Server:

python manage.py runserver

Frontend (Vue.js)

Install Node.js and npm: Download Node.js

Navigate to Your_Project_Name: Your path should look like this ../Project/Your_Project_Name/

Create Vue.Js Project: Create a new Vue.js project named frontend.

npm install -g @vue/cli
vue create frontend
cd frontend

Install Dependencies: Install the necessary packages for the Vue.js project.

 npm install axios

Install Tailwind and Flowbite: Tailwind CSS is a utility-first CSS framework, and Flowbite is a component library built on top of Tailwind CSS. Install both

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npm install flowbite
npx tailwindcss init -p

Tailwind CSS configuration: Update tailwind.config.js to include Flowbite and the paths to your Vue components (paste the below code into your tailwind.config.js)

// tailwind.config.js
module.exports = {
    content: [
        "./index.html",
        "./src/**/*.{vue,js,ts,jsx,tsx}",
        "./node_modules/flowbite/**/*.js"
    ],
    theme: {
        extend: {},
    },
    plugins: [
        require('flowbite/plugin')
    ],
}

In src/assets/styles/tailwind.css, import Tailwind CSS and Flowbite

/* src/assets/styles/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "flowbite";

Run the Development Server :

npm run dev

Thank you!

Contact

If you find any errors in *Setup and Installation step in this topic, please contact:

Email : officialchesdamc@gmail.com

Facebook : [HySavuth ChanChesda]