Vite(Frontend)+Flask(Backend)

Introduction

The FullStack Template: Vite + Flask is a starter template for building web applications using Vite for the frontend and Flask for the backend. It supports user authentication using GitHub OAuth and session management. Vite and Tailwind CSS are used to build responsive user interfaces.

Features

  • User Authentication: Users can sign up and log in using their GitHub accounts. OAuth tokens are managed securely.
  • OAuth-Based Session Management: OAuth tokens are generated during login and stored securely.
  • Frontend: Built with Vite, React, and Tailwind CSS for styling.
  • Backend: The backend is built with Flask and connects to a MongoDB database through PyMongo. It defines several API routes for user actions like signing up and logging in.

Screenshots

image-signupimage-githubimage-success

Technologies Used

Frontend

  • Vite: Next-generation frontend tooling.
  • React: Framework for building the frontend UI.
  • Tailwind CSS: Utility-based CSS framework for styling and responsive design.
  • React Router: Handles page navigation and routing.
  • React Toastify: Displays toast notifications.

Backend

  • Python: The programming language used for the backend.
  • Flask: Micro web framework for handling API requests and routing.
  • MongoDB: NoSQL database for storing user data.
  • PyMongo: Used to interact with MongoDB from the backend.
  • Flask-OAuthlib: Used to handle GitHub OAuth authentication.

Visit codebase here

Vue(Frontend)+Express(Backend)
Vue(Frontend)+Django(Backend)