dev 2 main

.env.development

@@ -1,2 +1,3 @@
-VITE_API_BASE_URL=http://localhost:8000/dev/api
-VITE_ENV=dev
+VITE_API_BASE_URL=https://be.starters.rayonstudios.com/api/v1
+VITE_ENV=dev
+VITE_HCAPTCHA_SITE_KEY=cd86c190-7a30-4042-9468-018cd91ef63c

.env.production

@@ -1,2 +1,3 @@
-VITE_API_BASE_URL=http://localhost:8000/api
-VITE_ENV=production
+VITE_API_BASE_URL=https://be.starters.rayonstudios.com/api
+VITE_ENV=production
+VITE_HCAPTCHA_SITE_KEY=cd86c190-7a30-4042-9468-018cd91ef63c

.eslintrc.cjs

@@ -15,5 +15,10 @@ module.exports = {
       "warn",
       { allowConstantExport: true },
     ],
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "no-useless-escape": "off",
+    "no-empty": "off",
   },
 };

.firebaserc

@@ -1,16 +1,16 @@
 {
   "targets": {
-    "applied-abbey-378009": {
+    "rayon-gcp-starter": {
       "hosting": {
         "prod": [
-          "rayon-react-starter"
+          "rayon-gcp-starter"
         ]
       }
     },
-    "physikomatics-be": {
+    "rayon-gcp-starter": {
       "hosting": {
         "dev": [
-          "rayon-react-starter-dev"
+          "rayon-gcp-starter"
         ]
       }
     }

.github/workflows/dev-deploy.yml

@@ -0,0 +1,25 @@
+name: Deploy to Firebase Hosting - Dev
+"on":
+  push:
+    branches:
+      - dev
+  workflow_dispatch:
+
+jobs:
+  build_and_deploy:
+    permissions: write-all
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - run: yarn install --frozen-lockfile && npm run build:dev
+        env:
+          CI: false
+
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.SECRETJSON_DEV }}"
+          channelId: live
+          projectId: rayon-gcp-starter
+          target: dev

.github/workflows/pr-preview-dev.yml

@@ -0,0 +1,23 @@
+name: Preview deploy to Firebase Hosting on PR (dev)
+on:
+  pull_request:
+    branches:
+      - dev
+
+jobs:
+  build_and_preview:
+    permissions: write-all
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - run: yarn install --frozen-lockfile && npm run build:dev
+        env:
+          CI: false
+
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.SECRETJSON_DEV }}"
+          projectId: rayon-gcp-starter
+          target: dev

.github/workflows/pr-preview-prod.yml

@@ -0,0 +1,23 @@
+name: Preview deploy to Firebase Hosting on PR (main)
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build_and_preview:
+    permissions: write-all
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - run: yarn install --frozen-lockfile && npm run build:prod
+        env:
+          CI: false
+
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.SECRETJSON_PROD }}"
+          projectId: rayon-gcp-starter
+          target: prod

.github/workflows/prod-deploy.yml

@@ -0,0 +1,25 @@
+name: Deploy to Firebase Hosting - Prod
+"on":
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  build_and_deploy:
+    permissions: write-all
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - run: yarn install --frozen-lockfile && npm run build:dev
+        env:
+          CI: false
+
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.SECRETJSON_PROD }}"
+          channelId: live
+          projectId: rayon-gcp-starter
+          target: prod

README.md

@@ -2,7 +2,7 @@
 
 Rayon React Starter is an opinionated starter kit designed to scaffold React projects quickly with a comprehensive and well-structured environment. Built with a modern tech stack and batteries included, it helps you start building your project in no time.
 
