david/kanban-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request 'initial-kanban-logic' (#5) from initial-kanban-logic into main

Browse source 
Reviewed-on: http://localhost:3000/david/flask_react_monorepo_template/pulls/5
This commit is contained in:
david 2026-03-20 17:35:00 +03:00
commit 3711b0888d
25 changed files with 441 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -82,3 +82,5 @@ htmlcov/
.cache/
celerybeat-schedule
backend/app/static

32
Makefile
View file

@ -1,5 +1,15 @@
.PHONY: help install dev-services dev-stop-services dev-backend dev-frontend dev build test lint clean up down restart logs celery-worker celery-beat celery-flower celery-shell
IMAGE_NAME = my-flask-react-app
# Git Remotes
ORIGIN_REMOTE = origin
DEPLOY_REMOTE = deploy
# Get current git commit hash
GIT_HASH = $(shell git rev-parse --short HEAD)
GIT_BRANCH = $(shell git rev-parse --abbrev-ref HEAD)
help: ## Show this help message
@echo "Available commands:"
@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}; {printf " \033[36m%-20s\033[0m %s\n", $$1, $$2}'
@ -52,12 +62,6 @@ restart: ## Restart all services
logs: ## Show logs from all services
docker compose logs -f
logs-backend: ## Show backend logs
docker compose logs -f backend
logs-frontend: ## Show frontend logs
docker compose logs -f frontend
test: ## Run all tests
@echo "Running backend tests..."
cd backend && . venv/bin/activate && pytest
@ -170,3 +174,19 @@ logs-celery-beat: ## Show Celery Beat logs
logs-flower: ## Show Flower logs
docker compose logs -f flower
docker-build: ## Show Flower logs
docker build -f docker/Dockerfile -t $(IMAGE_NAME):$(GIT_HASH) -t $(IMAGE_NAME):latest .
docker-run: ## Show Flower logs
docker run -p 8001:8000 $(IMAGE_NAME):latest
# Push to deploy remote (triggers deployment)
push-deploy:
@echo "Pushing to deploy remote ($(GIT_BRANCH))..."
git push $(DEPLOY_REMOTE) $(GIT_BRANCH)
# Push to deploy remote (triggers deployment)
push-deploy-force:
@echo "Pushing to deploy remote ($(GIT_BRANCH))..."
git push $(DEPLOY_REMOTE) $(GIT_BRANCH) --force-with-lease

6
backend/Dockerfile
View file

@ -20,11 +20,11 @@ RUN useradd -m appuser && chown -R appuser:appuser /app
USER appuser
# Expose port
EXPOSE 5000
EXPOSE 8000
# Health check
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
CMD curl -f http://localhost:5000/health/ || exit 1
CMD curl -f http://localhost:8000/health/ || exit 1
# Run with gunicorn
CMD ["gunicorn", "--bind", "0.0.0.0:5000", "--workers", "4", "wsgi:app"]
CMD ["gunicorn", "--bind", "0.0.0.0:8000", "--workers", "4", "wsgi:app"]

15
backend/app/__init__.py
View file

@ -1,4 +1,4 @@
import json
# import json
import os
from dotenv import load_dotenv
@ -28,10 +28,10 @@ def create_app(config_name=None):
app.config.from_object(config_by_name[config_name])
print("----------------------------------------------------------")
print(f"------------------ENVIRONMENT: {config_name}-----------------------")
print(json.dumps(dict(app.config), indent=2, default=str))
print("----------------------------------------------------------")
# print("----------------------------------------------------------")
# print(f"------------------ENVIRONMENT: {config_name}-----------------------")
# print(json.dumps(dict(app.config), indent=2, default=str))
# print("----------------------------------------------------------")
# Initialize extensions with app
db.init_app(app)
migrate.init_app(app, db)
@ -48,11 +48,12 @@ def create_app(config_name=None):
# Import models (required for migrations)
# Register blueprints
from app.routes import api_bp, health_bp
from app.routes import api_bp, health_bp, home_bp
from app.routes.kanban import kanban_bp
app.register_blueprint(api_bp, url_prefix="/api")
app.register_blueprint(health_bp)
app.register_blueprint(health_bp, url_prefix="/health")
app.register_blueprint(home_bp)
app.register_blueprint(kanban_bp, url_prefix="/api")
# Global error handlers

