appwrite · Nishantjain10 · Jun 20, 2025 · Jun 20, 2025 · Jun 20, 2025 · Jun 20, 2025
diff --git a/react/formspree/.env.example b/react/formspree/.env.example
@@ -0,0 +1,11 @@
+# Formspree configuration
+# Replace 'xxxxxxxxxxxx' with your actual form ID from formspree.io
+VITE_FORMSPREE_FORM_ID=xxxxxxxxxxxx
+
+# Example:
+# VITE_FORMSPREE_FORM_ID=xrgkpqld
+
+# Instructions:
+# 1. Copy this file and rename it to '.env'
+# 2. Replace the placeholder value with your actual Formspree form ID
+# 4. Restart your development server after making changes to .env 
diff --git a/react/formspree/.gitignore b/react/formspree/.gitignore
@@ -22,3 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env
+.env.local
+.env.*.local
diff --git a/react/formspree/README.md b/react/formspree/README.md
@@ -1,12 +1,104 @@
-# React + Vite
+# Job Application Form with Formspree
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A modern, responsive job application form built with React, Vite, and Tailwind CSS, integrated with Formspree for form submissions.
 
-Currently, two official plugins are available:
+## Features
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- 📝 Clean and professional job application form
+- ⚡ Built with Vite for fast development
+- 🔒 Secure form submissions via Formspree
+- ✨ Real-time form validation
 
-## Expanding the ESLint configuration
+## Prerequisites
 
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+Before you begin, ensure you have the following installed:
+- Node.js (v14 or higher)
+- npm or yarn
+- A Formspree account and form ID
+
+## Quick Start
+
+1. Clone the repository:
+```bash
+git clone https://github.com/yourusername/formspree-job-application-form.git
+cd formspree-job-application-form
+```
+
+2. Install dependencies:
+```bash
+npm install
+# or
+yarn install
+```
+
+3. Configure environment variables:
+   - Copy the example environment file:
+   ```bash
+   cp env.example .env
+   ```
+   - Update the `.env` file with your Formspree form ID:
+   ```env
+   VITE_FORMSPREE_FORM_ID=your_form_id_here
+   ```
+
+4. Start the development server:
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+5. Open your browser and visit `http://localhost:5173`
+
+## Environment Variables
+
+The following environment variables are required:
+
+| Variable | Description | Example |
+|----------|-------------|---------|
+| VITE_FORMSPREE_FORM_ID | Your Formspree form ID | xrgkpqld |
+
+## Project Structure
+
+```
+formspree-job-application-form/
+├── src/
+│   ├── App.jsx          # Main application component
+│   ├── App.css          # Application styles
+│   ├── main.jsx         # Entry point
+│   └── assets/          # Static assets
+├── public/              # Public assets
+├── .env                 # Environment variables (not in git)
+├── env.example          # Example environment variables
+├── package.json         # Project dependencies
+└── README.md           # Project documentation
+```
+
+## Development
+
+### Available Scripts
+
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run preview` - Preview production build
+- `npm run lint` - Run ESLint
+- `npm run format` - Format code with Prettier
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## License
+
+This project is licensed under the MIT License
+
+## Acknowledgments
+
+- [React](https://reactjs.org/)
+- [Vite](https://vitejs.dev/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Formspree](https://formspree.io/)
diff --git a/react/formspree/src/App.jsx b/react/formspree/src/App.jsx
@@ -3,7 +3,7 @@ import './App.css'
 import { useForm, ValidationError } from "@formspree/react";
 
 function App() {
-  const [state, handleSubmit] = useForm("FORM_ID");
+  const [state, handleSubmit] = useForm(import.meta.env.VITE_FORMSPREE_FORM_ID);
 
   if (state.succeeded) {
     return (
@@ -223,13 +223,13 @@ function App() {
 
             <div className="space-y-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="dates">
+                <label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="position">
                   Position
                 </label>
                 <select
                   className="w-full h-10 px-4 rounded-lg outline outline-1 outline-gray-400 hover:outline-gray-600 focus:outline-2 focus:outline-blue-500 transition-all duration-200 appearance-none bg-white"
-                  id="dates"
-                  name="dates"
+                  id="position"
+                  name="position"
                 >
                   <option value="software-engineer">Software Engineer</option>
                   <option value="senior-software-engineer">Senior Software Engineer</option>

diff --git a/react/react-admin/.env b/react/react-admin/.env
@@ -1,4 +1,4 @@
-VITE_APPWRITE_ENDPOINT=${VITE_APPWRITE_ENDPOINT}
-VITE_APPWRITE_PROJECT_ID=${VITE_APPWRITE_PROJECT_ID}
+VITE_APPWRITE_ENDPOINT=${APPWRITE_SITE_API_ENDPOINT}
+VITE_APPWRITE_PROJECT_ID=${APPWRITE_SITE_PROJECT_ID}
 VITE_APPWRITE_DATABASE_ID=admin
 VITE_APPWRITE_COLLECTION_IDS='{"reviews":"reviews","invoices":"invoices","orders":"orders","products":"products","categories":"categories","customers":"customers"}'
diff --git a/react/react-admin/README.md b/react/react-admin/README.md
@@ -1,33 +1,121 @@
-# React-admin Demo With AppWrite
+# React-admin Demo With Appwrite
 
-This is a demo of the [AppWrite](https://appwrite.io/) adapter for [react-admin](https://github.com/marmelab/react-admin).
+This is a demo of the [Appwrite](https://appwrite.io/) adapter for [react-admin](https://github.com/marmelab/react-admin), a frontend framework for building B2B applications on top of REST/GraphQL APIs.
 
-To explore the source code, start with [src/App.tsx](https://github.com/marmelab/ra-appwrite/blob/main/packages/demo/src/App.tsx).
+## Features
 
-## Requirements
+- ⚡ A complete admin dashboard built with [React-admin](https://marmelab.com/react-admin/)
+- 💿 Backed by an [Appwrite](https://appwrite.io/) backend
+- ⚙️ Automatic database, collection, and user seeding
+- 🎨 Rich UI components from Material-UI
 
-To run this demo, you must have configured an **Appwrite project**. You can either use an existing project or create a new one.
+## Prerequisites
 
-This project comes with a script that will create the necessary **database**, **collections** and **users** for you. This script will be run against the Appwrite project you choose in the `.env.local` file.
+Before you begin, ensure you have the following installed:
+- Node.js (v18 or higher recommended)
+- npm or yarn
+- An Appwrite project
 
-## How to run
+## Quick Start
 
-Clone the `ra-appwrite` repository, then copy the `packages/demo/.env.local-example` file to `packages/demo/.env.local` and fill in the appwrite endpoint, project id and API key to use.
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/appwrite/templates-for-sites.git
+   cd react/react-admin
+   ```
 
