init

client/src/app/about/page.tsx

@@ -0,0 +1,19 @@
+import { Stack, Typography } from '@mui/material';
+import { NextPage } from 'next';
+
+/**
+ * Renders About Application page
+ * @page About
+ */
+const AboutPage: NextPage = () => {
+  return (
+    <Stack spacing={2} padding={2}>
+      <Stack>
+        <Typography variant="h3">About application</Typography>
+        <Typography variant="body1">Balinyaar is a Next.js (App Router) application built with Material UI.</Typography>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default AboutPage;

client/src/app/auth/login/LoginForm.tsx

@@ -0,0 +1,42 @@
+'use client';
+import { Stack } from '@mui/material';
+import { useRouter } from 'next/navigation';
+import { AppButton } from '@/components';
+import { useAppStore } from '@/store';
+import { useEventLogout } from '@/hooks';
+import { sessionStorageSet } from '@/utils';
+
+/**
+ * Renders login form for user to authenticate
+ * @component LoginForm
+ */
+const LoginForm = () => {
+  const router = useRouter();
+  const [, dispatch] = useAppStore();
+  const onLogout = useEventLogout();
+
+  const onLogin = () => {
+    // TODO: AUTH: Sample of access token store, replace next line in real application
+    sessionStorageSet('access_token', 'TODO:_save-real-access-token-here');
+
+    dispatch({ type: 'LOG_IN' });
+    router.replace('/'); // Redirect to home page without ability to go back
+  };
+
+  return (
+    <Stack alignItems="center" spacing={2} padding={2}>
+      <Stack>Put form controls or add social login buttons here...</Stack>
+
+      <Stack direction="row">
+        <AppButton color="success" onClick={onLogin}>
+          Emulate User Login
+        </AppButton>
+        <AppButton color="warning" onClick={onLogout}>
+          Logout User
+        </AppButton>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default LoginForm;

client/src/app/auth/login/page.tsx

@@ -0,0 +1,21 @@
+import { Metadata, NextPage } from 'next';
+import LoginForm from './LoginForm';
+
+/**
+ * User Login page
+ * @page Login
+ */
+const LoginPage: NextPage = () => {
+  return (
+    <>
+      <LoginForm />
+    </>
+  );
+};
+
+export const metadata: Metadata = {
+  title: 'Login - Balinyaar',
+  description: 'Balinyaar web application',
+};
+
+export default LoginPage;

client/src/app/auth/page.tsx

@@ -0,0 +1,13 @@
+import { redirect } from 'next/navigation';
+
+/**
+ * Redirects to default Auth page
+ * @page Auth
+ * @redirect /auth
+ */
+const AuthPage = () => {
+  redirect('/auth/login');
+  // return <div>Auth Page</div>;
+};
+
+export default AuthPage;

client/src/app/auth/signup/page.tsx

@@ -0,0 +1,9 @@
+import { Metadata } from 'next';
+import LoginPage from '../login/page';
+
+export const metadata: Metadata = {
+  title: 'Signup - Balinyaar',
+  description: 'Balinyaar web application',
+};
+
+export default LoginPage; // Reuses the Login page for now

client/src/app/globals.css

@@ -0,0 +1,18 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+  /* required for sticky elements: HeaderMobile, and so on */
+  max-height: 100vh;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

client/src/app/home/page.tsx

@@ -0,0 +1,24 @@
+import { Metadata, NextPage } from 'next';
+import { Stack, Typography } from '@mui/material';
+
+export const metadata: Metadata = {
+  title: 'Balinyaar',
+  description: 'Balinyaar web application',
+};
+
+/**
+ * Main page of the Application
+ * @page Home
+ */
+const Home: NextPage = () => {
+  return (
+    <Stack spacing={2} padding={2}>
+      <Stack>
+        <Typography variant="h3">Welcome to Balinyaar</Typography>
+        <Typography variant="body1">This is the home page of the application.</Typography>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default Home;

client/src/app/layout.tsx

@@ -0,0 +1,35 @@
+import { FunctionComponent, PropsWithChildren } from 'react';
+import { Metadata, Viewport } from 'next';
+import { SimplePaletteColorOptions } from '@mui/material';
+import { AppStoreProvider } from '@/store';
+import defaultTheme, { ThemeProvider } from '@/theme';
+import CurrentLayout from '@/layout';
+import './globals.css';
+
+const THEME_COLOR = (defaultTheme.palette?.primary as SimplePaletteColorOptions)?.main || '#FFFFFF';
+
+export const viewport: Viewport = {
+  themeColor: THEME_COLOR,
+};
+
+export const metadata: Metadata = {
+  title: 'Balinyaar',
+  description: 'Balinyaar web application',
+  manifest: '/site.webmanifest',
+};
+
+const RootLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
+  return (
+    <html lang="en">
+      <body>
+        <AppStoreProvider>
+          <ThemeProvider>
+            <CurrentLayout>{children}</CurrentLayout>
+          </ThemeProvider>
+        </AppStoreProvider>
+      </body>
+    </html>
+  );
+};
+
+export default RootLayout;

client/src/app/me/page.tsx

@@ -0,0 +1,18 @@
+import { Stack } from '@mui/material';
+import { NextPage } from 'next';
+import { AppAlert, UserInfo } from '../../components';
+
+/**
+ * Renders User Profile Page
+ * @page Me
+ */
+const MeAkaProfilePage: NextPage = () => {
+  return (
+    <Stack spacing={2} padding={2}>
+      <AppAlert severity="warning">This page is under construction</AppAlert>
+      <UserInfo showAvatar />
+    </Stack>
+  );
+};
+
+export default MeAkaProfilePage;

client/src/app/page.tsx

@@ -0,0 +1,3 @@
+import HomePage from './home/page';
+
+export default HomePage;