Remote CNC webapp

🚧 Remote CNC webapp 🚀 Under construction... 🚧

---

About   |   Features   |   Technologies   |   Requirements   |   Starting   |   License   |   Authors

🎯 About

Dashboard to interface the remote-cnc API, to control an Arduino-based CNC machine.

✨ Features

✔️ Files, users and inventory management
✔️ Real time monitoring of CNC status
✔️ Manual control and calibration of CNC status
✔️ Tasks management and scheduling

🚀 Technologies

The following tools were used in this project:

• Next.js
• Typescript
• Flowbite
• Docker

✅ Requirements

Before starting 🏁, you need to have Node installed.

Alternatively, if you have Docker installed, you can build and run the application, both in development and production mode, without installing the project locally.

🏁 Getting Started

The first time you use the app, you must run:

$ npm install
# or
$ yarn install

Then, every time you want to run the development server:

$ npm run dev
# or
$ yarn dev

Open http://localhost:3000 with your browser to see the result.

With Docker

$ docker compose --profile=ui up

Initiate mocked camera stream

You can start a mocked version of the camera web server, which streams the test file /camera/video/mock.mp4 in a loop.

$ cp camera/.env.dist camera/.env
$ docker compose --profile=camera up

if you want both ui and camera:

$ docker compose --profile=ui-with-camera up

You can validate the camera web server works properly by visiting http://localhost:8081 in your web browser.

Initiate mocked API server

You can also start a mocked version of the API, created with Mockoon.

$ docker compose --profile=api up

if you want both ui and mock API:

$ docker compose --profile=ui-with-api up

🔧 Running tests

Unit tests

$ npm run test:unit

The coverage report is available in the folder /coverage/lcov-report.

E2E (end-to-end) tests

$ npm run test:e2e

The report is available in the folder /playwright-report, or by running the command npm run test:e2e:report.

NOTE: Before running the E2E tests, be sure to update the build output (npm run build).

Code style linter

In this project we use prettier for the formatting rules, and ESLint for code quality rules.

# Formatting
$ npm run format:fix
# Code quality
$ npm run lint:check

With Docker

Most commands can be run in the following way: docker exec -it remote-cnc-app {{command}}:

# Formatter
$ docker exec -it remote-cnc-app npm run format:fix
# Linter
$ docker exec -it remote-cnc-app npm run lint:check
# Unit tests
$ docker exec -it remote-cnc-app npm run test:unit
# Build output
$ docker exec -it remote-cnc-app npm run build

The great exception are E2E (end-to-end) tests, which can't be run from inside a container yet.

🏁 Deployment

You can export the app as a static site, and serve it from a static server:

$ npm run build
# or
$ yarn build

📝 License

This project is under license from MIT. For more details, see the LICENSE file.

✍️ Authors

Made with ❤️ by Leandro Bertoluzzi and Martín Sellart.

Back to top