ANDJ/Emailsorter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Email Sorter Beta

Browse Source 
Ich habe soweit automatisiert the Emails sortieren aber ich muss noch schauen was es fur bugs es gibt wenn die app online  ist deswegen wurde ich mit diesen Commit die website veroffentlichen obwohjl es sein konnte  das es noch nicht fertig ist und verkaufs bereit
This commit is contained in:
ANDJ
2026-01-22 19:32:12 +01:00
parent 95349af50b
commit abf761db07
596 changed files with 56405 additions and 51231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
starter-for-react/.env.example Normal file
View File

@@ -0,0 +1,3 @@
VITE_APPWRITE_ENDPOINT=
VITE_APPWRITE_PROJECT_ID=
VITE_APPWRITE_PROJECT_NAME=

26
starter-for-react/.gitignore vendored Normal file
View File

@@ -0,0 +1,26 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.env

21
starter-for-react/LICENSE Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2024 Appwrite
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

26
starter-for-react/README.md Normal file
View File

@@ -0,0 +1,26 @@
# React starter kit with Appwrite
Kickstart your React development with this ready-to-use starter project integrated with [Appwrite](https://www.appwrite.io)
## 🚀Getting started
###
Clone the Project
Clone this repository to your local machine using Git:
`git clone https://github.com/appwrite/starter-for-react`
## 🛠️ Development guid
1. **Configure Appwrite**<br/>
Navigate to `.env` and update the values to match your Appwrite project credentials.
2. **Customize as needed**<br/>
Modify the starter kit to suit your app's requirements. Adjust UI, features, or backend
integrations as per your needs.
3. **Install dependencies**<br/>
Run `npm install` to install all dependencies.
4. **Run the app**<br/>
Start the project by running `npm run dev`.
## 💡 Additional notes
- This starter project is designed to streamline your React development with Appwrite.
- Refer to the [Appwrite documentation](https://appwrite.io/docs) for detailed integration guidance.

38
starter-for-react/eslint.config.js Normal file
View File

@@ -0,0 +1,38 @@
import js from '@eslint/js'
import globals from 'globals'
import react from 'eslint-plugin-react'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
export default [
{ ignores: ['dist'] },
{
files: ['**/*.{js,jsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: 'latest',
ecmaFeatures: { jsx: true },
sourceType: 'module',
},
},
settings: { react: { version: '18.3' } },
plugins: {
react,
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...js.configs.recommended.rules,
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
...reactHooks.configs.recommended.rules,
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
]

19
starter-for-react/index.html Normal file
View File

@@ -0,0 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<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=Fira+Code&family=Inter:opsz,wght@14..32,100..900&family=Poppins:wght@300;400&display=swap"
rel="stylesheet"
/>
<link rel="icon" type="image/svg+xml" href="/appwrite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Appwrite + React</title>
</head>
<body class="bg-[#FAFAFB] font-[Inter] text-sm text-[#56565C]">
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

5087
starter-for-react/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

33
starter-for-react/package.json Normal file
View File

@@ -0,0 +1,33 @@
{
"name": "react-starter-kit-for-appwrite",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@appwrite.io/pink-icons": "^1.0.0",
"@tailwindcss/vite": "^4.0.14",
"appwrite": "^21.2.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tailwindcss": "^4.0.14"
},
"devDependencies": {
"@eslint/js": "^9.19.0",
"@types/react": "^19.0.8",
"@types/react-dom": "^19.0.3",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.19.0",
"eslint-plugin-react": "^7.37.4",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.18",
"globals": "^15.14.0",
"prettier": "3.5.3",
"vite": "^6.1.0"
}
}

8
starter-for-react/public/appwrite.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M24.4429 16.4322V21.9096H10.7519C6.76318 21.9096 3.28044 19.7067 1.4171 16.4322C1.14622 15.9561 0.909137 15.4567 0.710264 14.9383C0.319864 13.9225 0.0744552 12.8325 0 11.6952V10.2143C0.0161646 9.96089 0.0416361 9.70942 0.0749451 9.46095C0.143032 8.95105 0.245898 8.45211 0.381093 7.96711C1.66006 3.36909 5.81877 0 10.7519 0C15.6851 0 19.8433 3.36909 21.1223 7.96711H15.2682C14.3072 6.4683 12.6437 5.4774 10.7519 5.4774C8.86017 5.4774 7.19668 6.4683 6.23562 7.96711C5.9427 8.42274 5.71542 8.92516 5.56651 9.46095C5.43425 9.93599 5.36371 10.4369 5.36371 10.9548C5.36371 12.5248 6.01324 13.94 7.05463 14.9383C8.01961 15.865 9.32061 16.4322 10.7519 16.4322H24.4429Z"
fill="#FD366E" />
<path
d="M24.4429 9.46094V14.9383H14.4492C15.4906 13.94 16.1401 12.5248 16.1401 10.9548C16.1401 10.4369 16.0696 9.93598 15.9373 9.46094H24.4429Z"
fill="#FD366E" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1012 B

6
starter-for-react/public/react.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" role="img" className="iconify iconify--logos" width="35.93" height="32"
preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228">
<path fill="#00D8FF"
d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

20
starter-for-react/src/App.css Normal file
View File

@@ -0,0 +1,20 @@
@import "tailwindcss";
summary::-webkit-details-marker {
display: none
}
.checker-background::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(#e6e6e690 1px, transparent 1px),
linear-gradient(90deg, #e6e6e690 1px, transparent 1px);
background-size: 3.7em 3.7em;
mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 55%);
z-index: -1;
background-position-x: center;
}

311
starter-for-react/src/App.jsx Normal file
View File

@@ -0,0 +1,311 @@
import { useState, useRef, useEffect, useCallback } from "react";
import "./App.css";
import { client } from "./lib/appwrite";
import { AppwriteException } from "appwrite";
import AppwriteSvg from "../public/appwrite.svg";
import ReactSvg from "../public/react.svg";
function App() {
const [detailHeight, setDetailHeight] = useState(55);
const [logs, setLogs] = useState([]);
const [status, setStatus] = useState("idle");
const [showLogs, setShowLogs] = useState(false);
const detailsRef = useRef(null);
const updateHeight = useCallback(() => {
if (detailsRef.current) {
setDetailHeight(detailsRef.current.clientHeight);
}
}, [logs, showLogs]);
useEffect(() => {
updateHeight();
window.addEventListener("resize", updateHeight);
return () => window.removeEventListener("resize", updateHeight);
}, [updateHeight]);
useEffect(() => {
if (!detailsRef.current) return;
detailsRef.current.addEventListener("toggle", updateHeight);
return () => {
if (!detailsRef.current) return;
detailsRef.current.removeEventListener("toggle", updateHeight);
};
}, []);
async function sendPing() {
if (status === "loading") return;
setStatus("loading");
try {
const result = await client.ping();
const log = {
date: new Date(),
method: "GET",
path: "/v1/ping",
status: 200,
response: JSON.stringify(result),
};
setLogs((prevLogs) => [log, ...prevLogs]);
setStatus("success");
} catch (err) {
const log = {
date: new Date(),
method: "GET",
path: "/v1/ping",
status: err instanceof AppwriteException ? err.code : 500,
response:
err instanceof AppwriteException
? err.message
: "Something went wrong",
};
setLogs((prevLogs) => [log, ...prevLogs]);
setStatus("error");
}
setShowLogs(true);
}
return (
<main
className="checker-background flex flex-col items-center p-5"
style={{ marginBottom: `${detailHeight}px` }}
>
<div className="mt-25 flex w-full max-w-[40em] items-center justify-center lg:mt-34">
<div className="rounded-[25%] border border-[#19191C0A] bg-[#F9F9FA] p-3 shadow-[0px_9.36px_9.36px_0px_hsla(0,0%,0%,0.04)]">
<div className="rounded-[25%] border border-[#FAFAFB] bg-white p-5 shadow-[0px_2px_12px_0px_hsla(0,0%,0%,0.03)] lg:p-9">
<img
alt={"React logo"}
src={ReactSvg}
className="h-14 w-14"
width={56}
height={56}
/>
</div>
</div>
<div
className={`flex w-38 items-center transition-opacity duration-2500 ${status === "success" ? "opacity-100" : "opacity-0"}`}
>
<div className="to-[rgba(253, 54, 110, 0.15)] h-[1px] flex-1 bg-gradient-to-l from-[#f02e65]"></div>
<div className="icon-check flex h-5 w-5 items-center justify-center rounded-full border border-[#FD366E52] bg-[#FD366E14] text-[#FD366E]"></div>
<div className="to-[rgba(253, 54, 110, 0.15)] h-[1px] flex-1 bg-gradient-to-r from-[#f02e65]"></div>
</div>
<div className="rounded-[25%] border border-[#19191C0A] bg-[#F9F9FA] p-3 shadow-[0px_9.36px_9.36px_0px_hsla(0,0%,0%,0.04)]">
<div className="rounded-[25%] border border-[#FAFAFB] bg-white p-5 shadow-[0px_2px_12px_0px_hsla(0,0%,0%,0.03)] lg:p-9">
<img
alt={"Appwrite logo"}
src={AppwriteSvg}
className="h-14 w-14"
width={56}
height={56}
/>
</div>
</div>
</div>
<section className="mt-12 flex h-52 flex-col items-center">
{status === "loading" ? (
<div className="flex flex-row gap-4">
<div role="status">
<svg
aria-hidden="true"
className="h-5 w-5 animate-spin fill-[#FD366E] text-gray-200 dark:text-gray-600"
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor"
/>
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill"
/>
</svg>
<span className="sr-only">Loading...</span>
</div>
<span>Waiting for connection...</span>
</div>
) : status === "success" ? (
<h1 className="font-[Poppins] text-2xl font-light text-[#2D2D31]">
Congratulations!
</h1>
) : (
<h1 className="font-[Poppins] text-2xl font-light text-[#2D2D31]">
Check connection
</h1>
)}
<p className="mt-2 mb-8">
{status === "success" ? (
<span>You connected your app successfully.</span>
) : status === "error" || status === "idle" ? (
<span>Send a ping to verify the connection</span>
) : null}
</p>
<button
onClick={sendPing}
className={`cursor-pointer rounded-md bg-[#FD366E] px-2.5 py-1.5 ${status === "loading" ? "hidden" : "visible"}`}
>
<span className="text-white">Send a ping</span>
</button>
</section>
<div className="grid grid-rows-3 gap-7 lg:grid-cols-3 lg:grid-rows-none">
<div className="flex h-full w-72 flex-col gap-2 rounded-md border border-[#EDEDF0] bg-white p-4">
<h2 className="text-xl font-light text-[#2D2D31]">Edit your app</h2>
<p>
Edit{" "}
<code className="rounded-sm bg-[#EDEDF0] p-1">app/page.js</code> to
get started with building your app.
</p>
</div>
<a
href="https://cloud.appwrite.io"
target="_blank"
rel="noopener noreferrer"
>
<div className="flex h-full w-72 flex-col gap-2 rounded-md border border-[#EDEDF0] bg-white p-4">
<div className="flex flex-row items-center justify-between">
<h2 className="text-xl font-light text-[#2D2D31]">
Go to console
</h2>
<span className="icon-arrow-right text-[#D8D8DB]"></span>
</div>
<p>
Navigate to the console to control and oversee the Appwrite
services.
</p>
</div>
</a>
<a
href="https://appwrite.io/docs"
target="_blank"
rel="noopener noreferrer"
>
<div className="flex h-full w-72 flex-col gap-2 rounded-md border border-[#EDEDF0] bg-white p-4">
<div className="flex flex-row items-center justify-between">
<h2 className="text-xl font-light text-[#2D2D31]">
Explore docs
</h2>
<span className="icon-arrow-right text-[#D8D8DB]"></span>
</div>
<p>
Discover the full power of Appwrite by diving into our
documentation.
</p>
</div>
</a>
</div>
<aside className="fixed bottom-0 flex w-full cursor-pointer border-t border-[#EDEDF0] bg-white">
<details open={showLogs} ref={detailsRef} className={"w-full"}>
<summary className="flex w-full flex-row justify-between p-4 marker:content-none">
<div className="flex gap-2">
<span className="font-semibold">Logs</span>
{logs.length > 0 && (
<div className="flex items-center rounded-md bg-[#E6E6E6] px-2">
<span className="font-semibold">{logs.length}</span>
</div>
)}
</div>
<div className="icon">
<span className="icon-cheveron-down" aria-hidden="true"></span>
</div>
</summary>
<div className="flex w-full flex-col lg:flex-row">
<div className="flex flex-col border-r border-[#EDEDF0]">
<div className="border-y border-[#EDEDF0] bg-[#FAFAFB] px-4 py-2 text-[#97979B]">
Project
</div>
<div className="grid grid-cols-2 gap-4 p-4">
<div className="flex flex-col">
<span className="text-[#97979B]">Endpoint</span>
<span className="truncate">
{import.meta.env.VITE_APPWRITE_ENDPOINT}
</span>
</div>
<div className="flex flex-col">
<span className="text-[#97979B]">Project-ID</span>
<span className="truncate">
{import.meta.env.VITE_APPWRITE_PROJECT_ID}
</span>
</div>
<div className="flex flex-col">
<span className="text-[#97979B]">Project name</span>
<span className="truncate">
{import.meta.env.VITE_APPWRITE_PROJECT_NAME}
</span>
</div>
</div>
</div>
<div className="flex-grow">
<table className="w-full">
<thead>
<tr className="border-y border-[#EDEDF0] bg-[#FAFAFB] text-[#97979B]">
{logs.length > 0 ? (
<>
<td className="w-52 py-2 pl-4">Date</td>
<td>Status</td>
<td>Method</td>
<td className="hidden lg:table-cell">Path</td>
<td className="hidden lg:table-cell">Response</td>
</>
) : (
<>
<td className="py-2 pl-4">Logs</td>
</>
)}
</tr>
</thead>
<tbody>
{logs.length > 0 ? (
logs.map((log) => (
<tr>
<td className="py-2 pl-4 font-[Fira_Code]">
{log.date.toLocaleString("en-US", {
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
})}
</td>
<td>
{log.status > 400 ? (
<div className="w-fit rounded-sm bg-[#FF453A3D] px-1 text-[#B31212]">
{log.status}
</div>
) : (
<div className="w-fit rounded-sm bg-[#10B9813D] px-1 text-[#0A714F]">
{log.status}
</div>
)}
</td>
<td>{log.method}</td>
<td className="hidden lg:table-cell">{log.path}</td>
<td className="hidden font-[Fira_Code] lg:table-cell">
{log.response}
</td>
</tr>
))
) : (
<tr>
<td className="py-2 pl-4 font-[Fira_Code]">
There are no logs to show
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</details>
</aside>
</main>
);
}
export default App;

10
starter-for-react/src/lib/appwrite.js Normal file
View File

@@ -0,0 +1,10 @@
import { Client, Account, Databases } from "appwrite";
const client = new Client()
.setEndpoint(import.meta.env.VITE_APPWRITE_ENDPOINT)
.setProject(import.meta.env.VITE_APPWRITE_PROJECT_ID);
const account = new Account(client);
const databases = new Databases(client);
export { client, account, databases };

10
starter-for-react/src/main.jsx Normal file
View File

@@ -0,0 +1,10 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import "@appwrite.io/pink-icons";
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)

8
starter-for-react/vite.config.js Normal file
View File

@@ -0,0 +1,8 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig({
plugins: [react(), tailwindcss()],
})