vv

backend/src/db/db.config.js

@@ -1,5 +1,3 @@
-
-
 module.exports = {
   production: {
     dialect: 'postgres',
@@ -12,11 +10,12 @@ module.exports = {
     seederStorage: 'sequelize',
   },
   development: {
-    username: 'postgres',
     dialect: 'postgres',
-    password: '',
-    database: 'db_mobile_commerce_store',
+    username: process.env.DB_USER || 'postgres',
+    password: process.env.DB_PASS || '',
+    database: process.env.DB_NAME || 'db_mobile_commerce_store',
     host: process.env.DB_HOST || 'localhost',
+    port: process.env.DB_PORT || 5432,
     logging: console.log,
     seederStorage: 'sequelize',
   },

backend/src/db/migrations/1770657891319.js

@@ -0,0 +1,48 @@
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    const [roles] = await queryInterface.sequelize.query(
+      `SELECT id FROM "roles" WHERE name = 'Public' LIMIT 1;`
+    );
+    const [readProductsPerm] = await queryInterface.sequelize.query(
+      `SELECT id FROM "permissions" WHERE name = 'READ_PRODUCTS' LIMIT 1;`
+    );
+    const [readCategoriesPerm] = await queryInterface.sequelize.query(
+      `SELECT id FROM "permissions" WHERE name = 'READ_CATEGORIES' LIMIT 1;`
+    );
+
+    if (roles.length && readProductsPerm.length) {
+      const [existing] = await queryInterface.sequelize.query(
+        `SELECT * FROM "rolesPermissionsPermissions" WHERE "roles_permissionsId" = '${roles[0].id}' AND "permissionId" = '${readProductsPerm[0].id}';`
+      );
+      if (!existing.length) {
+        await queryInterface.bulkInsert('rolesPermissionsPermissions', [
+          {
+            createdAt: new Date(),
+            updatedAt: new Date(),
+            roles_permissionsId: roles[0].id,
+            permissionId: readProductsPerm[0].id,
+          },
+        ]);
+      }
+    }
+
+    if (roles.length && readCategoriesPerm.length) {
+      const [existing] = await queryInterface.sequelize.query(
+        `SELECT * FROM "rolesPermissionsPermissions" WHERE "roles_permissionsId" = '${roles[0].id}' AND "permissionId" = '${readCategoriesPerm[0].id}';`
+      );
+      if (!existing.length) {
+        await queryInterface.bulkInsert('rolesPermissionsPermissions', [
+          {
+            createdAt: new Date(),
+            updatedAt: new Date(),
+            roles_permissionsId: roles[0].id,
+            permissionId: readCategoriesPerm[0].id,
+          },
+        ]);
+      }
+    }
+  },
+
+  async down(queryInterface, Sequelize) {
+  }
+};

backend/src/index.js

