https://github.com/jamalsoueidan/booking-admin
An Azure Static Web App (React) that uses all booking APIs.
https://github.com/jamalsoueidan/booking-admin
azure chromatic openapi orval react react-query static-web-app storybook typescript
Last synced: 2 months ago
JSON representation
An Azure Static Web App (React) that uses all booking APIs.
- Host: GitHub
- URL: https://github.com/jamalsoueidan/booking-admin
- Owner: jamalsoueidan
- Created: 2023-04-07T16:16:08.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-29T11:58:49.000Z (about 3 years ago)
- Last Synced: 2026-02-20T07:08:05.271Z (4 months ago)
- Topics: azure, chromatic, openapi, orval, react, react-query, static-web-app, storybook, typescript
- Language: TypeScript
- Homepage: https://www.chromatic.com/library?appId=6437113363a41d5b2578b431
- Size: 1.67 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Booking Admin Application
Preview: https://victorious-water-04353a503.2.azurestaticapps.net/
The Booking Admin application manage appointments for users. It is built using the React library and the Shopify Polaris design system. The application serves as the front-end layer that communicates with the back-end Booking API, providing seamless and user-friendly management of appointments, shifts, and user-related tasks.
## Deployment
```js
npm run build
```
This will install deps, download openapi.yml and generate the typesafe react-query hook, and start the dev server.
## Development
```js
npm install
npm run fb-openapi //fetch and build openapi
npm run dev
```
## Github Actions:
### pull request
1. Running chromatic (storybook)
2. Validate that build works (in case any api generation failling for some reason)
### main branch
1. Deploy Azure Static Web App
## Vite configuration
You need to configure vite to point to the api.
```js
export default defineConfig({
server: {
open: true,
proxy: {
"/api": {
target: "http://localhost:7071/api",
changeOrigin: true,
secure: false,
ws: false,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
plugins: [react()],
});
```
## Articles
- How to convert openapi to use-query:
https://xata.io/blog/openapi-typesafe-react-query-hooks
- Link an existing Azure Functions app
https://learn.microsoft.com/en-us/azure/static-web-apps/functions-bring-your-own#link-an-existing-azure-functions-app