Overall structure

ROQ One Frontend is placed in the /frontend folder of the mono-repository, which can be found on Github: roqtech/roq-one. In this directory you will see several sub-directories and files:

Directory

Content

frontend/

Root directory of ROQ One Frontend. The files are explained below.

frontend/patches

Patch to fix Apple authorization missing firstName and lastName

πŸ“– Pull Request #4579 Β· nextauthjs/next-auth

frontend/public

Directory for public files like logos and the favicon.

πŸ“– Static File Serving | Next.js

frontend/public/locales

This directory contains JSON files with all translation-keys and values. The data is fetched from ROQ Platform, see Translations

frontend/routes

All routes of ROQ One can be localized. In this directory you find all routes and their translations.

frontend/scripts

Includes a workaround to forward environment variables

frontend/src

Source directory of your application. All directories are explained below.

frontend/types

Set of global types

Root directory frontend/

Directory

Content

.editorconfig

This file makes your IDE compatible with the applied coding guidelines. The EditorConfig is compatible with most IDEs like WebStorm and VS Code.

πŸ“– EditorConfig

.eslintignore

Configuration file for ESLint that defines which files to ignore.

πŸ“– Ignoring Code - ESLint

.eslintrc.js

Configuring ESLint rules.

πŸ“– Configuring ESLint

.gitignore

Defines which files won’t be commited to the repository

πŸ“– gitignore Documentation

.nvmrc

Setting node.js version for nvm. Nvm is the package which allows to switch between node versions without new installation of node.

πŸ“– nvm-sh/nvm

.prettierrc

Config of rules of prettier. Prettier is a utility that automatically formats your code.

πŸ“– Configuration File Β· Prettier

Dockerfile

Installation of ROQ One Backend via docker, see Local installation guide

πŸ“– Dockerfile reference

jest.config.js

Configuration file of Jest which is used for the e2e tests.

πŸ“– Configuring Jest

local-ssl-server.js

Required by Apple SSO

local_reverse_proxy.conf

Needed for the docker-compose.yml setup. It's renaming the hostname in client code.

newrelic.js

Configuration for New Relic

πŸ“– Install the Node.js agent

next.config.js

Custom advanced configuration of Next.js

πŸ“– next.config.js: Introduction

next-i18next.config.js

Configuration for next-i18next which is a library for translation management.

πŸ“– GitHub - i18next/next-i18next

package.json

List of dependencies which are installed when you run npm i

πŸ“– package.json | npm Docs

package-lock.json

Calculated file that describes which versions of what dependency will be installed.

πŸ“– package-lock.json | npm Docs

setupTests.js

Used for configuration of tests

tsconfig.build.json

tsconfig.json

These files contain options of the TypeScript compiler

πŸ“– Documentation - What is a tsconfig.json

Source directory frontend/src

In the frontend/src directory you can find the React components, pages, views and CSS. More information and details on this concept can be found here: React component architecture