-> To create an API key, go to your Appwrite console, navigate to your project, then "Overview". Scroll down to the "API Keys" section and create a new key with the `users` and `database` scopes.
+2. Install dependencies:
+   ```bash
+   npm install
+   # or
+   yarn install
+   ```
 
-Then run the following commands at the root of the repository:
+3. Configure environment variables:
+   - Create a `.env.local` file in the `react/react-admin` directory.
+   - Add the following environment variables to your `.env.local` file:
+   ```env
+   APPWRITE_SITE_API_ENDPOINT=https://cloud.appwrite.io/v1
+   APPWRITE_SITE_PROJECT_ID=your_project_id_here
+   APPWRITE_SITE_STANDARD_KEY=your_api_key_here
+   ```
+   > To create an API key, go to your Appwrite console, navigate to your project, then "API Keys". Create a new key with `users` and `databases` scopes.
 
-```sh
-# Install dependencies
-make install
+4. Seed the database:
+   This command will create the necessary database, collections, and a demo user (`john.doe@marmelab.com`, password: `changeme`).
+   ```bash
+   npm run db-seed
+   ```
 
-# Build the packages
-make build
+5. Start the development server:
+   ```bash
+   npm run start
+   # or
+   yarn start
+   ```
 
-# Create the database, collections and users
-make db-seed
+Your admin panel will be available at `http://localhost:8000`.
 
-# Start the demo app
-make run
+## Environment Variables
+
+The following environment variables are required:
+
+| Variable                   | Description                     | Example                        |
+| -------------------------- | ------------------------------- | ------------------------------ |
+| APPWRITE_SITE_API_ENDPOINT | Your Appwrite project endpoint. | `https://cloud.appwrite.io/v1` |
+| APPWRITE_SITE_PROJECT_ID   | Your Appwrite project ID.       | `60b8...`                      |
+| APPWRITE_SITE_STANDARD_KEY | Your Appwrite project API key.  | `a0b1...`                      |
+
+
+## Project Structure
+
+```
+react-admin/
+├── src/
+│   ├── App.tsx          # Main application component
+│   ├── dashboard/       # Dashboard components
+│   ├── products/        # Product management views
+│   ├── categories/      # Category management views
+│   ├── visitors/        # Customer management views
+│   ├── orders/          # Order management views
+│   ├── invoices/        # Invoice management views
+│   ├── reviews/         # Review management views
+│   ├── layout/          # App layout components
+│   ├── themes/          # Custom themes
+│   └── ...
+├── public/              # Public assets
+├── .env.local           # Environment variables (not in git)
+├── setup.ts             # Database seeding script
+├── package.json         # Project dependencies
+└── README.md            # Project documentation
 ```
+
+## Available Scripts
+
+- `npm run start` - Start development server at `http://localhost:8000`
+- `npm run serve` - Preview production build
+- `npm run build` - Build for production
+- `npm run lint` - Run ESLint
+- `npm run db-seed` - Seed the Appwrite database
+
+## Contributing
+
+Contributions are welcome! Please follow these steps:
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## License
+
+This project is licensed under the MIT License.
+
+## Acknowledgments
+
+- [React](https://reactjs.org/)
+- [Vite](https://vitejs.dev/)
+- [React-admin](https://marmelab.com/react-admin/)
+- [Appwrite](https://appwrite.io/)
+- [Material-UI](https://mui.com/)