Vue(Frontend)+Django(Backend)

Introduction

The FullStack Template: Vue.js + Django is a starter template for building web applications using Vue.js for the frontend and Django for the backend. It supports user authentication using JSON Web Tokens (JWT) and session management. Vue.js and Tailwind CSS are used to build responsive user interfaces.

Features

  • User Authentication: Users can sign up, log in, and log out. Passwords are securely hashed using Django's authentication system, and JWT is used for session management.
  • JWT-Based Session Management: JWT tokens are generated during login and stored in HTTP-only cookies.
  • Frontend: Built with Vue.js, Pinia for state management, and Tailwind CSS for styling.
  • Backend: The backend is built with Django and Django REST Framework. It defines several API routes for user actions like signing up, logging in, and accessing user profiles.

Technologies Used

Frontend

  • Vue.js 3: Framework for building the frontend UI, using the Composition API.
  • Tailwind CSS: Utility-first CSS framework for rapid UI development.
  • Vue Router: Manages page navigation and routing.
  • Pinia: State management library for Vue.js applications.
  • Vue Toastification: For displaying toast notifications.
  • @vueuse/motion: For improved animation experience.

Backend

  • Django: A high-level Python web framework that ensure clean design and pragmatic appoach.
  • Django REST Framework: A powerful and flexible toolkit for building Web APIs.
  • Django CORS Headers: Handles Cross-Origin Resource Sharing (CORS) for Django.
  • Django REST Framework SimpleJWT: Provides JWT authentication for Django REST Framework.
  • SQLite3: A lightweight relational database.
  • Python-dotenv: Reads configuration from .env

Visit the codebase here

Vite(Frontend)+Flask(Backend)
Vue(Frontend)+GoFiber(Backend)