https://github.com/binghuan/leopardapplicant
A simple web form for internal use.
https://github.com/binghuan/leopardapplicant
firebase reactjs webapp
Last synced: about 2 months ago
JSON representation
A simple web form for internal use.
- Host: GitHub
- URL: https://github.com/binghuan/leopardapplicant
- Owner: binghuan
- Created: 2016-06-01T09:02:03.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2025-07-31T15:12:29.000Z (11 months ago)
- Last Synced: 2025-07-31T18:57:34.035Z (11 months ago)
- Topics: firebase, reactjs, webapp
- Language: JavaScript
- Homepage: https://leopardapplicant.firebaseapp.com/
- Size: 3.23 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Leopard Applicant
A React-based web application that generates email application forms with a user-friendly interface.
**๐ Live Demo:** [https://leopardapplicant.firebaseapp.com/](https://leopardapplicant.firebaseapp.com/)
## ๐ Overview
Leopard Applicant is a simple yet effective web form that helps users compose structured application emails. The application collects user information through a Material-UI form and generates a properly formatted `mailto` link for easy email submission.
## โจ Features
- **User-friendly Form Interface**: Built with Material-UI components for a clean, professional look
- **Automatic Email Generation**: Creates properly formatted `mailto` links with structured content
- **Local Storage**: Automatically saves form data to prevent data loss
- **Responsive Design**: Works across different screen sizes
- **Bilingual Support**: Form labels in both English and Chinese/Traditional Chinese
## ๐ Form Fields
The application collects the following information:
- **ๆถไปถไบบ (Mail To)**: Recipient email address
- **็ณ่ซไบบๅงๅ (Applicant Name)**: Name of the person making the application
- **ไฟกไปถไธปๆจ (Subject)**: Email subject line
- **้จ้ (Department)**: Department or organization
- **้ปๅญไฟก็ฎฑๅฐๅ (Email Address)**: Applicant's email address
- **ๅพฎไฟกWeChatๅธณ่ (WeChat ID)**: WeChat account ID
- **็ณ่ซ็ทฃ็ฑ (Reason for Application)**: Description or reason for the application
## ๐ Getting Started
### Prerequisites
- Node.js (version 14 or higher)
- npm or yarn package manager
### Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/leopardapplicant.git
cd leopardapplicant
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm start
```
4. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
## ๐ ๏ธ Available Scripts
- `npm start` - Runs the app in development mode
- `npm test` - Launches the test runner
- `npm run build` - Builds the app for production
- `npm run eject` - Ejects from Create React App (one-way operation)
## ๐๏ธ Built With
- **React** (16.2.0) - JavaScript library for building user interfaces
- **Material-UI** (0.20.0) - React components implementing Google's Material Design
- **jQuery** (3.3.1) - JavaScript library for DOM manipulation
- **Create React App** - Bootstrapped with Create React App for easy setup
## ๐ฑ Deployment
This application is deployed on Firebase Hosting and can be accessed at:
[https://leopardapplicant.firebaseapp.com/](https://leopardapplicant.firebaseapp.com/)
To deploy your own version:
1. Build the production version:
```bash
npm run build
```
2. Deploy to Firebase (requires Firebase CLI setup):
```bash
firebase deploy
```
## ๐ฏ How It Works
1. **Fill the Form**: Users enter their information in the provided fields
2. **Auto-save**: Form data is automatically saved to browser's local storage
3. **Generate Email**: The app creates a structured email body with all the provided information
4. **Send**: Click the "SEND" button to open the default email client with the pre-filled email
## ๐ Project Structure
```
leopardapplicant/
โโโ public/
โ โโโ icons/ # App icons in various sizes
โ โโโ index.html # HTML template
โ โโโ manifest.json # PWA manifest
โโโ src/
โ โโโ App.js # Main application component
โ โโโ App.css # Application styles
โ โโโ index.js # Entry point
โ โโโ ...
โโโ pictures/
โ โโโ illustration.png # App illustration
โโโ package.json # Dependencies and scripts
โโโ README.md # This file
```
---
## Illustration
