EasyForms_NET.vb

Google Forms Clone

This project is a simple clone of Google Forms that allows users to create and view submissions. It demonstrates the use of a backend server to handle data and a frontend application to interact with users. The backend is built with Node.js and Express, while the frontend is built using Visual Basic in Visual Studio.

Table of Contents

• Introduction
• Architecture
• Project Structure
• Installation
• Backend Setup
• Frontend Setup
• Running the Project
• API Endpoints
• Usage
• Contributing
• License
• Preview

Introduction

Purpose

The purpose of this project is to provide a simple form submission system where users can create new submissions and view existing ones. It serves as an example of integrating a frontend application with a backend server.

Features

• Create new form submissions with user details and a stopwatch time.
• View existing submissions, navigate through them using next and previous buttons.
• Data persistence using a JSON file as the database.

Architecture

Backend

• Node.js and Express are used to create a simple REST API.
• fs module is used to read and write data to a JSON file (db.json).

Frontend

• Visual Basic in Visual Studio is used to create the frontend application.
• The frontend application consists of two main forms: CreateSubmissionForm and ViewSubmissionsForm.

Project Structure

google-forms-clone/
│
├── Slidely/
│ ├── dist/
│ │ ├── server.js
│ ├── src/
│ │ ├── db.json
│ │ ├── server.ts
│ ├── node_modules/
│ ├── package.json
│ ├── tsconfig.json
│ └── README.md
│ └── VisualStudioProject/
├── CreateSubmissionForm.vb
├── ViewSubmissionsForm.vb
├── Program.vb
└── VisualStudioProject.sln

• Slidely: Contains the backend code.

  • dist: Compiled JavaScript files.
  • src: Source TypeScript files and database JSON file.
  • node_modules: Node.js dependencies.
  • package.json: Node.js project configuration.
  • tsconfig.json: TypeScript configuration.

• VisualStudioProject: Contains the frontend code.

  • CreateSubmissionForm.vb: Form to create a new submission.
  • ViewSubmissionsForm.vb: Form to view existing submissions.
  • Program.vb: Main program file.
  • VisualStudioProject.sln: Visual Studio solution file.

Installation

Prerequisites

• Node.js
• npm
• Visual Studio with .NET support

Backend Setup

1. Clone the repository:

   git clone https://github.com/yourusername/google-forms-clone.git
   cd google-forms-clone/Slidely

2. Install the necessary dependencies:

   npm install

3. Compile the TypeScript files:

   tsc

Frontend Setup

1. Open the VisualStudioProject solution in Visual Studio.

2. Ensure that all necessary NuGet packages are installed. You might need to restore NuGet packages if they are missing.

Running the Project

Starting the Backend Server

1. Navigate to the Slidely directory:

   cd google-forms-clone/Slidely

2. Start the server:

   node dist/server.js

   You should see the message:

   Server is running on http://localhost:3000
   

Running the Frontend

1. Open the solution in Visual Studio.

2. Set the startup form to CreateSubmissionForm or ViewSubmissionsForm as needed.

3. Run the project by pressing F5 or clicking on the Start button in Visual Studio.

API Endpoints

POST /submit

• Description: Submits a new form entry.
• Request Body:

  {
    "name": "John Doe",
    "email": "[email protected]",
    "phone": "1234567890",
    "github_link": "https://github.com/johndoe",
    "stopwatch_time": "00:05:00"
  }

• Response:

  {
    "success": true
  }

GET /read

• Description: Fetches a form entry by its index.
• Query Parameters:
  • index: The index of the submission to fetch.
• Response:

  {
    "submission": {
      "name": "John Doe",
      "email": "[email protected]",
      "phone": "1234567890",
      "githubLink": "https://github.com/johndoe",
      "stopwatchTime": "00:05:00"
    }
  }

Usage

Creating a Submission

1. Open the CreateSubmissionForm in Visual Studio.
2. Enter the necessary details such as Name, Email, Phone, GitHub Link, and start the Stopwatch.
3. Click on the Submit button to save the submission.
   • The form data is sent to the backend server via a POST request to /submit.
   • If the submission is successful, a confirmation message is displayed.

Viewing Submissions

1. Open the ViewSubmissionsForm in Visual Studio.
2. Click on Next or Previous buttons to navigate through the submissions.
   • The form fetches data from the backend server via a GET request to /read with the current index as a query parameter.
   • The submission details are displayed in the form fields.

Contributing

Contributions are welcome! Please fork the repository and create a pull request with your changes. Ensure that your code adheres to the coding standards and includes appropriate tests.

1. Fork the repository.
2. Create a new branch for your feature.
3. Commit your changes to the branch.
4. Create a pull request with a detailed description of your changes.

Preview

Home Page

View Submission

Create Submission

License

This project is licensed under the MIT License. See the LICENSE file for more information.