diff --git a/README.md b/README.md deleted file mode 100644 index afe124f3fb..0000000000 --- a/README.md +++ /dev/null @@ -1,239 +0,0 @@ -# Full Stack FastAPI Template - -Test -Coverage - -## Technology Stack and Features - -- โšก [**FastAPI**](https://fastapi.tiangolo.com) for the Python backend API. - - ๐Ÿงฐ [SQLModel](https://sqlmodel.tiangolo.com) for the Python SQL database interactions (ORM). - - ๐Ÿ” [Pydantic](https://docs.pydantic.dev), used by FastAPI, for the data validation and settings management. - - ๐Ÿ’พ [PostgreSQL](https://www.postgresql.org) as the SQL database. -- ๐Ÿš€ [React](https://react.dev) for the frontend. - - ๐Ÿ’ƒ Using TypeScript, hooks, Vite, and other parts of a modern frontend stack. - - ๐ŸŽจ [Chakra UI](https://chakra-ui.com) for the frontend components. - - ๐Ÿค– An automatically generated frontend client. - - ๐Ÿงช [Playwright](https://playwright.dev) for End-to-End testing. - - ๐Ÿฆ‡ Dark mode support. -- ๐Ÿ‹ [Docker Compose](https://www.docker.com) for development and production. -- ๐Ÿ”’ Secure password hashing by default. -- ๐Ÿ”‘ JWT (JSON Web Token) authentication. -- ๐Ÿ“ซ Email based password recovery. -- โœ… Tests with [Pytest](https://pytest.org). -- ๐Ÿ“ž [Traefik](https://traefik.io) as a reverse proxy / load balancer. -- ๐Ÿšข Deployment instructions using Docker Compose, including how to set up a frontend Traefik proxy to handle automatic HTTPS certificates. -- ๐Ÿญ CI (continuous integration) and CD (continuous deployment) based on GitHub Actions. - -### Dashboard Login - -[![API docs](img/login.png)](https://github.com/fastapi/full-stack-fastapi-template) - -### Dashboard - Admin - -[![API docs](img/dashboard.png)](https://github.com/fastapi/full-stack-fastapi-template) - -### Dashboard - Create User - -[![API docs](img/dashboard-create.png)](https://github.com/fastapi/full-stack-fastapi-template) - -### Dashboard - Items - -[![API docs](img/dashboard-items.png)](https://github.com/fastapi/full-stack-fastapi-template) - -### Dashboard - User Settings - -[![API docs](img/dashboard-user-settings.png)](https://github.com/fastapi/full-stack-fastapi-template) - -### Dashboard - Dark Mode - -[![API docs](img/dashboard-dark.png)](https://github.com/fastapi/full-stack-fastapi-template) - -### Interactive API Documentation - -[![API docs](img/docs.png)](https://github.com/fastapi/full-stack-fastapi-template) - -## How To Use It - -You can **just fork or clone** this repository and use it as is. - -โœจ It just works. โœจ - -### How to Use a Private Repository - -If you want to have a private repository, GitHub won't allow you to simply fork it as it doesn't allow changing the visibility of forks. - -But you can do the following: - -- Create a new GitHub repo, for example `my-full-stack`. -- Clone this repository manually, set the name with the name of the project you want to use, for example `my-full-stack`: - -```bash -git clone git@github.com:fastapi/full-stack-fastapi-template.git my-full-stack -``` - -- Enter into the new directory: - -```bash -cd my-full-stack -``` - -- Set the new origin to your new repository, copy it from the GitHub interface, for example: - -```bash -git remote set-url origin git@github.com:octocat/my-full-stack.git -``` - -- Add this repo as another "remote" to allow you to get updates later: - -```bash -git remote add upstream git@github.com:fastapi/full-stack-fastapi-template.git -``` - -- Push the code to your new repository: - -```bash -git push -u origin master -``` - -### Update From the Original Template - -After cloning the repository, and after doing changes, you might want to get the latest changes from this original template. - -- Make sure you added the original repository as a remote, you can check it with: - -```bash -git remote -v - -origin git@github.com:octocat/my-full-stack.git (fetch) -origin git@github.com:octocat/my-full-stack.git (push) -upstream git@github.com:fastapi/full-stack-fastapi-template.git (fetch) -upstream git@github.com:fastapi/full-stack-fastapi-template.git (push) -``` - -- Pull the latest changes without merging: - -```bash -git pull --no-commit upstream master -``` - -This will download the latest changes from this template without committing them, that way you can check everything is right before committing. - -- If there are conflicts, solve them in your editor. - -- Once you are done, commit the changes: - -```bash -git merge --continue -``` - -### Configure - -You can then update configs in the `.env` files to customize your configurations. - -Before deploying it, make sure you change at least the values for: - -- `SECRET_KEY` -- `FIRST_SUPERUSER_PASSWORD` -- `POSTGRES_PASSWORD` - -You can (and should) pass these as environment variables from secrets. - -Read the [deployment.md](./deployment.md) docs for more details. - -### Generate Secret Keys - -Some environment variables in the `.env` file have a default value of `changethis`. - -You have to change them with a secret key, to generate secret keys you can run the following command: - -```bash -python -c "import secrets; print(secrets.token_urlsafe(32))" -``` - -Copy the content and use that as password / secret key. And run that again to generate another secure key. - -## How To Use It - Alternative With Copier - -This repository also supports generating a new project using [Copier](https://copier.readthedocs.io). - -It will copy all the files, ask you configuration questions, and update the `.env` files with your answers. - -### Install Copier - -You can install Copier with: - -```bash -pip install copier -``` - -Or better, if you have [`pipx`](https://pipx.pypa.io/), you can run it with: - -```bash -pipx install copier -``` - -**Note**: If you have `pipx`, installing copier is optional, you could run it directly. - -### Generate a Project With Copier - -Decide a name for your new project's directory, you will use it below. For example, `my-awesome-project`. - -Go to the directory that will be the parent of your project, and run the command with your project's name: - -```bash -copier copy https://github.com/fastapi/full-stack-fastapi-template my-awesome-project --trust -``` - -If you have `pipx` and you didn't install `copier`, you can run it directly: - -```bash -pipx run copier copy https://github.com/fastapi/full-stack-fastapi-template my-awesome-project --trust -``` - -**Note** the `--trust` option is necessary to be able to execute a [post-creation script](https://github.com/fastapi/full-stack-fastapi-template/blob/master/.copier/update_dotenv.py) that updates your `.env` files. - -### Input Variables - -Copier will ask you for some data, you might want to have at hand before generating the project. - -But don't worry, you can just update any of that in the `.env` files afterwards. - -The input variables, with their default values (some auto generated) are: - -- `project_name`: (default: `"FastAPI Project"`) The name of the project, shown to API users (in .env). -- `stack_name`: (default: `"fastapi-project"`) The name of the stack used for Docker Compose labels and project name (no spaces, no periods) (in .env). -- `secret_key`: (default: `"changethis"`) The secret key for the project, used for security, stored in .env, you can generate one with the method above. -- `first_superuser`: (default: `"admin@example.com"`) The email of the first superuser (in .env). -- `first_superuser_password`: (default: `"changethis"`) The password of the first superuser (in .env). -- `smtp_host`: (default: "") The SMTP server host to send emails, you can set it later in .env. -- `smtp_user`: (default: "") The SMTP server user to send emails, you can set it later in .env. -- `smtp_password`: (default: "") The SMTP server password to send emails, you can set it later in .env. -- `emails_from_email`: (default: `"info@example.com"`) The email account to send emails from, you can set it later in .env. -- `postgres_password`: (default: `"changethis"`) The password for the PostgreSQL database, stored in .env, you can generate one with the method above. -- `sentry_dsn`: (default: "") The DSN for Sentry, if you are using it, you can set it later in .env. - -## Backend Development - -Backend docs: [backend/README.md](./backend/README.md). - -## Frontend Development - -Frontend docs: [frontend/README.md](./frontend/README.md). - -## Deployment - -Deployment docs: [deployment.md](./deployment.md). - -## Development - -General development docs: [development.md](./development.md). - -This includes using Docker Compose, custom local domains, `.env` configurations, etc. - -## Release Notes - -Check the file [release-notes.md](./release-notes.md). - -## License - -The Full Stack FastAPI Template is licensed under the terms of the MIT license. diff --git a/frontend/README.md b/frontend/README.md index 9a01970fda..59570319b9 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,4 +1,4 @@ -# FastAPI Project - Frontend +# MSOWENS Project - Frontend The frontend is built with [Vite](https://vitejs.dev/), [React](https://reactjs.org/), [TypeScript](https://www.typescriptlang.org/), [TanStack Query](https://tanstack.com/query), [TanStack Router](https://tanstack.com/router) and [Chakra UI](https://chakra-ui.com/). @@ -11,150 +11,10 @@ Before you begin, ensure that you have either the Node Version Manager (nvm) or * After installing either nvm or fnm, proceed to the `frontend` directory: ```bash -cd frontend + sudo yum install git -y + sudo yum install npm -y + git clone https://github.com/techbleat/ms-ownen-cleaning-service.git + cd ms-ownen-cleaning-service/frontend + npm install + npm run dev -- --host 0.0.0.0 ``` -* If the Node.js version specified in the `.nvmrc` file isn't installed on your system, you can install it using the appropriate command: - -```bash -# If using fnm -fnm install - -# If using nvm -nvm install -``` - -* Once the installation is complete, switch to the installed version: - -```bash -# If using fnm -fnm use - -# If using nvm -nvm use -``` - -* Within the `frontend` directory, install the necessary NPM packages: - -```bash -npm install -``` - -* And start the live server with the following `npm` script: - -```bash -npm run dev -``` - -* Then open your browser at http://localhost:5173/. - -Notice that this live server is not running inside Docker, it's for local development, and that is the recommended workflow. Once you are happy with your frontend, you can build the frontend Docker image and start it, to test it in a production-like environment. But building the image at every change will not be as productive as running the local development server with live reload. - -Check the file `package.json` to see other available options. - -### Removing the frontend - -If you are developing an API-only app and want to remove the frontend, you can do it easily: - -* Remove the `./frontend` directory. - -* In the `docker-compose.yml` file, remove the whole service / section `frontend`. - -* In the `docker-compose.override.yml` file, remove the whole service / section `frontend`. - -Done, you have a frontend-less (api-only) app. ๐Ÿค“ - ---- - -If you want, you can also remove the `FRONTEND` environment variables from: - -* `.env` -* `./scripts/*.sh` - -But it would be only to clean them up, leaving them won't really have any effect either way. - -## Generate Client - -### Automatically - -* Activate the backend virtual environment. -* From the top level project directory, run the script: - -```bash -./scripts/generate-frontend-client.sh -``` - -* Commit the changes. - -### Manually - -* Start the Docker Compose stack. - -* Download the OpenAPI JSON file from `http://localhost/api/v1/openapi.json` and copy it to a new file `openapi.json` at the root of the `frontend` directory. - -* To simplify the names in the generated frontend client code, modify the `openapi.json` file by running the following script: - -```bash -node modify-openapi-operationids.js -``` - -* To generate the frontend client, run: - -```bash -npm run generate-client -``` - -* Commit the changes. - -Notice that everytime the backend changes (changing the OpenAPI schema), you should follow these steps again to update the frontend client. - -## Using a Remote API - -If you want to use a remote API, you can set the environment variable `VITE_API_URL` to the URL of the remote API. For example, you can set it in the `frontend/.env` file: - -```env -VITE_API_URL=https://my-remote-api.example.com -``` - -Then, when you run the frontend, it will use that URL as the base URL for the API. - -## Code Structure - -The frontend code is structured as follows: - -* `frontend/src` - The main frontend code. -* `frontend/src/assets` - Static assets. -* `frontend/src/client` - The generated OpenAPI client. -* `frontend/src/components` - The different components of the frontend. -* `frontend/src/hooks` - Custom hooks. -* `frontend/src/routes` - The different routes of the frontend which include the pages. -* `theme.tsx` - The Chakra UI custom theme. - -## End-to-End Testing with Playwright - -The frontend includes initial end-to-end tests using Playwright. To run the tests, you need to have the Docker Compose stack running. Start the stack with the following command: - -```bash -docker compose up -d -``` - -Then, you can run the tests with the following command: - -```bash -npx playwright test -``` - -You can also run your tests in UI mode to see the browser and interact with it running: - -```bash -npx playwright test --ui -``` - -To stop and remove the Docker Compose stack and clean the data created in tests, use the following command: - -```bash -docker compose down -v -``` - -To update the tests, navigate to the tests directory and modify the existing test files or add new ones as needed. - -For more information on writing and running Playwright tests, refer to the official [Playwright documentation](https://playwright.dev/docs/intro). \ No newline at end of file diff --git a/frontend/index.html b/frontend/index.html index 57621a268b..0eccbd73ca 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,7 +4,7 @@ - Full Stack FastAPI Project + Fxxxxx diff --git a/frontend/public/assets/images/owens.svg b/frontend/public/assets/images/owens.svg new file mode 100644 index 0000000000..bbc2deec45 --- /dev/null +++ b/frontend/public/assets/images/owens.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/routes/login.tsx b/frontend/src/routes/login.tsx index 20a9be6564..3f4eb5d460 100644 --- a/frontend/src/routes/login.tsx +++ b/frontend/src/routes/login.tsx @@ -20,7 +20,7 @@ import { } from "@tanstack/react-router" import { type SubmitHandler, useForm } from "react-hook-form" -import Logo from "/assets/images/fastapi-logo.svg" +import Logo from "/assets/images/owens.svg" import type { Body_login_login_access_token as AccessToken } from "../client" import useAuth, { isLoggedIn } from "../hooks/useAuth" import { emailPattern } from "../utils" @@ -126,6 +126,9 @@ function Login() { {error && {error}} + + Powered by TechBleat + Forgot password?