Devrel 1236/create jumpstart app

.env.template

@@ -0,0 +1,12 @@
+VITE_ENVIRONMENT_ID=
+VITE_DELIVERY_API_KEY=
+
+# (Optional) used only for model generation
+VITE_MAPI_API_KEY=
+
+# Only for Kontent.ai developers
+VITE_AUTH_REDIRECT_URL=
+VITE_AUTH_DOMAIN=
+VITE_AUTH_CLIENT_ID=
+VITE_KONTENT_URL=
+VITE_DELIVER_URL=

.github/workflows/build.yml

@@ -0,0 +1,22 @@
+name: Lint & Build
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        id: nvm
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run build
+

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

.nvmrc

@@ -0,0 +1 @@
+lts/*

README.md

@@ -1,50 +1,67 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+# Kontent.ai Kickstart Sample React App
+
+[![Contributors][contributors-shield]][contributors-url]
+[![Forks][forks-shield]][forks-url]
+[![Stargazers][stars-shield]][stars-url]
+[![Issues][issues-shield]][issues-url]
+[![MIT License][license-shield]][license-url]
+[![Discord][discord-shield]][discord-url]
+
+This repository contains the solution for the Kontent.ai Kickstart Sample React App. It serves as a learning resource for those starting new projects with Kontent.ai, providing a foundational template to build upon.
+
+The app is built with Vite for fast and optimized development, and Tailwind CSS is used for styling the application.
+
+## Contributing
+
+### How to Contribute
+
+- **Report Issues**: Use the [GitHub Issues](https://github.com/kontent-ai/kickstart-react-app/issues) to report bugs or request features.
+- **Fork the Repository**: Create a personal fork of the repository on GitHub.
+- **Create a Feature Branch**: Use a descriptive name for your branch.
+- **Submit a Pull Request**: Submit your changes for review.
+
+Please read our [Contributing Guidelines](CONTRIBUTING.md) for more details.
+
+### Code of Conduct
+
+This project adheres to a [Code of Conduct](https://github.com/kontent-ai/.github/blob/main/CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code.
+
+### Getting Started with Development
+
+- Run `npm ci` to install packages.
+- Create a `.env` file from `.env.template` and fill out all necessary variables.
+- Run `npm run dev` to run the application in developer mode.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details.
+
+---
+
+## Support
+
+If you have any questions or need assistance, please reach out:
+
+- **Kontent.ai Support**: [Contact Support](https://kontent.ai/support/)
+
+---
+
+## Additional Resources
+
+- **Kontent.ai Official Documentation**: [Learn more about Kontent.ai](https://kontent.ai/learn/)
+
+---
+
+[contributors-shield]: https://img.shields.io/github/contributors/kontent-ai/kickstart-react-app?style=for-the-badge
+[contributors-url]: https://github.com/kontent-ai/kickstart-react-app/graphs/contributors
+[forks-shield]: https://img.shields.io/github/forks/kontent-ai/kickstart-react-app.svg?style=for-the-badge
+[forks-url]: https://github.com/kontent-ai/kickstart-react-app/network/members
+[stars-shield]: https://img.shields.io/github/stars/kontent-ai/kickstart-react-app.svg?style=for-the-badge
+[stars-url]: https://github.com/kontent-ai/kickstart-react-app/stargazers
+[issues-shield]: https://img.shields.io/github/issues/kontent-ai/kickstart-react-app.svg?style=for-the-badge
+[issues-url]: https://github.com/kontent-ai/kickstart-react-app/issues
+[license-shield]: https://img.shields.io/github/license/kontent-ai/kickstart-react-app.svg?style=for-the-badge
+[license-url]: https://github.com/kontent-ai/kickstart-react-app/blob/master/LICENSE.md
+[discord-shield]: https://img.shields.io/discord/821885171984891914?color=%237289DA&label=Kontent.ai%20Discord&logo=discord&style=for-the-badge
+[discord-url]: https://discord.com/invite/SKCxwPtevJ
+

eslint.config.js

@@ -3,17 +3,26 @@ import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
+import react from 'eslint-plugin-react';
 
 export default tseslint.config(
+  js.configs.recommended,
+  tseslint.configs.recommended,
   { ignores: ['dist'] },
   {
-    extends: ["@kontent-ai"],
     files: ['**/*.{ts,tsx}'],
     languageOptions: {
-      ecmaVersion: 2020,
+      ecmaVersion: "latest",
+      sourceType: "module",
       globals: globals.browser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true
+        }
+      }
     },
     plugins: {
+      react,
       'react-hooks': reactHooks,
       'react-refresh': reactRefresh,
     },

generateModel.ts

@@ -0,0 +1,30 @@
+import dotenv from 'dotenv';
+import {generateDeliveryModelsAsync} from "@kontent-ai/model-generator";
+
+
+dotenv.config();
+
+const {VITE_ENVIRONMENT_ID, VITE_MAPI_API_KEY} = process.env;
+
+if(!VITE_ENVIRONMENT_ID){
+  throw new Error("VITE_ENVIRONMENT_ID cannot be empty!");
+}
+
+if(!VITE_MAPI_API_KEY){
+  throw new Error("VITE_MAPI_API_KEY cannot be empty!");
+}
+
+await generateDeliveryModelsAsync(
+  {
+    environmentId: VITE_ENVIRONMENT_ID,
+    apiKey: VITE_MAPI_API_KEY,
+    addTimestamp: false,
+    outputDir: "./src/model",
+    moduleFileExtension: "ts",
+    fileResolvers: {
+      taxonomy: "camelCase",
+      contentType: "camelCase",
+      snippet: "camelCase"
+    }
+  }
+);

index.html

@@ -4,7 +4,11 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <meta name="description" content="Get started quickly with Kontent.ai using our Kickstart application template." />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700;800&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
+    <title>Kontent.ai Kickstart</title>
   </head>
   <body>
     <div id="root"></div>