@@ -131,9 +131,9 @@ app.use('/api/addresses', passport.authenticate('jwt', {session: false}), addres
 
 app.use('/api/brands', passport.authenticate('jwt', {session: false}), brandsRoutes);
 
-app.use('/api/categories', passport.authenticate('jwt', {session: false}), categoriesRoutes);
+app.use('/api/categories', categoriesRoutes);
 
-app.use('/api/products', passport.authenticate('jwt', {session: false}), productsRoutes);
+app.use('/api/products', productsRoutes);
 
 app.use('/api/product_variants', passport.authenticate('jwt', {session: false}), product_variantsRoutes);
 

frontend/src/components/WebPageComponents/Footer.tsx

@@ -0,0 +1,36 @@
+
+import React from 'react';
+import Link from 'next/link';
+
+export default function WebSiteFooter({ projectName }: { projectName: string }) {
+  return (
+    <footer className="bg-gray-900 text-white py-12">
+      <div className="container mx-auto px-4 grid grid-cols-1 md:grid-cols-4 gap-8">
+        <div className="col-span-1 md:col-span-2">
+          <h3 className="text-2xl font-bold text-blue-400 mb-4">{projectName}</h3>
+          <p className="text-gray-400 max-w-sm">
+            The best mobile-first e-commerce experience. Buy products quickly and securely from your phone.
+          </p>
+        </div>
+        <div>
+          <h4 className="font-semibold mb-4 text-gray-200">Shop</h4>
+          <ul className="space-y-2 text-gray-400">
+            <li><Link href="/" className="hover:text-blue-400">All Products</Link></li>
+            <li><Link href="/" className="hover:text-blue-400">Categories</Link></li>
+            <li><Link href="/" className="hover:text-blue-400">Featured</Link></li>
+          </ul>
+        </div>
+        <div>
+          <h4 className="font-semibold mb-4 text-gray-200">Legal</h4>
+          <ul className="space-y-2 text-gray-400">
+            <li><Link href="/privacy-policy" className="hover:text-blue-400">Privacy Policy</Link></li>
+            <li><Link href="/terms-of-use" className="hover:text-blue-400">Terms of Use</Link></li>
+          </ul>
+        </div>
+      </div>
+      <div className="container mx-auto px-4 mt-12 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
+        © 2026 {projectName}. All rights reserved.
+      </div>
+    </footer>
+  );
+}

frontend/src/components/WebPageComponents/Header.tsx

@@ -0,0 +1,44 @@
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { mdiAccount, mdiCart, mdiMenu, mdiClose } from '@mdi/js';
+import BaseIcon from '../BaseIcon';
+
+export default function WebSiteHeader({ projectName }: { projectName: string }) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  return (
+    <header className="bg-white shadow-sm sticky top-0 z-50 dark:bg-dark-900">
+      <div className="container mx-auto px-4 h-16 flex items-center justify-between">
+        <Link href="/" className="text-2xl font-bold text-blue-600 flex items-center space-x-2">
+          <span>{projectName}</span>
+        </Link>
+
+        {/* Desktop Nav */}
+        <nav className="hidden md:flex items-center space-x-8 text-gray-600 dark:text-gray-300">
+          <Link href="/" className="hover:text-blue-600 transition-colors">Home</Link>
+          <Link href="/search" className="hover:text-blue-600 transition-colors">Products</Link>
+          <Link href="/login" className="hover:text-blue-600 transition-colors">Admin Dashboard</Link>
+        </nav>
+
+        <div className="flex items-center space-x-4">
+          <Link href="/login" className="p-2 hover:bg-gray-100 rounded-full dark:hover:bg-dark-800">
+            <BaseIcon path={mdiAccount} size="24" />
+          </Link>
+          <button className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
+            <BaseIcon path={isMenuOpen ? mdiClose : mdiMenu} size="24" />
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile Nav */}
+      {isMenuOpen && (
+        <div className="md:hidden bg-white border-t p-4 space-y-4 dark:bg-dark-900 dark:border-dark-700">
+          <Link href="/" className="block text-gray-600 dark:text-gray-300">Home</Link>
+          <Link href="/search" className="block text-gray-600 dark:text-gray-300">Products</Link>
+          <Link href="/login" className="block text-gray-600 dark:text-gray-300">Login</Link>
+        </div>
+      )}
+    </header>
+  );
+}

frontend/src/pages/index.tsx

@@ -1,166 +1,230 @@
-
 import React, { useEffect, useState } from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
-import BaseButton from '../components/BaseButton';
-import CardBox from '../components/CardBox';
-import SectionFullScreen from '../components/SectionFullScreen';
+import axios from 'axios';
+import { mdiMagnify, mdiCartOutline, mdiArrowRight, mdiStar } from '@mdi/js';
+import BaseIcon from '../components/BaseIcon';
 import LayoutGuest from '../layouts/Guest';
-import BaseDivider from '../components/BaseDivider';
-import BaseButtons from '../components/BaseButtons';
-import { getPageTitle } from '../config';
+import WebSiteHeader from '../components/WebPageComponents/Header';
+import WebSiteFooter from '../components/WebPageComponents/Footer';
+import LoadingSpinner from '../components/LoadingSpinner';
 import { useAppSelector } from '../stores/hooks';
-import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
 