-[Live Demo](https://rayon-react-starter.web.app/)
+[Live Demo](https://fe.starters.rayonstudios.com/)
 
 ## Tech Stack
 
@@ -12,7 +12,8 @@ Rayon React Starter is an opinionated starter kit designed to scaffold React pro
 - **Redux Toolkit**: State management with slices and thunks
 - **Ant Design**: Elegant and consistent UI components
 - **Tailwind CSS**: Utility-first CSS framework for rapid UI development
-- **Axios**: Promise-based HTTP client for making requests
+- **OpenAPI Fetch**: Type-safe API client generated from OpenAPI schemas
+- **Axios**: Promise-based HTTP client for making requests (used as the fetch implementation for OpenAPI Fetch)
 
 ## Features
 
@@ -29,6 +30,8 @@ Rayon React Starter is an opinionated starter kit designed to scaffold React pro
 - 🛠 **Built-in Utilities**: Handy utility functions, hooks, and components to cover common use cases
 - 🧹 **Prettier and ESLint Config**: Enforce code style and quality with Prettier and ESLint configurations
 - 🚀 **CI/CD with Firebase Hosting**: Continuous Integration and Deployment setup using Firebase Hosting and Github Actions for seamless deployment
+- 📊 **ServerPaginatedTable**: Automatic server-side pagination, filtering, and sorting for data tables
+- 📝 **OpenAPI Type Generation**: Automatic type generation from OpenAPI schemas for type-safe API calls
 
 ## Getting Started
 
@@ -44,7 +47,7 @@ Ensure you have the following installed:
 1. Clone the repository:
     ```bash
     git clone https://github.com/rayonstudios/rayon_react_starter
-    cd rayon-react-starter
+    cd rayon_react_starter
     ```
 2. Install dependencies:
     ```bash
@@ -57,26 +60,102 @@ Ensure you have the following installed:
 
 The application should now be running on http://localhost:5173
 
-## Folde Structure
+## Environment Configuration
+
+The project supports different environments:
+
+```bash
+# Development mode
+yarn dev          # Run with development configuration
+yarn build:dev    # Build with development configuration
+
+# Production mode
+yarn prod         # Run with production configuration
+yarn build:prod   # Build with production configuration
+```
+
+## API Integration
+
+### OpenAPI Type Generation
+
+The project includes a script to generate TypeScript types from an OpenAPI schema:
+
+```bash
+yarn gen-api-types:dev  # Generate types from development API
+yarn gen-api-types:prod # Generate types from production API
+```
+
+The script fetches the OpenAPI schema from the API endpoint (configured via `VITE_API_BASE_URL` in the environment files) and generates TypeScript types in `src/lib/types/openapi-fetch.d.ts`.
+
+### Making API Calls
+
+The project uses `openapi-fetch` with Axios as the fetch implementation for type-safe API calls:
+
+```typescript
+import apiClient, { withApiResponseHandling } from '@/lib/openapi-fetch.config';
+
+// Example API call with type safety
+const { data } = await withApiResponseHandling(
+  apiClient.GET('/api/users/{id}', {
+    params: { path: { id: userId } }
+  })
+);
+```
+
+## Folder Structure
 
 ```bash
 ├── lib/         # Reusable, feature-independent code
+│   ├── components/  # Shared UI components
+│   ├── hooks/       # Custom React hooks
+│   ├── types/       # TypeScript type definitions
+│   └── utils/       # Utility functions
 ├── modules/     # Feature-dependent code
+│   ├── auth/        # Authentication related components and logic
+│   └── ...          # Other feature modules
 ├── pages/       # Page components
-└── ...
+└── scripts/     # Build and utility scripts
 ```
 
 - Use **snake_case** for file and folder names to maintain consistency.
 - Feature-based folder structure ensures a clean separation of concerns for better scalability and maintainability.
 
+## Common Components
+
+### ServerPaginatedTable
+
+`ServerPaginatedTable` is a powerful component for handling server-side paginated data:
+
+```typescript
+import { ServerPaginatedTable } from '@/lib/components/table/server_paginated_table';
+
+// Example usage
+<ServerPaginatedTable
+  url="/api/users"
+  columns={columns}
+  queryParams={{ status: 'active' }}
+/>
+```
+
+The component automatically handles:
+- Pagination
+- Sorting
+- Filtering
+- Loading states
+- Error handling
+
 ## Best Practices
 
 - Reusable code should generally reside in the `lib` folder.
 - Feature-dependent code should be organized under `modules`.
-Pages components should be placed under the `pages` folder.
+- Pages components should be placed under the `pages` folder.
+- Use TypeScript for type safety across the application.
+- Follow the established patterns for state management with Redux Toolkit.
+- Use OpenAPI Fetch for API calls to ensure type safety.
+- Use ServerPaginatedTable for displaying data from API endpoints with pagination.
 
 ## Roadmap
 
 - [ ] Detailed Developer Documentation
 - [ ] Add unit, integration and e2e tests support
-- [ ] Convert to a modular CLI based tools
+- [ ] Convert to a modular CLI based tool

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -15,7 +15,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="description"
-      content="Rayon React Starter is a starter template (batteries included) for React applications."
+      content="Rayon React Starter is an opinionated starter kit designed to scaffold React projects quickly with a comprehensive and well-structured environment. Built with a modern tech stack and batteries included, it helps you start building your project in no time."
     />
     <title>Rayon React Starter</title>
   </head>