2
backend/app/config.py
View file

@ -51,7 +51,7 @@ class TestingConfig(Config):
"""Testing configuration"""
TESTING = True
SQLALCHEMY_DATABASE_URI = os.environ["TEST_DATABASE_URL"]
SQLALCHEMY_DATABASE_URI = os.environ.get("TEST_DATABASE_URL")
WTF_CSRF_ENABLED = False
# Conservative connection pool settings for testing

3
backend/app/routes/__init__.py
View file

@ -1,4 +1,5 @@
from .api import api_bp
from .health import health_bp
from .home import home_bp
__all__ = ["api_bp", "health_bp"]
__all__ = ["api_bp", "health_bp", "home_bp"]

19
backend/app/routes/home.py Normal file
View file

@ -0,0 +1,19 @@
import os
from flask import Blueprint
from flask import current_app as app
from flask import send_from_directory
home_bp = Blueprint("home", __name__)
@home_bp.route("/")
def serve_root():
return send_from_directory(app.static_folder, "index.html")
@home_bp.route("/<path:path>")
def serve_spa(path):
if os.path.exists(os.path.join(app.static_folder, path)):
return send_from_directory(app.static_folder, path)
return send_from_directory(app.static_folder, "index.html")

2
backend/app/services/card_position_service.py
View file

@ -78,7 +78,7 @@ class CardPositionService:
for index, card in enumerate(dest_cards):
if card is None:
# This is where our moved card should go
moved_card = Card.query.get(moved_card_id)
moved_card = db.session.get(Card, moved_card_id)
if moved_card:
moved_card.pos = float(index)
else:

1
backend/requirements/dev.txt
View file

@ -11,3 +11,4 @@ faker==20.1.0
# Celery monitoring
flower==2.0.1
gunicorn==21.2.0

2
backend/wsgi.py
View file

@ -5,4 +5,4 @@ env = os.environ.get('FLASK_ENV', 'dev')
app = create_app(env)
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000)
app.run(host='0.0.0.0', port=8000)

50
docker/Dockerfile Normal file
View file

@ -0,0 +1,50 @@
# ---------------------------------------------------------
# Stage 1: Build the React Frontend
# ---------------------------------------------------------
FROM node:18-alpine AS frontend-build
WORKDIR /app/frontend
# Copy package files first for better caching
COPY frontend/package*.json ./
RUN npm ci
# Copy source code and build
COPY frontend/ ./
RUN npm run build
# ---------------------------------------------------------
# Stage 2: Build the Python Backend & Assemble
# ---------------------------------------------------------
FROM python:3.11-slim
WORKDIR /app
# Install system dependencies (if needed for python packages)
# RUN apt-get update && apt-get install -y ... && rm -rf /var/lib/apt/lists/*
# Install Python dependencies
COPY backend/requirements ./requirements/
RUN pip install --no-cache-dir -r requirements/dev.txt
# Copy Flask application code
COPY backend/ ./
# Copy the built React files from Stage 1 into Flask's static folder
# Adjust 'build' to 'dist' if you are using Vite
COPY --from=frontend-build /app/frontend/dist ./app/static
# Create a non-root user for security
RUN useradd -m appuser
USER appuser
# Expose port
EXPOSE 8000
# Run with Gunicorn (Production WSGI Server)
# --bind 0.0.0.0 makes it accessible outside the container
# --access-logfile - sends access logs to stdout
# --error-logfile - sends error logs to stderr
# --capture-output ensures all output is captured
# --log-level info sets the logging level
CMD ["gunicorn", "--bind", "0.0.0.0:8000", "--workers", "2", "--access-logfile", "-", "--error-logfile", "-", "--capture-output", "--log-level", "info", "wsgi:app"]

