naedri / app-hub-front

To display protected url of applications from your amazing company.

Frontend AppHub build in React with Ionic and TypeScript.

Description

"app-hub-front" is the front-end component of the App Hub project, built using React and Ionic. This repository serves as the user-facing interface for accessing to a curated list of applications. With a modern and responsive design, it provides a seamless experience for users to discover, select, and connect to various applications.

Tech Stack

React is a fully supported framework for building enterprise apps on the Ionic stack. Given the unique nature and constraints of mobile app development, there are some best practices to keep in mind as you build out your app that you can see at the following page : React Best Practices with Ionic.

You can find two tutorial videos to ramp up on this stack at the following links :

• Ionic5 + Firebase + React
• Learn to Build Mobile Apps With Ionic Framework, ReactJS and Capacitor

Getting Started

• Download the installer for Node LTS.
• Install the ionic CLI globally: npm install -g ionic
• Clone this repository with git clone.
• From the project root, run npm install.
• At the root level of the project, add a completed .env file from the .env.example file.
• In a terminal from the project root, run npm run start:dev.
• Profit. 🎉

Note: See How to Prevent Permissions Errors if you are running into issues when trying to install packages globally.

Deploying

Progressive Web App

1. Un-comment these lines
2. Run ionic build --prod
3. Push the www folder to your hosting service

Android

1. Run ionic cordova run android --prod

iOS

1. Run ionic cordova run ios --prod

To improve

Some parts of the code on which I have doubt may be improve :

• i18 translation service : maybe it should be available differently (directly to all the components and pass throught components producing prop drilling)
• some useEffect hook may be not be triggered the first time
• the header button is not always displayed properly
• state management with React Redux may be needed : doc

Translation

This app aims to support internationalization, thanks to i18next. A crash course is available on YouTube.

how to change the content of the translation ?

The following folder : public\locales contains the translation for each language you plan to support. If you add a new language, please update the following enumeration : src\utils\enums\languages.ts and add the associated translations.