Update requirement files with new feature templates and fix backend API error message, along with mobile project config updates and documentation improvements

03_source/mobile/src/pages/DemoFacebookClone/components/Post.tsx

@@ -21,7 +21,19 @@ import {
 import '../pages/Tab2.css';
 import React from 'react';
 
-const Post = (props): React.JSX.Element => {
+interface PostProps {
+  post: {
+    avatar: string;
+    name: string;
+    time: string;
+    sponsored?: boolean;
+    message: string;
+    image?: string;
+    views?: string;
+  };
+}
+
+const Post: React.FC<PostProps> = (props) => {
   const { post } = props;
 
   return (

03_source/mobile/src/pages/DemoFacebookClone/components/Tabs.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
 import { IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs, IonRouterOutlet } from '@ionic/react';
 import { Redirect, Route } from 'react-router-dom';
 import Tab1 from '../pages/Tab1';
@@ -6,13 +7,15 @@ import Tab2 from '../pages/Tab2';
 import Tab3 from '../pages/Tab3';
 import { chatboxOutline, cogOutline, personOutline } from 'ionicons/icons';
 
-const Tabs = (props): React.JSX.Element => {
+interface TabsProps {}
+
+const Tabs: React.FC<TabsProps> = () => {
   return (
     <IonTabs>
       <IonRouterOutlet>
-        <Route exact path="/tabs/tab1" render={(props) => <Tab1 {...props} />} />
-        <Route exact path="/tabs/tab2" render={(props) => <Tab2 {...props} />} />
-        <Route exact path="/tabs/tab3" render={(props) => <Tab3 {...props} />} />
+        <Route exact path="/tabs/tab1" component={Tab1} />
+        <Route exact path="/tabs/tab2" component={Tab2} />
+        <Route exact path="/tabs/tab3" component={Tab3} />
       </IonRouterOutlet>
 
       <IonTabBar slot="bottom">