nmsud/form

📜 Custom form app for collecting data for Unification Days

NMSUD Form

Makes submitting your builds for Unification Days easier.

📦 Projects in this repo

Website

This is the website that contains the forms that users will see. It allows for user inputs, with validation and knows how to package all the information to be sent to the API.

API

This is able to accept requests, prevent spam, unpack and verify the contents and ultimately securely store the information in a database.

Data generator

This script is able to pull all the uploaded images and the records out of the database. Then the script manipulates and writes the data to json files to be consumed by websites, apps, etc later.

🏃‍♂️ Running the project

Requirements

• Node.js version 18 or higher.
• Terminal for running npm scripts.
• VSCode is recommended.

Steps

1. Clone this repository.
2. Copy and rename the env.dart.template file to env.dart.
3. In the directory where the package.json file is, run npm i to install all the required packages.
4. Run npm run setup to run the initial setup.
5. Run the app
   • Web can be run locally using npm run start:web.
   • API can be run locally using npm run start:api.
   • Data can be run locally using npm run start:data.

🧪 Running the tests

This project uses vitest for unit tests. The tests in this project are mostly testing the validation functions used on both the website and API projects. Hoping to add more tests in the future!

To run the tests, use the command npm run test.

🎨 Storybook

This project has Storybook set up. This is mostly for visual testing and is suitable for components such as the reusable form components in src/components/form.

To run storybook use the command npm run storybook:dev.
Then open localhost:3003

👪 Contributing

Please take a look at the Contribution Guideline before creating an issue or pull request.

📄 Documentation

We have a documentation website, here you can find information on how to run the project on your machine, how the project was setup, how to add new forms, how to run unit tests and more.

🔗 Links

form's Issues

A component for people to report bugs

Deploy Storybook to GH pages

Why? Why not?

Setup changelog process

Image manipulation

https://github.com/lovell/sharp

Swagger docs

Add server validation of max file size

Setup documentation workflow

https://github.com/documentationjs/documentation

Create basic data script

Script to download images and data as well as manipulate the data into a sort of query-able API

Create documentation around creating a form page

Trigger FormData githubAction on approving a submission

Create verify page

To let the NMSUD organiser that clicked the link, know that everything succeeded

Deploy code coverage results

Submission status page

After submitting a form, it would be nice to have a way to view the status of the request.