Fonoster — Web UI

Web UI to create powerful voice applications with Fonoster's API

Technical details

Environment	Deployed version	Link
Development	v0.2.15	Go to
Staging	v0.2.15	N/A
Production	v0.0.0	N/A

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Technologies stack

Tool	Description
Next.js	Development platform. Framework for server-side apps using React
Docker	Infrastructure provisioning
TypeScript	Programing language. Types reduce bugs & increases reliability
Bash scripts	Used for development management
EsLint & Prettier	Code style enforcer

Starting app in development mode

npm run dev

# or

yarn dev

Considerations, restrictions and values

The components within each layer are cohesive.
Restricts validation rejects and disinfects malicious input.
Don't disable ESLint or Prettier rules.
Follow the architectural styles and patterns of the project.
Follow the merge template correctly.
The sensitive information of the project must be in environment variables.
Evaluate the use of dependencies. (Build or install)
Please install the VScode recommendations to improve your code style.

Bugs and Feedback

For bugs, questions, and discussions, please use the Github Issues

Authors

License

With this approach the image is self-contained, the final size is reduced, and the runner (used to deploy) has a lower attack factor, as it has less available packages.

This approach also improves the use of docker cache, and makes the build time faster.

BREAKING CHANGE: this approach uses Yarn instead of NPM for improved package security and better conflict handling.

Notes:

As some serverless and cloud providers require a dynamic port, the use of an environment variable ${PORT} was added.
APP_ENV and NODE_ENV were added as arguments to be passed at build time, for different development and deploy behaviors and optimizations, defaulting to production as the common use case.
Use nextjs:nodejs user:group as a recommendation by Vercel. And this should not have an impact in fonoster permissions as this frontend is decoupled.
Disable anonymous telemetry by default
Use a standard Healthcheck with check requests in less than 5s, and if not then confirm 3 more times. We don't want to realize the server is down 5 minutes after.

React features to enhance using Rollbar.js in React Applications

Rollbar React SDK React features to enhance using Rollbar.js in React Applications. This SDK provides a wrapper around the base Rollbar.js SDK in orde

Jan 3, 2023

React-Mini-Projects - Simple React mini-applications

React Mini Projects A Fully Responsive React Application contain these mini apps : Todo App Movie App Budget App Flash Card App Factor App This app wa

Jan 1, 2022

a more intuitive way of defining private, public and common routes for react applications using react-router-dom v6

auth-react-router is a wrapper over react-router-dom v6 that provides a simple API for configuring public, private and common routes (React suspense r

Dec 3, 2022

Shows how React components and Redux to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications

This simple shopping cart prototype shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications.

Feb 1, 2022

Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

Jan 8, 2023

refactor(docker): use multistage and remove fonoster/base dependency
With this approach the image is self-contained, the final size is reduced, and the runner (used to deploy) has a lower attack factor, as it has less available packages.

This approach also improves the use of docker cache, and makes the build time faster.

BREAKING CHANGE: this approach uses Yarn instead of NPM for improved package security and better conflict handling.

Notes:

As some serverless and cloud providers require a dynamic port, the use of an environment variable ${PORT} was added.

APP_ENV and NODE_ENV were added as arguments to be passed at build time, for different development and deploy behaviors and optimizations, defaulting to production as the common use case.

Use nextjs:nodejs user:group as a recommendation by Vercel. And this should not have an impact in fonoster permissions as this frontend is decoupled.

Disable anonymous telemetry by default

Use a standard Healthcheck with check requests in less than 5s, and if not then confirm 3 more times. We don't want to realize the server is down 5 minutes after.
opened by gustavovalverde 3

Web UI to create powerful voice applications with Fonoster's API.

Related tags

Overview

Fonoster — Web UI

Technical details

Getting Started

Technologies stack

Starting app in development mode

Considerations, restrictions and values

Bugs and Feedback

Authors

License

You might also like...

React features to enhance using Rollbar.js in React Applications

React-Mini-Projects - Simple React mini-applications

a more intuitive way of defining private, public and common routes for react applications using react-router-dom v6

Shows how React components and Redux to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications

Bugsnag integration for Ember applications.

React components and hooks for creating VR/AR applications with @react-three/fiber

Gnome Shell extension to provide a flexible applications dock (WIP).

Create posts for ubccsss.org using the GitHub REST API

Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Comments

refactor(docker): use multistage and remove fonoster/base dependency

Owner

Fonoster

This is an online dialog with realtime chat, voice and face to face.

✨ Create server-rendered universal JavaScript applications with no configuration

An application that has a frontend (user interface) that allows you to create, read, update or delete (CRUD) products using an API in which you can also create, read, update or delete products.

A react component helps bring Figma's Cursor Chat to your web applications in less than 3 minutes, making real-time collaboration anywhere

Tiny and powerful state management library.

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

⚡️ Simple, Modular & Accessible UI Components for your React Applications

A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.