https://github.com/kostastepetes/submito
📝 Submito is a web app designed to manage form submissions. It provides users with the ability to generate unique endpoints for form submissions, apply the endpoint as the action attribute in any HTML Form tag and then view the submissions in a dashboard. Made with Vue.js, Pinia, Express.js and PostgreSQL.
https://github.com/kostastepetes/submito
form-data form-submission lead-capture
Last synced: 4 months ago
JSON representation
📝 Submito is a web app designed to manage form submissions. It provides users with the ability to generate unique endpoints for form submissions, apply the endpoint as the action attribute in any HTML Form tag and then view the submissions in a dashboard. Made with Vue.js, Pinia, Express.js and PostgreSQL.
- Host: GitHub
- URL: https://github.com/kostastepetes/submito
- Owner: kostastepetes
- License: mit
- Created: 2024-10-24T13:51:58.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-02-23T08:15:09.000Z (4 months ago)
- Last Synced: 2025-02-23T09:22:10.855Z (4 months ago)
- Topics: form-data, form-submission, lead-capture
- Language: Vue
- Homepage:
- Size: 84 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Submito Project
## Overview
Submito is a web application designed to manage form submissions efficiently. It provides users with the ability to generate unique endpoints for form submissions, view recent submissions, and test demo forms. The project utilizes Vue.js for the frontend, Pinia for state management, and TypeScript for type safety.
## Project Structure
```
submito-app/
├── src/
│ ├── stores/
│ │ ├── auth.ts
│ │ └── submissions.ts
│ ├── views/
│ │ ├── Dashboard.vue
│ │ └── Login.vue
│ ├── components/
│ │ └── SubmissionTable.vue
│ ├── App.vue
│ └── main.ts
├── public/
└── package.json
```
## Features
1. **Endpoint Generation**: Users can generate unique endpoints for form submissions.
2. **Submission Management**: View recent form submissions in a table format.
3. **Demo Form Testing**: Test form submissions using a demo form interface.
4. **Authentication**: User authentication system for secure access.
5. **TypeScript Support**: Enhanced type checking for improved code quality.
6. **Responsive Design**: Mobile-friendly UI using Tailwind CSS.
## Setup Instructions
1. Clone the repository:
```
git clone https://github.com/kostastepetes/submito.git
cd submito-app
```
2. Install dependencies:
```
npm install
```
3. Start the development server:
```
npm run serve
```
4. Build for production:
```
npm run build
```
## Development Environment
- Node.js version: 16.x or later
- npm version: 8.x or later
- Vue CLI version: 5.x or later
## Technologies Used
- Frontend: Vue.js 3, TypeScript
- State Management: Pinia
- Styling: Tailwind CSS
- HTTP Client: Axios
- Authentication: JWT-based authentication
## API Documentation
The project interacts with a backend API located at `http://localhost:3000/api`. The following endpoints are used:
1. `/endpoints`: Generate new endpoint
- Method: POST
- Headers: Authorization Bearer token required
2. `/submissions`: Fetch recent submissions
- Method: GET
- Headers: Authorization Bearer token required
3. `/submit/{endpoint}`: Submit form data
- Method: POST
- Body: FormData
## Contributing
Contributions are welcome! Please submit pull requests with clear descriptions of changes made.
## License
This project is licensed under the MIT License - see the LICENSE file for details.
## Acknowledgments
- Vue.js team for creating an excellent frontend framework
- Pinia team for providing a lightweight state management solution
- Tailwind CSS team for their utility-first CSS framework
## Known Issues
- [List any known issues here]
## Future Development
- Implement real-time submission updates
- Add filtering and sorting capabilities to the submissions table
- Enhance security features, including CSRF protection
- Implement dark mode toggle
By following this README, you should be able to set up and run the Submito project locally. Remember to configure your backend API accordingly to match the frontend expectations.