29
frontend/favicon.svg Normal file
View file

@ -0,0 +1,29 @@
<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
<!-- Column 1: To Do -->
<rect x="10" y="10" width="50" height="100" fill="none" stroke="#4A90D9" stroke-width="3" rx="5"/>
<rect x="20" y="30" width="30" height="15" fill="#E0E0E0" rx="3"/>
<rect x="20" y="50" width="30" height="15" fill="#E0E0E0" rx="3"/>
<rect x="20" y="70" width="30" height="15" fill="#E0E0E0" rx="3"/>
<!-- Column 2: In Progress -->
<rect x="75" y="10" width="50" height="100" fill="none" stroke="#4A90D9" stroke-width="3" rx="5"/>
<rect x="85" y="30" width="30" height="15" fill="#4A90D9" rx="3"/>
<circle cx="112" cy="37" r="5" fill="#4A90D9"/>
<path d="M109 37 L111 39 L115 35" stroke="white" stroke-width="1.5" fill="none"/>
<rect x="85" y="50" width="30" height="15" fill="#4A90D9" rx="3"/>
<circle cx="112" cy="57" r="5" fill="#4A90D9"/>
<path d="M109 57 L111 59 L115 55" stroke="white" stroke-width="1.5" fill="none"/>
<rect x="85" y="70" width="30" height="15" fill="#E0E0E0" rx="3"/>
<!-- Column 3: Done -->
<rect x="140" y="10" width="50" height="100" fill="none" stroke="#4A90D9" stroke-width="3" rx="5"/>
<rect x="150" y="30" width="30" height="15" fill="#7FB3E5" rx="3"/>
<circle cx="177" cy="37" r="5" fill="#7FB3E5"/>
<path d="M174 37 L176 39 L180 35" stroke="white" stroke-width="1.5" fill="none"/>
<rect x="150" y="50" width="30" height="15" fill="#7FB3E5" rx="3"/>
<circle cx="177" cy="57" r="5" fill="#7FB3E5"/>
<path d="M174 57 L176 59 L180 55" stroke="white" stroke-width="1.5" fill="none"/>
<rect x="150" y="70" width="30" height="15" fill="#7FB3E5" rx="3"/>
<circle cx="177" cy="77" r="5" fill="#7FB3E5"/>
<path d="M174 77 L176 79 L180 75" stroke="white" stroke-width="1.5" fill="none"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

6
frontend/index.html
View file

@ -2,10 +2,10 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Crafting Shop - Your one-stop shop for crafting supplies" />
<title>Crafting Shop</title>
<meta name="description" content="Taskboard - Organize your projects and boost productivity with powerful task management" />
<title>Taskboard</title>
</head>
<body>
<div id="root"></div>

36
frontend/src/App.tsx
View file