+export default function LandingPage() {
+  const [products, setProducts] = useState([]);
+  const [categories, setCategories] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [activeCategory, setActiveCategory] = useState('All');
+  const [searchQuery, setSearchQuery] = useState('');
+  const projectName = useAppSelector((state) => state.style.projectName) || 'MobileStore';
 
-export default function Starter() {
-    const [illustrationImage, setIllustrationImage] = useState({
-        src: undefined,
-        photographer: undefined,
-        photographer_url: undefined,
-    })
-    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
-    const [contentType, setContentType] = useState('video');
-    const [contentPosition, setContentPosition] = useState('left');
-    const textColor = useAppSelector((state) => state.style.linkColor);
-
-    const title = 'Mobile Commerce Store'
-
-    // Fetch Pexels image/video
   useEffect(() => {
     async function fetchData() {
-            const image = await getPexelsImage();
-            const video = await getPexelsVideo();
-            setIllustrationImage(image);
-            setIllustrationVideo(video);
+      try {
+        setLoading(true);
+        const [productsRes, categoriesRes] = await Promise.all([
+          axios.get('/products'),
+          axios.get('/categories')
+        ]);
+        setProducts(productsRes.data.rows || []);
+        setCategories(categoriesRes.data.rows || []);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      } finally {
+        setLoading(false);
+      }
     }
     fetchData();
   }, []);
 
-    const imageBlock = (image) => (
-        <div
-            className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
-            style={{
-                backgroundImage: `${
-                    image
-                        ? `url(${image?.src?.original})`
-                        : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                }`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'left center',
-                backgroundRepeat: 'no-repeat',
-            }}
-        >
-            <div className='flex justify-center w-full bg-blue-300/20'>
-                <a
-                    className='text-[8px]'
-                    href={image?.photographer_url}
-                    target='_blank'
-                    rel='noreferrer'
-                >
-                    Photo by {image?.photographer} on Pexels
-                </a>
-            </div>
-        </div>
-    );
+  const filteredProducts = products.filter(product => {
+    const matchesCategory = activeCategory === 'All' || 
+      product.categories?.some(c => c.name === activeCategory);
+    const matchesSearch = product.name?.toLowerCase().includes(searchQuery.toLowerCase());
+    return matchesCategory && matchesSearch;
+  });
 
-    const videoBlock = (video) => {
-        if (video?.video_files?.length > 0) {
-            return (
-                <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
-                    <video
-                        className='absolute top-0 left-0 w-full h-full object-cover'
-                        autoPlay
-                        loop
-                        muted
-                    >
-                        <source src={video?.video_files[0]?.link} type='video/mp4'/>
-                        Your browser does not support the video tag.
-                    </video>
-                    <div className='flex justify-center w-full bg-blue-300/20 z-10'>
-                        <a
-                            className='text-[8px]'
-                            href={video?.user?.url}
-                            target='_blank'
-                            rel='noreferrer'
-                        >
-                            Video by {video.user.name} on Pexels
-                        </a>
-                    </div>
-                </div>)
-        }
-    };
+  const featuredProducts = products.filter(p => p.is_featured).slice(0, 4);
 
   return (
-      <div
-          style={
-              contentPosition === 'background'
-                  ? {
-                      backgroundImage: `${
-                          illustrationImage
-                              ? `url(${illustrationImage.src?.original})`
-                              : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                      }`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'left center',
-                      backgroundRepeat: 'no-repeat',
-                  }
-                  : {}
-          }
-      >
+    <div className="flex flex-col min-h-screen bg-white dark:bg-dark-900">
       <Head>
-        <title>{getPageTitle('Starter Page')}</title>
+        <title>{projectName} - Best Mobile Shop</title>
       </Head>
 
-      <SectionFullScreen bg='violet'>
-      <div
-          className={`flex ${
-              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
-          } min-h-screen w-full`}
-      >
-          {contentType === 'image' && contentPosition !== 'background'
-              ? imageBlock(illustrationImage)
-              : null}
-          {contentType === 'video' && contentPosition !== 'background'
-              ? videoBlock(illustrationVideo)
-              : null}
-          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
-        <CardBox className='w-full md:w-3/5 lg:w-2/3'>
-            <CardBoxComponentTitle title="Welcome to your Mobile Commerce Store app!"/>
+      <WebSiteHeader projectName={projectName} />
 
-            <div className="space-y-3">
-                <p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
-                <p className='text-center text-gray-500'>For guides and documentation please check
-                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
+      <main className="flex-grow">
+        {/* Hero Section */}
+        <section className="relative bg-blue-600 text-white py-20 px-4 overflow-hidden">
+          <div className="absolute top-0 right-0 -mt-20 -mr-20 w-64 h-64 bg-blue-500 rounded-full opacity-50 blur-3xl"></div>
+          <div className="container mx-auto relative z-10 text-center">
+            <h1 className="text-4xl md:text-6xl font-extrabold mb-6">
+              Your Next Favorite Tech <br /> is Just a Click Away
+            </h1>
+            <p className="text-xl md:text-2xl text-blue-100 mb-8 max-w-2xl mx-auto">
+              Browse the latest smartphones, tablets, and accessories. Fast delivery and secure payments guaranteed.
+            </p>
+            
+            <div className="max-w-xl mx-auto flex bg-white rounded-full p-1 shadow-lg dark:bg-dark-800">
+              <div className="flex items-center pl-4 text-gray-400">
+                <BaseIcon path={mdiMagnify} size="24" />
               </div>
-        
-            <BaseButtons>
-                <BaseButton
-                    href='/login'
-                    label='Login'
-                    color='info'
-                    className='w-full'
+              <input 
+                type="text" 
+                placeholder="Search for products..." 
+                className="w-full py-3 px-4 rounded-full focus:outline-none text-gray-800 dark:bg-dark-800 dark:text-white"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
               />
+              <button className="bg-blue-600 text-white px-8 py-3 rounded-full font-bold hover:bg-blue-700 transition-colors hidden sm:block">
+                Search
+              </button>
+            </div>
+          </div>
+        </section>
 
-            </BaseButtons>
-        </CardBox>
+        {/* Categories Chips */}
+        <section className="py-8 bg-gray-50 dark:bg-dark-800 border-b dark:border-dark-700">
+          <div className="container mx-auto px-4">
+            <div className="flex overflow-x-auto pb-2 space-x-4 no-scrollbar">
+              <button 
+                onClick={() => setActiveCategory('All')}
+                className={`px-6 py-2 rounded-full whitespace-nowrap font-medium transition-all ${
+                  activeCategory === 'All' 
+                  ? 'bg-blue-600 text-white' 
+                  : 'bg-white text-gray-600 hover:bg-gray-100 dark:bg-dark-700 dark:text-gray-300'
+                }`}
+              >
+                All Products
+              </button>
+              {categories.map(cat => (
+                <button 
+                  key={cat.id}
+                  onClick={() => setActiveCategory(cat.name)}
+                  className={`px-6 py-2 rounded-full whitespace-nowrap font-medium transition-all ${
+                    activeCategory === cat.name 
+                    ? 'bg-blue-600 text-white' 
+                    : 'bg-white text-gray-600 hover:bg-gray-100 dark:bg-dark-700 dark:text-gray-300'
+                  }`}
+                >
+                  {cat.name}
+                </button>
+              ))}
             </div>
           </div>
-      </SectionFullScreen>
-      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
-        <p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
-        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
-            Privacy Policy
+        </section>
+
+        {/* Product Grid */}
+        <section className="py-16 container mx-auto px-4">
+          <div className="flex items-center justify-between mb-8">
+            <h2 className="text-3xl font-bold text-gray-800 dark:text-white">
+              {activeCategory === 'All' ? 'Featured Products' : activeCategory}
+            </h2>
+            <Link href="/search" className="text-blue-600 font-semibold flex items-center hover:underline">
+              View All <BaseIcon path={mdiArrowRight} size="20" />
             </Link>
           </div>
 
+          {loading ? (
+            <div className="flex justify-center py-20">
+              <LoadingSpinner />
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+              {filteredProducts.length > 0 ? filteredProducts.map(product => (
+                <div key={product.id} className="group bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all border border-gray-100 overflow-hidden dark:bg-dark-800 dark:border-dark-700 flex flex-col h-full">
+                  <Link href={`/products/products-view/?id=${product.id}`} className="relative h-64 bg-gray-100 block overflow-hidden">
+                    {/* Fallback image if no gallery_images */}
+                    <img 
+                      src={product.gallery_images?.[0]?.url || `https://images.pexels.com/photos/404280/pexels-photo-404280.jpeg?auto=compress&cs=tinysrgb&w=600`}
+                      alt={product.name}
+                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                    />
+                    {product.is_featured && (
+                      <span className="absolute top-4 left-4 bg-amber-500 text-white text-xs font-bold px-3 py-1 rounded-full uppercase">
+                        Featured
+                      </span>
+                    )}
+                  </Link>
+                  <div className="p-6 flex flex-col flex-grow">
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-sm text-gray-500 font-medium">
+                        {product.categories?.[0]?.name || 'Electronics'}
+                      </span>
+                      <div className="flex items-center text-amber-500">
+                        <BaseIcon path={mdiStar} size="16" />
+                        <span className="text-xs font-bold ml-1">4.8</span>
+                      </div>
+                    </div>
+                    <Link href={`/products/products-view/?id=${product.id}`}>
+                      <h3 className="text-lg font-bold text-gray-800 dark:text-white mb-2 group-hover:text-blue-600 transition-colors truncate">
+                        {product.name}
+                      </h3>
+                    </Link>
+                    <p className="text-gray-500 text-sm mb-4 line-clamp-2 dark:text-gray-400">
+                      {product.short_description || 'High-quality product for your everyday needs.'}
+                    </p>
+                    <div className="mt-auto flex items-center justify-between">
+                      <div className="flex flex-col">
+                        <span className="text-2xl font-black text-gray-900 dark:text-white">
+                          ${product.base_price}
+                        </span>
+                        {product.compare_at_price && (
+                          <span className="text-sm text-gray-400 line-through">
+                            ${product.compare_at_price}
+                          </span>
+                        )}
+                      </div>
+                      <button className="bg-gray-900 text-white p-3 rounded-xl hover:bg-blue-600 transition-colors shadow-sm dark:bg-dark-700 dark:hover:bg-blue-600">
+                        <BaseIcon path={mdiCartOutline} size="24" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              )) : (
+                <div className="col-span-full py-20 text-center">
+                  <p className="text-gray-500 text-xl">No products found for this category.</p>
+                </div>
+              )}
+            </div>
+          )}
+        </section>
+
+        {/* Features Section */}
+        <section className="bg-gray-50 py-16 dark:bg-dark-800">
+          <div className="container mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-12 text-center">
+            <div>
+              <div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-6 dark:bg-blue-900/30">
+                <BaseIcon path={mdiStar} size="32" className="text-blue-600" />
+              </div>
+              <h3 className="text-xl font-bold mb-3 dark:text-white">Premium Quality</h3>
+              <p className="text-gray-500 dark:text-gray-400">We only sell products from trusted brands with high customer ratings.</p>
+            </div>
+            <div>
+              <div className="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-6 dark:bg-green-900/30">
+                <BaseIcon path={mdiCartOutline} size="32" className="text-green-600" />
+              </div>
+              <h3 className="text-xl font-bold mb-3 dark:text-white">Fast Delivery</h3>
+              <p className="text-gray-500 dark:text-gray-400">Get your tech delivered to your doorstep within 24-48 hours.</p>
+            </div>
+            <div>
+              <div className="w-16 h-16 bg-amber-100 rounded-2xl flex items-center justify-center mx-auto mb-6 dark:bg-amber-900/30">
+                <BaseIcon path={mdiStar} size="32" className="text-amber-600" />
+              </div>
+              <h3 className="text-xl font-bold mb-3 dark:text-white">Secure Payments</h3>
+              <p className="text-gray-500 dark:text-gray-400">All transactions are encrypted and processed through secure gateways.</p>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      <WebSiteFooter projectName={projectName} />
     </div>
   );
 }
 
-Starter.getLayout = function getLayout(page: ReactElement) {
+LandingPage.getLayout = function getLayout(page: ReactElement) {
   return <LayoutGuest>{page}</LayoutGuest>;
 };
-