المشروع الختامي: تطبيق ويب متكامل

import { useState, useEffect } from 'react';import { api, setToken } from './api.js'; export default function App({ user }) {  const [me, setMe] = useState(null);  const [books, setBooks] = useState([]);  const [msg, setMsg] = useState('');   const load = () => api.get('/api/books').then(setBooks);  useEffect(() => { load(); }, []);   async function login() {    const r = await api.post('/api/login', { name: user || 'زائر' });    setToken(r.token); setMe(r.name);  }   async function borrow(id) {    try { await api.post(`/api/books/${id}/borrow`); setMsg('✓ تمت الإعارة'); load(); }    catch (e) { setMsg('⚠ ' + e.message); }  }   return (    <div>      {me ? <p>👤 {me}</p> : <button onClick={login}>دخول باسم {user || 'زائر'}</button>}      <ul>        {books.map(b => (          <li key={b.id}>            {b.title} — متاح: {b.available}{' '}            <button disabled={!me || b.available === 0} onClick={() => borrow(b.id)}>استعر</button>          </li>        ))}      </ul>      <p className="msg">{msg}</p>    </div>  );}

const BASE = 'http://localhost:3000';let token = null;export const setToken = (t) => { token = t; }; async function request(method, path, body) {  const res = await fetch(BASE + path, {    method,    headers: { 'Content-Type': 'application/json', ...(token && { Authorization: `Bearer ${token}` }) },    body: body ? JSON.stringify(body) : undefined,  });  const data = await res.json();  if (!res.ok) throw new Error(data.error || 'خطأ');  return data;} export const api = { get: (p) => request('GET', p), post: (p, b) => request('POST', p, b) };

const express = require('express');const jwt = require('jsonwebtoken');const { Sequelize, DataTypes } = require('sequelize'); const db = new Sequelize({ dialect: 'sqlite', storage: ':memory:', logging: false });const Book = db.define('Book', {  title: { type: DataTypes.STRING, allowNull: false },  copies: { type: DataTypes.INTEGER, defaultValue: 1 },}, { timestamps: false });const Loan = db.define('Loan', { user: DataTypes.STRING }, { timestamps: false });Book.hasMany(Loan); Loan.belongsTo(Book); const app = express();app.use(express.json());const SECRET = 'capstone-demo-secret'; app.post('/api/login', (req, res) => {  const { name } = req.body;  if (!name) return res.status(400).json({ error: 'الاسم مطلوب' });  res.json({ token: jwt.sign({ name }, SECRET, { expiresIn: '1h' }), name });}); function auth(req, res, next) {  try { req.user = jwt.verify((req.headers.authorization || '').slice(7), SECRET); next(); }  catch { res.status(401).json({ error: 'سجّل الدخول' }); }} app.get('/api/books', async (req, res) => {  const books = await Book.findAll({ include: Loan, order: [['id', 'ASC']] });  res.json(books.map(b => ({ id: b.id, title: b.title, available: b.copies - b.Loans.length })));}); app.post('/api/books/:id/borrow', auth, async (req, res) => {  const book = await Book.findByPk(req.params.id, { include: Loan });  if (!book) return res.status(404).json({ error: 'غير موجود' });  if (book.Loans.length >= book.copies) return res.status(409).json({ error: 'لا نسخ متاحة' });  if (book.Loans.some(l => l.user === req.user.name)) return res.status(409).json({ error: 'استعرته مسبقًا' });  await Loan.create({ user: req.user.name, BookId: book.id });  res.status(201).json({ ok: true });}); db.sync().then(async () => {  await Book.bulkCreate([{ title: 'تعلم JavaScript', copies: 2 }, { title: 'أساسيات الويب', copies: 1 }, { title: 'قواعد البيانات', copies: 1 }]);  app.listen(3000);});