@ -1,17 +1,16 @@
import { Routes, Route } from 'react-router-dom';
import { Routes, Route, Navigate } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { useApp } from './context/AppContext';
import { ModalProvider } from './context/modals/useModal';
import { ModalRoot } from './context/modals/ModalRoot';
import { ToastProvider } from './context/toasts/useToast';
import { ToastRoot } from './context/toasts/ToastRoot';
import { LoaderProvider } from './context/loaders/useLoader';
import { LoaderRoot } from './context/loaders/LoaderRoot';
import Cart from './pages/Cart';
import { Navbar } from './components/Navbar';
import { Home } from './pages/Home';
import { Products } from './pages/Products';
import Login from './pages/Login';
import { Register } from './pages/Register';
import { Orders } from './pages/Orders';
import { ProtectedRoute } from './components/ProtectedRoute';
import { Boards } from './pages/Boards';
import { BoardCreate } from './pages/BoardCreate';
@ -20,15 +19,35 @@ import { BoardDetail } from './pages/BoardDetail';
import { CardDetail } from './pages/CardDetail';
const App = () => {
const { token } = useApp();
const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
useEffect(() => {
setIsAuthenticated(!!token);
}, [token]);
if (isAuthenticated === null) {
return null;
}
return (
<LoaderProvider>
<ToastProvider>
<ModalProvider>
<div className="min-h-screen bg-gray-900 text-gray-100">
<Navbar />
<main className="flex-1 p-8 max-w-7xl mx-auto w-full">
<main className="flex-1 p-8 mx-auto w-full max-w-7xl">
<Routes>
<Route path="/" element={<Home />} />
<Route
path="/"
element={
isAuthenticated ? (
<Navigate to="/boards" replace />
) : (
<Navigate to="/home" replace />
)
}
/>
<Route path="/home" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
@ -73,11 +92,6 @@ const App = () => {
</ProtectedRoute>
}
/>
{/* Legacy Routes */}
<Route path="/products" element={<Products />} />
<Route path="/cart" element={<Cart />} />
<Route path="/orders" element={<Orders />} />
</Routes>
</main>
{/* Order matters for Z-Index: Loader (70) > Toast (60) > Modal (50) */}

137
frontend/src/components/Navbar.tsx
View file

@ -1,60 +1,59 @@
import { Link } from 'react-router-dom';
import { useState } from 'react';
import { useApp } from '../context/AppContext';
import { useAuth } from '../hooks/useAuth';
import { TaskboardLogo } from './TaskboardLogo';
import MenuIcon from './icons/MenuIcon';
import CloseIcon from './icons/CloseIcon';
export function Navbar() {
const { user } = useApp();
const { logout } = useAuth();
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return (
<nav className="bg-gray-800 border-b border-gray-700 shadow-md">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center">
<Link
to="/"
className="text-xl font-bold text-white hover:text-blue-400 transition-colors"
>
Crafting Shop
<Link to="/boards" className="hover:opacity-80 transition-opacity flex-shrink-0">
<TaskboardLogo className="h-8 w-auto" />
</Link>
<div className="ml-10 flex items-baseline space-x-4">
<Link
to="/boards"
className="text-xl font-bold text-white hover:text-blue-400 transition-colors ml-2"
>
Taskboard
</Link>
<div className="hidden md:flex items-baseline ml-10 space-x-4">
<Link
to="/"
to="/home"
className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
>
Home
</Link>
<Link
to="/products"
className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
>
Products
</Link>
<Link
to="/cart"
className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
>
Cart
</Link>
{user && (
<>
<Link
to="/boards"
className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
>
Boards
</Link>
<Link
to="/orders"
className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
>
Orders
</Link>
</>
<Link
to="/boards"
className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
>
Boards
</Link>
)}
</div>
</div>
<div className="flex items-center">
<div className="hidden md:flex items-center gap-3">
{user ? (
<span className="text-gray-300 px-3 py-2">{user.username}</span>
<>
<span className="text-gray-300 px-3 py-2">{user.username}</span>
<button
onClick={logout}
className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
>
Logout
</button>
</>
) : (
<>
<Link
@ -72,8 +71,76 @@ export function Navbar() {
</>
)}
</div>
<div className="md:hidden flex items-center">
<button
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
className="text-gray-300 hover:text-white p-2 rounded-md"
aria-label="Toggle menu"
>
{mobileMenuOpen ? <CloseIcon /> : <MenuIcon />}
</button>
</div>
</div>
</div>
{/* Mobile menu */}
{mobileMenuOpen && (
<div className="md:hidden bg-gray-800 border-t border-gray-700">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<Link
to="/home"
className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
onClick={() => setMobileMenuOpen(false)}
>
Home
</Link>
{user && (
<Link
to="/boards"
className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
onClick={() => setMobileMenuOpen(false)}
>
Boards
</Link>
)}
<div className="border-t border-gray-700 my-2"></div>
{user ? (
<>
<div className="px-3 py-2 text-gray-300 text-base font-medium">{user.username}</div>
<button
onClick={() => {
logout();
setMobileMenuOpen(false);
}}
className="text-gray-300 hover:text-white block w-full text-left px-3 py-2 rounded-md text-base font-medium"
>
Logout
</button>
</>
) : (
<>
<Link
to="/login"
className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
onClick={() => setMobileMenuOpen(false)}
>
Login
</Link>
<Link
to="/register"
className="bg-blue-600 hover:bg-blue-700 text-white block px-3 py-2 rounded-md text-base font-medium"
onClick={() => setMobileMenuOpen(false)}
>
Register
</Link>
</>
)}
</div>
</div>
)}
</nav>
);
}

55
frontend/src/components/TaskboardLogo.tsx Normal file
View file

@ -0,0 +1,55 @@
export const TaskboardLogo = ({ className = '' }: { className?: string }) => (
<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg" className={className}>
<rect
x="10"
y="10"
width="50"
height="100"
fill="none"
stroke="#4A90D9"
strokeWidth="3"
rx="5"
/>
<rect x="20" y="30" width="30" height="15" fill="#E0E0E0" rx="3" />
<rect x="20" y="50" width="30" height="15" fill="#E0E0E0" rx="3" />
<rect x="20" y="70" width="30" height="15" fill="#E0E0E0" rx="3" />
<rect
x="75"
y="10"
width="50"
height="100"
fill="none"
stroke="#4A90D9"
strokeWidth="3"
rx="5"
/>
<rect x="85" y="30" width="30" height="15" fill="#4A90D9" rx="3" />
<circle cx="112" cy="37" r="5" fill="#4A90D9" />
<path d="M109 37 L111 39 L115 35" stroke="white" strokeWidth="1.5" fill="none" />
<rect x="85" y="50" width="30" height="15" fill="#4A90D9" rx="3" />
<circle cx="112" cy="57" r="5" fill="#4A90D9" />
<path d="M109 57 L111 59 L115 55" stroke="white" strokeWidth="1.5" fill="none" />
<rect x="85" y="70" width="30" height="15" fill="#E0E0E0" rx="3" />
<rect
x="140"
y="10"
width="50"
height="100"
fill="none"
stroke="#4A90D9"
strokeWidth="3"
rx="5"
/>
<rect x="150" y="30" width="30" height="15" fill="#7FB3E5" rx="3" />
<circle cx="177" cy="37" r="5" fill="#7FB3E5" />
<path d="M174 37 L176 39 L180 35" stroke="white" strokeWidth="1.5" fill="none" />
<rect x="150" y="50" width="30" height="15" fill="#7FB3E5" rx="3" />
<circle cx="177" cy="57" r="5" fill="#7FB3E5" />
<path d="M174 57 L176 59 L180 55" stroke="white" strokeWidth="1.5" fill="none" />
<rect x="150" y="70" width="30" height="15" fill="#7FB3E5" rx="3" />
<circle cx="177" cy="77" r="5" fill="#7FB3E5" />
<path d="M174 77 L176 79 L180 75" stroke="white" strokeWidth="1.5" fill="none" />
</svg>
);

18
frontend/src/components/icons/CloseIcon.tsx Normal file
View file

@ -0,0 +1,18 @@
const CloseIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
);
export default CloseIcon;

19
frontend/src/components/icons/MenuIcon.tsx Normal file
View file

@ -0,0 +1,19 @@
const MenuIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
);
export default MenuIcon;

11
frontend/src/components/kanban/DeleteListModal.tsx
View file

@ -1,4 +1,5 @@
import { ModalContentProps } from '../../types';
import { useToast } from '../../context/toasts/useToast';
import Trash2Icon from '../icons/Trash2Icon';
interface DeleteListModalProps extends ModalContentProps {
@ -7,12 +8,22 @@ interface DeleteListModalProps extends ModalContentProps {
}
export function DeleteListModal({ onClose, onDelete, listName }: DeleteListModalProps) {
const { addNotification } = useToast();
const handleDelete = async () => {
try {
await onDelete();
addNotification({
type: 'success',
title: 'List deleted successfully',
});
onClose();
} catch (err) {
console.error('Failed to delete list:', err);
addNotification({
type: 'error',
title: 'Failed to delete list',
});
}
};

5
frontend/src/hooks/useApi.ts
View file

@ -40,7 +40,10 @@ api.interceptors.response.use(
// Token expired or invalid
localStorage.removeItem('token');
localStorage.removeItem('user');
window.location.href = '/login';
if (!['/login', '/register'].includes(window.location.pathname)) {
window.location.href = '/login';
}
}
return Promise.reject(error);
}

14
frontend/src/hooks/useAuth.ts
View file

@ -23,7 +23,6 @@ export function useAuth() {
email: response.user.email,
};
// debugger
// Store in localStorage first
localStorage.setItem('token', response.access_token);
localStorage.setItem('user', JSON.stringify(user));
@ -43,9 +42,9 @@ export function useAuth() {
navigate('/boards');
return user;
} catch (err) {
const errorMessage = err instanceof Error ? err.message : 'Login failed. Please try again.';
} catch (err: any) {
const errorMessage =
err.response?.data.error || err.message || 'Login failed. Please try again.';
// Show error toast
addNotification({
type: 'error',
@ -76,7 +75,6 @@ export function useAuth() {
};
// Store in localStorage first
// debugger
localStorage.setItem('token', response.access_token);
localStorage.setItem('user', JSON.stringify(user));
@ -95,10 +93,8 @@ export function useAuth() {
navigate('/boards');
return user;
} catch (err) {
const errorMessage =
err instanceof Error ? err.message : 'Registration failed. Please try again.';
} catch (err: any) {
const errorMessage = err.response?.data.error || err.message || 'Registration failed.';
// Show error toast
addNotification({
type: 'error',

1
frontend/src/hooks/useChecklistMutations.ts
View file

@ -84,7 +84,6 @@ export function useChecklistMutations(cardId: number, onUpdate: () => void) {
};
const toggleCheckItem = async (item: CheckItem, currentState: 'incomplete' | 'complete') => {
console.log('item', item);
try {
const newState = currentState === 'incomplete' ? 'complete' : 'incomplete';
await withLoader(

26
frontend/src/pages/Home.tsx
View file

@ -2,35 +2,39 @@ import { Link } from 'react-router-dom';
import { ModalExample } from '../context/modals/ModalExample';
import { ToastExample } from '../context/toasts/ToastExample';
import { LoaderExample } from '../context/loaders/LoaderExample';
import { TaskboardLogo } from '../components/TaskboardLogo';
export function Home() {
return (
<div className="space-y-12">
<div className="space-y-12 flex-1 p-8 max-w-7xl mx-auto w-full">
<div className="text-center py-12">
<h1 className="text-5xl font-bold text-white mb-4">Welcome to Crafting Shop</h1>
<div className="flex justify-center mb-6">
<TaskboardLogo className="h-16 w-auto" />
</div>
<h1 className="text-5xl font-bold text-white mb-4">Welcome to Taskboard</h1>
<p className="text-xl text-gray-300 mb-8">
Your one-stop shop for premium crafting supplies
Organize your projects and boost productivity with powerful task management
</p>
<Link
to="/products"
to="/boards"
className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg text-lg font-medium transition-colors inline-block"
>
Browse Products
View Boards
</Link>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
<h3 className="text-xl font-semibold text-white mb-2">Quality Products</h3>
<p className="text-gray-400">Premium crafting supplies for all your projects</p>
<h3 className="text-xl font-semibold text-white mb-2">Visual Workflow</h3>
<p className="text-gray-400">Drag and drop cards to manage your tasks efficiently</p>
</div>
<div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
<h3 className="text-xl font-semibold text-white mb-2">Fast Delivery</h3>
<p className="text-gray-400">Quick and reliable shipping to your doorstep</p>
<h3 className="text-xl font-semibold text-white mb-2">Personal Organization</h3>
<p className="text-gray-400">Your personal space to organize and track your tasks</p>
</div>
<div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
<h3 className="text-xl font-semibold text-white mb-2">Secure Payments</h3>
<p className="text-gray-400">Safe and secure payment processing</p>
<h3 className="text-xl font-semibold text-white mb-2">Customizable Boards</h3>
<p className="text-gray-400">Create and organize boards to fit your workflow</p>
</div>
</div>

66
frontend/src/pages/Login.tsx
View file

@ -1,28 +1,37 @@
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Link } from 'react-router-dom';
import { useAuth } from '../hooks/useAuth';
import { useToast } from '../context/toasts/useToast';
const loginSchema = z.object({
email: z.string().min(1, 'Email is required').email('Invalid email address'),
password: z
.string()
.min(1, 'Password is required')
.min(6, 'Password must be at least 6 characters'),
});
type LoginFormData = z.infer<typeof loginSchema>;
export default function Login() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const { login: handleLogin } = useAuth();
const { addNotification } = useToast();
const {
register,
handleSubmit,
formState: { errors, isSubmitting },
} = useForm<LoginFormData>({
resolver: zodResolver(loginSchema),
mode: 'onSubmit',
});
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const onSubmit = async (data: LoginFormData) => {
try {
await handleLogin(email, password);
await handleLogin(data.email, data.password);
} catch (err) {
// Error is handled by the hook (toast shown)
const errorMessage = err instanceof Error ? err.message : 'Failed to create card';
addNotification({
type: 'error',
title: 'Error Login',
message: errorMessage,
duration: 5000,
});
console.error(err);
}
};
@ -30,45 +39,48 @@ export default function Login() {
<div className="max-w-md mx-auto">
<h1 className="text-3xl font-bold text-white mb-8 text-center">Login</h1>
<form onSubmit={handleSubmit} className="space-y-6">
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
Email
Email <span className="text-red-400">*</span>
</label>
<input
id="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
{...register('email')}
className="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="you@example.com"
/>
{errors.email && <p className="mt-1 text-sm text-red-400">{errors.email.message}</p>}
</div>
<div>
<label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-2">
Password
Password <span className="text-red-400">*</span>
</label>
<input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
{...register('password')}
className="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="••••••••"
/>
{errors.password && (
<p className="mt-1 text-sm text-red-400">{errors.password.message}</p>
)}
</div>
<button
type="submit"
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
disabled={isSubmitting}
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
Login
{isSubmitting ? 'Logging in...' : 'Login'}
</button>
</form>
<p className="mt-6 text-center text-gray-400">
Don&apos;t have an account?
Don&lsquo;t have an account?
<Link to="/register" className="ml-2 text-blue-400 hover:text-blue-300">
Register
</Link>

10
frontend/src/pages/Register.tsx
View file

@ -1,7 +1,6 @@
import { useState } from 'react';
import { Link } from 'react-router-dom';
import { useAuth } from '../hooks/useAuth';
import { useToast } from '../context/toasts/useToast';
interface FormData {
email: string;
@ -23,7 +22,6 @@ export function Register() {
});
const { register: handleRegister } = useAuth();
const { addNotification } = useToast();
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFormData({
@ -52,13 +50,7 @@ export function Register() {
last_name: formData.last_name,
});
} catch (err) {
const errorMessage = err instanceof Error ? err.message : 'Failed to register';
addNotification({
type: 'error',
title: 'Registration Error',
message: errorMessage,
duration: 5000,
});
console.error(err);
}
};