From 06638e6e3937cf068586cab60204b1a4fdafac9c Mon Sep 17 00:00:00 2001 From: Nishant Jain <89480234+Nishantjain10@users.noreply.github.com> Date: Fri, 20 Jun 2025 08:32:40 +0000 Subject: [PATCH 1/8] fix: correct position field attributes, add env config, and update readme file --- react/formspree/.env.example | 11 ++++ react/formspree/.gitignore | 4 ++ react/formspree/README.md | 106 ++++++++++++++++++++++++++++++++--- react/formspree/src/App.jsx | 8 +-- 4 files changed, 118 insertions(+), 11 deletions(-) create mode 100644 react/formspree/.env.example diff --git a/react/formspree/.env.example b/react/formspree/.env.example new file mode 100644 index 0000000..62ecaa0 --- /dev/null +++ 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 \ No newline at end of file diff --git a/react/formspree/.gitignore b/react/formspree/.gitignore index 3c390ac..7dc0276 100644 --- a/react/formspree/.gitignore +++ b/react/formspree/.gitignore @@ -22,3 +22,7 @@ dist-ssr *.njsproj *.sln *.sw? + +.env +.env.local +.env.*.local \ No newline at end of file diff --git a/react/formspree/README.md b/react/formspree/README.md index 7059a96..906fd7e 100644 --- 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 index 43f24c8..96ae0fc 100644 --- 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() {
-