Vue(Frontend)+Express(Backend)

Introduction

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

Features

  • User Authentication: Users can sign up, log in, and log out. Passwords are hashed using bcryptjs, 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 Express.js and connects to a MongoDB database through Mongoose. It defines several API routes for user actions like signing up, logging in, and logging out.

Technologies Used

Frontend

  • Vue.js: Framework for building the frontend UI.
  • Tailwind CSS: Utility-based CSS framework for styling and responsive design.
  • Vue Router: Handles page navigation and routing.
  • Pinia: Manages application state.
  • Vue Toastification: Displays toast notifications.

Backend

  • Node.js: The runtime environment used to run the backend JavaScript code.
  • Express.js: Handles the API requests and routing for the backend.
  • MongoDB: NoSQL database for storing user data.
  • Mongoose: used to model data and interact with MongoDB from the backend.
  • JWT (jsonwebtoken): Used to create and verify JWTs for user authentication.
  • bcryptjs: Used for hashing user passwords securely.

Visit codebase here

Flask+Sqlite
Vite(Frontend)+Flask(Backend)