A React-based social memory and zine creation app that lets users capture moments, share activities with friends, and generate beautiful digital zines.
┌─────────────────────────────────────────────────────────────────────────────┐
│ APPLICATION ENTRY │
│ │
│ main.jsx ──────────────► App.jsx │
│ │ │
│ ├── AuthProvider (Authentication Context) │
│ ├── QueryClientProvider (React Query) │
│ ├── Router (React Router DOM) │
│ ├── NavigationTracker │
│ ├── Toaster (Notifications) │
│ └── VisualEditAgent │
└─────────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ PAGES │
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Studio │ │ Me │ │ Activities │ │ ZineHome │ │
│ │ (Main Hub) │ │ (Personal) │ │ (Groups) │ │ (Viewer) │ │
│ └──────┬──────┘ └──────┬──────┘ └──────┬──────┘ └──────┬──────┘ │
│ │ │ │ │ │
│ │ ▼ ▼ │ │
│ │ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │ AddMemory │ │ AddActivity │ │ │
│ │ └─────────────┘ └──────┬──────┘ │ │
│ │ │ │ │
│ │ ┌──────▼──────┐ │ │
│ │ │ Activity │ │ │
│ │ │ Details │ │ │
│ │ └─────────────┘ │ │
│ │ │ │
│ └────────────────────┬───────────────────────────────────┘ │
│ ▼ │
│ ┌─────────────────┐ ┌─────────────┐ │
│ │ Summary │ │ Finished │ │
│ └─────────────────┘ └─────────────┘ │
│ │
│ Supporting Pages: How.jsx │
└─────────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ CORE LAYERS │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ API LAYER (src/api/) │ │
│ │ │ │
│ │ base44Client.js ──► Base44 SDK Client (Backend Communication) │ │
│ │ entities.js ──────► Data Models (Query, User) │ │
│ │ integrations.js ──► Third-party Service Integrations │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ LIB LAYER (src/lib/) │ │
│ │ │ │
│ │ AuthContext.jsx ────► Authentication State & Logic │ │
│ │ query-client.js ────► React Query Configuration │ │
│ │ utils.js ───────────► Utility Functions (cn, classnames) │ │
│ │ app-params.js ──────► Application Parameters │ │
│ │ iframe-messaging.js ► Cross-frame Communication │ │
│ │ NavigationTracker ──► Route Change Tracking │ │
│ │ VisualEditAgent ────► Visual Editing Features │ │
│ │ PageNotFound.jsx ───► 404 Error Page │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐ │
│ │ COMPONENTS (src/components/) │ │
│ │ │ │
│ │ ui/ ────────────────► Reusable UI Components (shadcn/ui) │ │
│ │ ├── button.jsx, card.jsx, dialog.jsx, input.jsx │ │
│ │ ├── toast.jsx, toaster.jsx, badge.jsx, avatar.jsx │ │
│ │ ├── tabs.jsx, select.jsx, dropdown-menu.jsx │ │
│ │ └── ... (40+ UI primitives) │ │
│ │ │ │
│ │ UserNotRegisteredError.jsx ► Auth Error Display │ │
│ └────────────────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ DATA FLOW DIAGRAM │
│ │
│ User Interaction │
│ │ │
│ ▼ │
│ ┌───────────┐ ┌──────────────┐ ┌─────────────┐ │
│ │ Pages │ ───► │ React Query │ ───► │ Base44 API │ │
│ │ │ ◄─── │ (Cache) │ ◄─── │ Client │ │
│ └───────────┘ └──────────────┘ └──────┬──────┘ │
│ │ │ │
│ │ ┌──────────────┐ │ │
│ └──────────► │ AuthContext │ ◄───────────┘ │
│ │ (Global) │ │
│ └──────────────┘ │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ FULL-STACK ARCHITECTURE (Production) │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Azure Web App (Python Runtime) │ │
│ │ │ │
│ │ Gunicorn + Uvicorn (startup command) │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌─────────────────────────────────────────────────────────────┐ │ │
│ │ │ FastAPI (server/main.py) │ │ │
│ │ │ │ │ │
│ │ │ /api/* ──────► API Endpoints (health, hello, etc.) │ │ │
│ │ │ │ │ │
│ │ │ /* ──────────► Static Files (dist/) - React SPA │ │ │
│ │ └─────────────────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────┘
In production, FastAPI serves both the API and React frontend from a single server:
| Request | Handled By | Response |
|---|---|---|
GET /api/health |
FastAPI endpoint | JSON health status |
GET /api/hello |
FastAPI endpoint | JSON message |
GET /assets/main.js |
Static file server | JavaScript bundle |
GET / |
React SPA | index.html |
GET /Studio |
React SPA (client routing) | index.html |
GET /Me |
React SPA (client routing) | index.html |
| Feature | Location | Description |
|---|---|---|
| Studio | pages/Studio.jsx |
Main hub - entry point for all features |
| Me | pages/Me.jsx |
Personal daily moments & reflections |
| Activities | pages/Activities.jsx |
Group activities management |
| Add Activity | pages/AddActivity.jsx |
Create new group activities |
| Activity Details | pages/ActivityDetails.jsx |
View/edit specific activity |
| Add Memory | pages/AddMemory.jsx |
Capture new memories with photos |
| Zine Home | pages/ZineHome.jsx |
View and share generated zines |
| Summary | pages/Summary.jsx |
Activity/memory summaries |
| How | pages/How.jsx |
App usage guide |
- Create your page component in
src/pages/YourPage.jsx - Register it in
src/pages.config.js:import YourPage from './pages/YourPage'; export const PAGES = { // ... existing pages "YourPage": YourPage, }
- The route will be automatically available at
/YourPage
- Add component to
src/components/ui/following shadcn/ui patterns - Import and use in your pages
- Use React Query hooks for data fetching
- Access Base44 entities via
src/api/entities.js - Authentication state available via
useAuth()hook fromAuthContext
- Node.js (v18 or higher recommended)
- npm (comes with Node.js)
- Python 3.11+ (for backend)
In development, frontend and backend run separately for hot-reload:
┌─────────────────────────────────────────────────────────────────┐
│ DEVELOPMENT SETUP │
│ │
│ Terminal 1 Terminal 2 │
│ ────────── ────────── │
│ cd server npm run dev │
│ pip install -r requirements.txt │
│ python main.py │
│ │ │ │
│ ▼ ▼ │
│ localhost:8000 localhost:5173 │
│ (API Server) (React + HMR) │
│ │
└─────────────────────────────────────────────────────────────────┘
Terminal 1 - Backend API:
cd server
pip install -r requirements.txt
python main.pyTerminal 2 - Frontend:
npm install
npm run dev| Service | URL | Purpose |
|---|---|---|
| Frontend | http://localhost:5173 |
React app with hot reload |
| Backend API | http://localhost:8000 |
FastAPI server |
| API Docs | http://localhost:8000/docs |
Swagger UI |
In production, FastAPI serves both API and static React files:
┌─────────────────────────────────────────────────────────────────┐
│ PRODUCTION SETUP │
│ │
│ npm run build ──► dist/ (static files) │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ FastAPI (server/main.py) │ │
│ │ │ │
│ │ /api/* ────► API endpoints │ │
│ │ /* ────► Serves dist/index.html (React SPA) │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ localhost:8000 │
│ (Everything served here) │
└─────────────────────────────────────────────────────────────────┘
# Build frontend
npm run build
# Run production server locally
cd server
python main.pyVisit http://localhost:8000 - serves both frontend and API.
| Command | Description |
|---|---|
npm run dev |
Start the frontend development server |
npm run build |
Build the frontend for production |
npm run preview |
Preview the production build locally |
npm run lint |
Run ESLint to check for code issues |
npm run typecheck |
Run TypeScript type checking |
- Framework: React 18+ with Vite
- Routing: React Router DOM
- State Management: React Query (TanStack Query)
- UI Components: shadcn/ui + Radix UI primitives
- Styling: Tailwind CSS
- Backend: FastAPI (Python) + Base44 SDK
- Icons: Lucide React
- Azure CLI installed
- An Azure account with an active subscription
- Python 3.11+
The simplest way to deploy - one command handles most of the work:
az loginnpm install
npm run buildaz webapp up --name rizzineeee-app --resource-group rizzineeee-rg --plan rizzineeee-plan --runtime "PYTHON:3.11" --location eastus2This command:
- Creates the web app (if it doesn't exist)
- Zips and uploads your code
- Installs Python dependencies from
requirements.txt
az webapp config set --resource-group rizzineeee-rg --name rizzineeee-app --startup-file "gunicorn --workers 4 --worker-class uvicorn.workers.UvicornWorker --bind 0.0.0.0:8000 server.main:app"After the initial setup, just run:
npm run build
az webapp up --name rizzineeee-app --resource-group rizzineeee-rg --plan rizzineeee-plan --runtime "PYTHON:3.11" --location eastus2If you prefer more control:
npm run build
# PowerShell
Compress-Archive -Path dist, server -DestinationPath deploy.zip -Forceaz webapp deployment source config-zip --resource-group rizzineeee-rg --name rizzineeee-app --src deploy.zipaz group create --name rizzineeee-rg --location eastus2az appservice plan create --name rizzineeee-plan --resource-group rizzineeee-rg --sku P0v3 --is-linux --location eastus2npm run build
az webapp up --name rizzineeee-app --resource-group rizzineeee-rg --plan rizzineeee-plan --runtime "PYTHON:3.11" --location eastus2# Set startup command
az webapp config set --resource-group rizzineeee-rg --name rizzineeee-app --startup-file "gunicorn --workers 4 --worker-class uvicorn.workers.UvicornWorker --bind 0.0.0.0:8000 server.main:app"
# Build frontend
npm run build
# Create deployment package
zip -r deploy.zip dist/ server/ -x "server/__pycache__/*"
# Deploy
az webapp deployment source config-zip --resource-group rizzineeee-rg --name rizzineeee-app --src deploy.zipCreate .github/workflows/azure-deploy.yml:
name: Deploy to Azure Web App
on:
push:
branches: [main]
workflow_dispatch:
env:
AZURE_WEBAPP_NAME: rizzineeee-app
PYTHON_VERSION: '3.11'
NODE_VERSION: '20.x'
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: ${{ env.NODE_VERSION }}
cache: 'npm'
- name: Setup Python
uses: actions/setup-python@v5
with:
python-version: ${{ env.PYTHON_VERSION }}
- name: Install frontend dependencies
run: npm ci
- name: Build frontend
run: npm run build
- name: Install backend dependencies
run: pip install -r server/requirements.txt
- name: Create deployment package
run: zip -r deploy.zip dist/ server/ -x "server/__pycache__/*"
- name: Deploy to Azure Web App
uses: azure/webapps-deploy@v3
with:
app-name: ${{ env.AZURE_WEBAPP_NAME }}
publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
package: deploy.zip| File | Purpose |
|---|---|
server/main.py |
FastAPI backend server |
server/requirements.txt |
Python dependencies |
startup.txt |
Azure startup command reference |
.env.example |
Environment variables template |
Your app will be available at:
https://rizzineeee-app.azurewebsites.net
Test endpoints:
- App:
https://rizzineeee-app.azurewebsites.net/ - Health:
https://rizzineeee-app.azurewebsites.net/api/health - API Docs:
https://rizzineeee-app.azurewebsites.net/docs