FOAMS, a food ordering and automated management system, open source, and free to use.

Why?

I created it because the feast of the parish community of my city, needed a better way to organize its food orders.

The previous method was to use an Access mask that worked with the Access database, to manage orders locally. It wasn't bad, but it wasn't really complete, and it missed a lot of features, like:

• A way to manage the fact that a food can be sold out, if its ingredients are finished;
• A way to make possible for people in the queue, to order online (only if wanted), to speed up the queue;
• A better user interface and user experience, to let it be used even by elder people, working in the feast;

---

How?

To manage the first point I had to refactor the way foods were made by adding ingredients, and basing the displaying of foods, based on the availability of ingredients. To manage that, with keeping in mind concurrency problems, I used ACID transactions, using the Prisma.js ORM.

To manage the second point, I had to place the backend of the software online. To do that I had to create a CRUD REST API (made in Typescript). I choose a REST API because I didn't need flexibility on the API endpoints, as I am the designer of the backend, and the frontend.

Finally, to manage the third point I had to be as clear as possible in the usage of the app, handling all kinds of errors, and creating a good UI/UX experience.
The help me with validation and errors on the backend I used Zod (really useful even for type inference), and the default error-manager-middleware that Express.js has.
Instead, for UI/UX I used bootstrap (using React-Bootstrap) because of its clear and minimal UI.

---

How to use it? (locally [exept for the database])

I want to be clear that the platforms I will use, can be changed with whatever platform you want. I used them just because of their plan prices.

____________________________

Initial set-up:

To use the application you need to have Node.js installed. Download it from here if you don't have it.

To setup the database, you firstly need to go inside the `backend` folder, and only after that, run the CLI command `npm install`.

____________________________

Setting up the database:

You can use any db you want, hosted everywere you want, as long as you follow the really simple process, of setting up a db using Prisma. (See here)

As a databse I used Planetscale because it's pretty performant, and its free db plan it's really good.
You have to create an account, and then create a database following the guide (choose a region that it's as near as possible to your country).

Now that you have a new database, click on the connect button (in the `overview` section), and choose `prisma` in the `connect with` section.
You will see the connection URL, that you have to copy (with the Username and Password of the database written inside it), and paste inside the `.env` (you have to create it first) file, inside the `backend` folder, written this way:

`DATABASE_URL='mysql://*************:************@eu-central.connect.psdb.cloud/san-lorenzo-db?sslaccept=strict'`

When you did that and saved the file, run the following CLI comand `npx prisma db push`, to change the schema of the database on Planetscale.

____________________________

Setting up authentication & the backend:

In the same `.env` file you wrote the URL to connect to the Planetscale database, (inside the `backend` folder), you have to set four more environment variables:

• ADMIN_USERNAME='UsernameYouWantToUse'
• ADMIN_PASSWORD='PasswordYouWantToUse'
• JWT_SECRET='JWTSecretYouWantToUse'
• PORT='8080'

USERNAME and PASSWORD are used as credientials, to log inside the administrative part of the application.
JWT_SECRET is a string (raccomanded between 30 and 50 characters).
PORT has to remain 8080 (the port where the backend will be hosted to).

Now that everithing is set and saved, if you run the command `tsc` and if no error arised, run this command `npm start`, the console should print: `Listening on port: 8080`, and it means that the server works correctly.

____________________________

Setting up the frontend:

Go inside the `frontend-admin` folder, and create a `.env`. Inside of it you have to create an environment variable:

• VITE_BACKEND_URL=http://localhost:8080

This environment variable is used to let the frontend know, where the backend is located. In this case, the backend is set locally (that's why localhost), and on PORT 8080.

After you did that and saved, inside the `frontend-admin` folder, you should run the command `npm run dev`.
If everything goes ok, the console will show you a link, where you can locally see your frontend up and running. Copy it into a web browser, or Control+Click it to see the frontend.

How to use it? (remotely)

Initial setup:

To use the platforms I use to host the backend and the frontend, you have to create a Github account, and fork my repository into your account, or if it doesn't work, create a repository, and clone my repository inside of it.

____________________________

Using cloud platforms:

To host the backend I used Railway, because it's easy to use and the developer plan is fantastic.

Simply connect with the github account you previously created, and select the fork/repository you created, that you want to host.
CONFIGURATIONS: you have to set up the environment variables, as explained in the section `How to use it? (locally)`, using the environment variables section; you have to configure the directory (you have to choose the backend directory); and you have to configure the build command (simply configure it as `tsc`).

To host the frontend I used Vercel, because it's easy to use and it's pretty performant (the free plan it's really good).
CONFIGURATIONS: you have to set up the environment variable, as explained in the section `How to use it? (locally)`, using the environment variables section.