React frontend started [WIP]

Procfile

@@ -1,3 +1,3 @@
 # /tmp/nginx.socket is where heroku nginx buildpack listens
-web: bin/start-nginx gunicorn asgi:application --worker-class uvicorn.workers.UvicornWorker --bind unix:/tmp/nginx.socket --app-dir src/backend
+web: bin/start-nginx gunicorn asgi:application --worker-class uvicorn.workers.UvicornWorker --bind unix:/tmp/nginx.socket --chdir src/backend
 release: ./manage.py migrate --pythonpath src/backend

bin/git_hooks/pre-commit

@@ -27,39 +27,68 @@ fi
 echo "${green}✅ No unstaged Django migrations found${color_off}"
 
 printf "\n==================== Frontend code-style checks ====================\n"
+
 #-------------------------------------------------------------------------------
 # Frontend linting
 #-------------------------------------------------------------------------------
-# Get list of staged files that match the frontend file pattern
-cd src/frontend
-staged_files=$(git diff --cached --name-only --diff-filter=d | grep -E 'frontend/.*\.(js|ts|vue)$') || true
 
-# remove src/frontend from each file path, because we're already in the frontend directory
-staged_files=$(echo "$staged_files" | sed 's/src\/frontend\///g')
+lint_frontend_directory() {
+    local full_path=$1
+    local dir_name=$(basename "$full_path")
+    local original_dir=$(pwd)
+
+    # Check if directory exists
+    if [ ! -d "$full_path" ]; then
+        echo "${yellow}⚠️ Directory $full_path does not exist, skipping...${color_off}"
+        return 0
+    fi
 
-if [ -n "$staged_files" ]; then
-    echo "Files to check:"
-    echo "$staged_files"
+    cd "$full_path"
 
-    # Run Biome check on staged files
-    npx biome check --write --files-ignore-unknown=true $staged_files
-    check_status=$?
+    # Get staged files for this directory
+    staged_files=$(git diff --cached --name-only --diff-filter=d | grep -E "$full_path/.*\.(js|ts|jsx|tsx)$") || true
+    # Remove full path from each file path since we're already in that directory
+    staged_files=$(echo "$staged_files" | sed "s|$full_path/||g")
 
-    # Add formatted files back to staging
-    git add $staged_files
+    if [ -n "$staged_files" ]; then
+        echo "Files to format in $full_path:"
+        echo "$staged_files"
 
-    # If checks or formatting failed, exit with an error
-    if [ $check_status -ne 0 ]; then
-        echo "${red}❌ Code checks or formatting failed${color_off}"
-        echo "Please review the issues, stage any formatting changes, and try committing again."
-        exit 1
+        # Run Biome check on staged files
+        npx biome format --write --files-ignore-unknown=true $staged_files
+        check_status=$?
+
+        # Add formatted files back to staging
+        git add $staged_files
+
+        # If checks or formatting failed, exit with an error
+        if [ $check_status -ne 0 ]; then
+            echo "${red}❌ Code checks or formatting failed in $full_path${color_off}"
+            cd "$original_dir"
+            return 1
+        else
+            echo "${green}✅ Code checks and formatting passed in $full_path${color_off}\n"
+        fi
     else
-        echo "${green}✅ Code checks and formatting passed${color_off}\n"
+        echo "No staged files to format in $full_path"
     fi
-fi
 
-# Go back to root of the repository
-cd ../../
+    cd "$original_dir"
+    return 0
+}
+
+
+# List of directories to check with explicit paths
+frontend_dirs="src/frontend src/react"
+
+# Check each frontend directory
+for dir in $frontend_dirs; do
+    printf "\n------------------- Checking $dir directory -------------------\n"
+    lint_frontend_directory "$dir"
+    if [ $? -ne 0 ]; then
+        exit 1
+    fi
+done
 
 echo "${green}✅ All pre-commit checks passed${color_off}\n"
 exit 0

docker-compose.yml

@@ -9,7 +9,7 @@ services:
     build:
       context: .
       dockerfile: docker/Dockerfile.backend
-    command: uvicorn asgi:application --host 0.0.0.0 --port 8000 --reload 
+    command: uvicorn asgi:application --host 0.0.0.0 --port 8000 --reload
     # can't use gunicorn workers with --reload, fyi!
     #command: gunicorn asgi:application --worker-class uvicorn.workers.UvicornWorker --bind 0.0.0.0:8000
     environment:
@@ -54,7 +54,14 @@ services:
       - 3000:3000
       - 24678:24678
     volumes:
-      - ./src/frontend:/frontend:cached
+      # For quick development with Skeletor, you can swap out the frontend dir
+      # with the env var FRONTEND_DIR! Defaults to VueJS
+      - ${FRONTEND_DIR:-./src/frontend}:/frontend:cached
+
+      # These volume mounts to exclude node_modules and build caches:
+#      - /frontend/node_modules
+#      - /frontend/.nuxt
+#      - /frontend/.next
     depends_on:
       - django
     logging: *default-logging

docker/Dockerfile.frontend

@@ -5,3 +5,9 @@ RUN apt update && apt install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev
 
 # Prepare main directory
 WORKDIR /frontend
+
+# Copy package files first (for better layer caching)
+COPY src/frontend/package*.json ./
+
+# Copy the rest of the frontend code
+COPY src/frontend ./

requirements.dev.txt

@@ -6,8 +6,8 @@ bpython==0.24
 responses==0.25.3
 filelock==3.15.4
 
-pytest==8.2.2
-pytest-cov==5.0.0
-pytest-django==4.8.0
+pytest==8.3.4
+pytest-cov==6.0.0
+pytest-django==4.9.0
 pytest-sugar==1.0.0
 pytest-xdist==3.6.1

