An open API service indexing awesome lists of open source software.

https://github.com/spaceshaman/full-stack-fastapi-nuxt-jwt-auth-orm-free-template

ORM Free Full Stack, modern web application template. Using FastAPI, Nuxt.js, JWT Authentication, SQLite, Docker compose and more.
https://github.com/spaceshaman/full-stack-fastapi-nuxt-jwt-auth-orm-free-template

backend docker docker-compose fastapi frontend full-stack fullstack jwt jwt-auth jwt-authentication jwt-token nuxt nuxt3 nuxtjs python python3 sqlite sqlite3 template typescript

Last synced: 3 months ago
JSON representation

ORM Free Full Stack, modern web application template. Using FastAPI, Nuxt.js, JWT Authentication, SQLite, Docker compose and more.

Awesome Lists containing this project

README

          

# Full Stack FastAPI Nuxt.js JWT Auth ORM Free Template

[![GitHub License](https://img.shields.io/github/license/SpaceShaman/full-stack-fastapi-nuxt-jwt-auth-orm-free-template)](https://github.com/SpaceShaman/full-stack-fastapi-nuxt-jwt-auth-orm-free-template?tab=MIT-1-ov-file)
[![Tests](https://img.shields.io/github/actions/workflow/status/SpaceShaman/full-stack-fastapi-nuxt-jwt-auth-orm-free-template/deploy.yml?label=tests)](https://github.com/SpaceShaman/full-stack-fastapi-nuxt-jwt-auth-orm-free-template/blob/master/.github/workflows/tests.yml)
[![Codecov](https://img.shields.io/codecov/c/github/SpaceShaman/full-stack-fastapi-nuxt-jwt-auth-orm-free-template)](https://codecov.io/gh/SpaceShaman/full-stack-fastapi-nuxt-jwt-auth-orm-free-template)
[![Python](https://img.shields.io/badge/language-Python-yellow?logo=python&logoColor=yellow)](https://www.python.org/)
[![TypeScript](https://img.shields.io/badge/language-TypeScript-yellow?logo=typescript&logoColor=yellow)](https://www.typescriptlang.org/)
[![FastAPI](https://img.shields.io/badge/framework-FastAPI-green?logo=fastapi&logoColor=green)](https://fastapi.tiangolo.com/)
[![Nuxt.js](https://img.shields.io/badge/framework-Nuxt-green?logo=nuxt.js&logoColor=green)](https://nuxt.com/)
[![Docker](https://img.shields.io/badge/technology-Docker-blue?logo=docker&logoColor=blue)](https://www.docker.com/)
[![Docker Compose](https://img.shields.io/badge/technology-Docker%20Compose-blue?logo=docker&logoColor=blue)](https://docs.docker.com/compose/)
[![Poetry](https://img.shields.io/badge/technology-Poetry-blue?logo=python&logoColor=blue)](https://python-poetry.org)
[![Pydantic](https://img.shields.io/badge/technology-Pydantic-blue?logo=pydantic&logoColor=blue)](https://docs.pydantic.dev)
[![Tailwind CSS](https://img.shields.io/badge/styling-Tailwind%20CSS-blue?logo=tailwind-css&logoColor=blue)](https://tailwindcss.com/)
[![daisyUI](https://img.shields.io/badge/styling-daisyUI-blue?logo=daisyui&logoColor=blue)](https://daisyui.com/)
[![VeeValidate](https://img.shields.io/badge/validation-VeeValidate-blue?logo=vee-validate&logoColor=blue)](https://vee-validate.logaretm.com)
[![Yup](https://img.shields.io/badge/validation-Yup-blue?logo=yup&logoColor=blue)](https://yup-docs.vercel.app/)
[![Jinja](https://img.shields.io/badge/templating-Jinja-blue?logo=jinja&logoColor=blue)](https://jinja.palletsprojects.com/)
[![JWT](https://img.shields.io/badge/authentication-JWT-blue?logo=json-web-tokens&logoColor=blue)](https://jwt.io/)
[![Pytest](https://img.shields.io/badge/testing-Pytest-red?logo=pytest&logoColor=red)](https://docs.pytest.org/)
[![SQLite](https://img.shields.io/badge/database-SQLite-lightgrey?logo=sqlite&logoColor=blue)](https://www.sqlite.org/)
[![SQLift](https://img.shields.io/badge/migration-SQLift-purple)](https://github.com/SpaceShaman/SQLift)
[![Code style: black](https://img.shields.io/badge/code%20style-black-black)](https://github.com/psf/black)
[![Linting: Ruff](https://img.shields.io/badge/linting-Ruff-black?logo=ruff&logoColor=black)](https://github.com/astral-sh/ruff)
[![Code formatter: Prettier](https://img.shields.io/badge/code%20formatter-Prettier-ff69b4)](https://prettier.io/)
[![Linting: ESLint](https://img.shields.io/badge/linting-ESLint-4B32C3)](https://eslint.org/)

## Technology Stack and Features

### Backend

- โšก [**FastAPI**](https://fastapi.tiangolo.com) as the backend framework.
- ๐Ÿ“ฆ Dependency management with [**Poetry**](https://python-poetry.org).
- ๐Ÿถ Code linting using [**Ruff**](https://github.com/astral-sh/ruff).
- ๐Ÿ“ Data validation with [**Pydantic**](https://docs.pydantic.dev).
- ๐Ÿ—ƒ [**SQLite**](https://www.sqlite.org) as the database.
- ๐Ÿ†“ **ORM free** approach using raw SQL queries with the repository pattern.
- ๐Ÿ›  Database migrations with [**SQLift**](https://github.com/SpaceShaman/SQLift).
- ๐Ÿ”‘ **JWT** (JSON Web Token) authentication.
- ๐Ÿ“ Registration with email based account activation.
- ๐Ÿ”’ Secure password hashing.
- ๐Ÿ“ซ Password recovery via email.
- ๐Ÿ“ง SMTP integration for sending emails.
- โœ‰๏ธ Email templates using Jinja.
- โœ… Unit testing with [**Pytest**](https://pytest.org).

### Frontend

- ๐Ÿš€ [**Nuxt.js**](https://nuxt.com) as the frontend framework.
- ๐ŸŸฆ [**TypeScript**](https://www.typescriptlang.org) for static type checking.
- ๐Ÿ–Œ Code formatting with [**Prettier**](https://prettier.io).
- โœจ Code linting using [**ESLint**](https://eslint.org).
- ๐ŸŽจ Styling with [**TailwindCSS**](https://tailwindcss.com).
- ๐Ÿงฉ Ready-to-use components from [**daisyUI**](https://daisyui.com).
- ๐Ÿ” Middleware for authentication handling.
- ๐Ÿ“ Form validation with [**VeeValidate**](https://vee-validate.logaretm.com) and [**Yup**](https://yup-docs.vercel.app/).
- ๐ŸŽจ Theme selector with 32 themes from [**daisyUI**](https://daisyui.com).
- ๐Ÿšจ Utility functions for alerts and notifications.
- โŒ Call `showErrorAlert('message')` to show an error message.
- โœ… Call `showSuccessAlert('message')` to show a success message.
- ๐Ÿ’ก Call `showInfoAlert('message')` to show an info message.
- โš ๏ธ Call `showWarningAlert('message')` to show a warning message.

### CI/CD

- ๐Ÿ”„ CI/CD pipeline with GitHub Actions.
- ๐Ÿงช Automated testing before deployment.
- ๐Ÿ“Š Code coverage reporting with [**Codecov**](https://about.codecov.io)
- ๐Ÿš€ Ready-to-use workflow configurations in [.github/workflows/](.github/workflows/)

### Deployment

- ๐Ÿšข Deployment instructions using [**Docker Compose**](https://docs.docker.com/compose).
- ๐Ÿšฆ [**Traefik**](https://doc.traefik.io/traefik) as a reverse proxy.

## Screenshots

### Login Page

![Login](img/login.png)
![Login](img/login-dark.png)

### Register Page

![Register](img/register.png)

### Password Recovery

![Password Recovery](img/password-recovery.png)

### Theme Selector

![Theme Selector](img/theme-selector.png)

### Alerts and Toasts

![Alerts and Toasts](img/alerts-and-toasts.png)

### Validation

![Validation](img/validation.png)

### Simple Dashboard

![Dashboard](img/dashboard.png)

### Activation Email

![Activation Email](img/activation-email.png)

## How To Use It

You can **just fork or clone** this repository and use it as is.

โœจ It just works. โœจ

### Configure

You need to configure the environment variables to set your own values.
You can copy the example `.env` files:

```bash
cp .env.default .env
```

And then edit the `.env` file and set your own values.

### Run

#### Run in development environment

```bash
docker-compose -f docker-compose.dev.yml up
```

#### Run in production environment

```bash
docker-compose up
```

### CI/CD configuration

This project has a CI/CD pipeline with GitHub Actions.
You can see the workflow configuration in [.github/workflows/](.github/workflows/).
To use it, you need to set the following secrets in your repository settings:

```bash
CODECOV_TOKEN # Your Codecov token
HOST # Your SSH host
SSH_KEY # Your SSH private key
USERNAME # Your SSH username
```

### Comunication between FastAPI and Nuxt.js

The communication between FastAPI and Nuxt.js is done via plugin `api' which is located in [frontend/app/plugins/api.ts](frontend/app/plugins/api.ts).
This plugin uses the [$fetch](https://nuxt.com/docs/getting-started/data-fetching) to make requests to the FastAPI backend.
You can use this plugin in two ways:

#### Like useFetch

```typescript
const { data: users } = await useAPI('/users', {
method: 'get',
...
})
```

#### Like $fetch

```typescript
await useNuxtApp().$api<{ token: string }>('/auth/login', {
method: 'POST',
...
})
```

## License

This project is licensed under the terms of the [MIT license](/LICENSE).