requirements.txt

@@ -1,35 +1,35 @@
 Django==5.1.4
-django-cors-headers==4.4.0
+django-cors-headers==4.6.0
 django-extensions==3.2.3
 djangorestframework==3.15.2
 drf-extensions==0.7.1
 django-ckc==0.0.10
-factory-boy==3.3.0
+factory-boy==3.3.1
 
 # Heroku staging debug tools
-django-debug-toolbar==4.4.2
+django-debug-toolbar==4.4.6
 django-querycount==0.8.3
 
 # Database
 dj-database-url==2.2.0
-psycopg[pool]==3.2.1
+psycopg[pool]==3.2.3
 
 # Storage
-whitenoise[brotli]==6.7.0
+whitenoise[brotli]==6.8.2
 
 # Email
-django-anymail==11.0
+django-anymail==12.0
 django-templated-email==3.0.1
 
 # Caching
-redis[hiredis]==5.0.6
+redis[hiredis]==5.2.0
 django-redis==5.4.0
 
 # Realtime/server
-gunicorn==22.0.0
-uvicorn[standard]==0.30.1
-channels==4.1.0
-channels_redis==4.2.0
+gunicorn==23.0.0
+uvicorn[standard]==0.32.1
+channels==4.2.0
+channels_redis==4.2.1
 service-identity==24.1.0
 
 # Logging

skeletor.sh

@@ -143,20 +143,24 @@ cat << EOF
 ${underline}Available frontends:${reset}
     ${green}${bold}1. Vue (web only) [recommended/default]${reset}
     2. Vue (web) + React Native (mobile)
+    3. Next.js (web only)
+    4. Next.js (web) + React Native (mobile)
 
 EOF
 
 FRONTEND_WEB_VUEJS=1
 FRONTEND_WEB_VUEJS_MOBILE_REACT_NATIVE=2
+FRONTEND_WEB_NEXTJS=3
+FRONTEND_WEB_NEXTJS_MOBILE_REACT_NATIVE=4
 
 read -p "Please select your preferred frontend: ${green}" FRONTEND
 echo "${reset}"
 
 # Set default to 1 if no input given
 FRONTEND=${FRONTEND:-1}
 
-if [[ $FRONTEND -gt 2 ]]; then
-    echo -e "\n${red}${bold}ERROR: Invalid FRONTEND choice... must be 1 or 2!${reset}"
+if [[ $FRONTEND -gt 3 ]]; then
+    echo -e "\n${red}${bold}ERROR: Invalid FRONTEND choice... must be 1, 2 or 3!${reset}"
     exit 2
 fi
 
@@ -185,10 +189,31 @@ for file in $(grep -rl "SKELETOR_NAME_PLACEHOLDER" .); do
     cross_platform_sed -e "s@SKELETOR_NAME_PLACEHOLDER@$PROJECT_NAME@g" "$file"
 done
 
-# Remove mobile dir if we don't need it
+VOLUME_DIR_SEARCH="STATIC_VOLUME"
+# For Vue.js
+VOLUME_DIR="./src/frontend/build:/frontend:cached"
+
+# For Next.js
+if [[ $FRONTEND == "$FRONTEND_WEB_NEXTJS" ]]; then
+    VOLUME_DIR="./src/frontend/build:/frontend/generated/static:cached"
+fi
+
+
+
+# Remove mobile dir if we don't need it.
 if [[ $FRONTEND == "$FRONTEND_WEB_VUEJS" ]]; then
     rm -rf src/mobile
+elif [[ $FRONTEND == "$FRONTEND_WEB_NEXTJS" ]]; then
+    rm -rf src/mobile
+    rm -rf src/frontend
+    cp -r src/react src/frontend
+    rm -rf src/react
+    VOLUME_DIR="./src/frontend/build:/frontend/generated/static:cached"
 fi
+sed -i -e "s/^FROM node:NODE_VERSION/FROM node:${NODE_VERSION}/g" docker/Dockerfile.frontend
+
+# Use a different delimiter for sed since we have forward slashes in our path
+sed -i -e "s#STATIC_VOLUME#${VOLUME_DIR}#g" docker-compose.yml
 
 
 # Remove Skeletor specific stuff

src/backend/settings/base.py

@@ -159,7 +159,7 @@
 # =============================================================================
 # Security/cookies
 # =============================================================================
-CORS_ORIGIN_WHITELIST = (FRONTEND_URL,)
+CORS_ALLOWED_ORIGINS = (FRONTEND_URL,)
 
 CORS_ALLOW_CREDENTIALS = True
 

src/react/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for commiting if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

src/react/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

src/react/app/(core)/components/auth/ProtectedRoute.js

@@ -0,0 +1,30 @@
+"use client"
+
+import { Box, CircularProgress } from "@mui/material"
+import { useRouter } from "next/navigation"
+import { useAuth } from "../../hooks/useAuth"
+
+const ProtectedRoute = ({ children }) => {
+  const router = useRouter()
+  const { user, isLoading, error } = useAuth()
+
+  // Show loading state
+  if (isLoading) {
+    return (
+      <Box display="flex" justifyContent="center" alignItems="center" minHeight="100vh">
+        <CircularProgress />
+      </Box>
+    )
+  }
+
+  if (error && !isLoading && !user) {
+    const currentPath = encodeURIComponent(window.location.pathname)
+    router.push(`/login?redirect=${currentPath}`)
+    return null
+  }
+
+  // If we have a user, render the protected content
+  return user ? children : null
+}
+
+export default ProtectedRoute