{"id":25517453,"url":"https://github.com/albert-vanderboom/taskflow-web-app-demo","last_synced_at":"2025-12-14T16:30:16.277Z","repository":{"id":278348876,"uuid":"935324615","full_name":"Albert-Vanderboom/taskflow-web-app-demo","owner":"Albert-Vanderboom","description":"A modern web application demo for teaching software engineering","archived":false,"fork":false,"pushed_at":"2025-02-19T09:11:22.000Z","size":97,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-19T10:24:35.254Z","etag":null,"topics":["demo","fastapi","python","typescript","vue","web-development"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Albert-Vanderboom.png","metadata":{"files":{"readme":"README.en.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-19T09:06:16.000Z","updated_at":"2025-02-19T09:16:29.000Z","dependencies_parsed_at":"2025-02-19T10:34:51.987Z","dependency_job_id":null,"html_url":"https://github.com/Albert-Vanderboom/taskflow-web-app-demo","commit_stats":null,"previous_names":["albert-vanderboom/taskflow-web-app-demo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Albert-Vanderboom%2Ftaskflow-web-app-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Albert-Vanderboom%2Ftaskflow-web-app-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Albert-Vanderboom%2Ftaskflow-web-app-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Albert-Vanderboom%2Ftaskflow-web-app-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Albert-Vanderboom","download_url":"https://codeload.github.com/Albert-Vanderboom/taskflow-web-app-demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239681454,"owners_count":19679592,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["demo","fastapi","python","typescript","vue","web-development"],"created_at":"2025-02-19T15:22:15.026Z","updated_at":"2025-12-14T16:30:16.222Z","avatar_url":"https://github.com/Albert-Vanderboom.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TaskFlow: Web App Demo\n\n[简体中文](./README.md) | English\n\nThis is a web application demo project developed for the Software Engineering course at Fudan University. The author developed this project to demonstrate modern web development best practices and engineering methods to students.\n\nTaskFlow is a classic CRUD (Create, Read, Update, Delete) application example that demonstrates how to build a complete full-stack web application using modern technology stack.\n\n## Project Overview\n\nThis is a complete full-stack application example that demonstrates:\n\n- 🏗️ Modern web application infrastructure\n- 📝 Frontend and backend separation development pattern\n- ⚡ RESTful API design and implementation\n- 🔒 Type-safe code practices\n- ♻️ Complete CRUD operation flow\n\n## System Architecture\n\n### Technology Stack\n\n#### Frontend\n\n- **Framework**: Vue 3 + TypeScript\n- **Build Tool**: Vite\n- **UI Components**: Element Plus\n- **State Management**: Pinia\n- **Router**: Vue Router\n- **HTTP Client**: Axios\n- **Code Standard**: ESLint + Prettier\n\n#### Backend\n\n- **Framework**: FastAPI\n- **Database**: SQLite\n- **ORM**: SQLAlchemy\n- **API Documentation**: Swagger UI / ReDoc\n- **Type Checking**: Pydantic\n- **CORS Support**: CORSMiddleware\n\n### Frontend-Backend Interaction Flow\n\n1. Data Flow\n\n   ```\n   Frontend (Vue.js)                    Backend (FastAPI)                Database (SQLite)\n   +-----------+                    +------------+                +-----------+\n   |           |  HTTP Request      |            |  SQL Query     |           |\n   | UI        | ----------------\u003e | REST API   | -------------\u003e |  Tables   |\n   |           | \u003c---------------- |            | \u003c------------- |           |\n   +-----------+  JSON Response    +------------+  Query Result  +-----------+\n   ```\n2. Key Technical Points\n\n   - **Type Safety**: End-to-end type checking with frontend TypeScript + backend Pydantic\n   - **State Management**: Centralized state management with Pinia\n   - **API Design**: RESTful API design\n   - **Cross-Origin**: CORS middleware configuration\n\n## Project Structure\n\n```\ntaskflow-web-app-demo/\n├── frontend/                # Frontend project directory\n│   ├── src/                # Source code\n│   │   ├── assets/        # Static assets\n│   │   ├── components/    # Common components\n│   │   ├── stores/        # Pinia state management\n│   │   ├── types/         # TypeScript type definitions\n│   │   ├── views/         # Page components\n│   │   └── App.vue        # Root component\n│   └── package.json       # Dependencies\n└── backend/                # Backend project directory\n    ├── app/               # Application code\n    │   ├── models/       # Data models\n    │   ├── schemas/      # Pydantic models\n    │   ├── crud/         # Database operations\n    │   └── api/          # API routes\n    ├── requirements.txt   # Python dependencies\n    └── main.py           # Entry file\n```\n\n## Development Environment Setup\n\n### Requirements\n\n- Node.js \u003e= 16\n- Anaconda or Miniconda\n- Git\n\n### Quick Start\n\n1. Clone the project\n\n```bash\ngit clone https://github.com/Albert-Vanderboom/taskflow-web-app-demo.git\ncd taskflow-web-app-demo\n```\n\n2. Start backend\n\n```bash\ncd backend\n\n# Create and activate conda environment\nconda env create -f environment.yml\nconda activate crud-app\n\n# Start service\npython -m uvicorn app.main:app --reload\n```\n\n3. Start frontend\n\n```bash\ncd frontend\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n```\n\n4. Access application\n\n- Frontend: `http://localhost:5173`\n- API Documentation: `http://localhost:8000/docs`\n\n#### Common Issues\n\n1. If conda package installation fails, try:\n\n   ```bash\n   # Add conda-forge channel\n   conda config --add channels conda-forge\n   # Retry installation\n   conda env create -f environment.yml\n   ```\n2. If you encounter Node version issues, try:\n\n   ```bash\n   # Install node\n   nvm install --lts\n   # Set node version\n   nvm use --lts\n   ```\n\n## Learning Resources\n\n- [Vue 3 Documentation](https://vuejs.org/guide/introduction.html)\n- [FastAPI Documentation](https://fastapi.tiangolo.com/)\n- [Element Plus Documentation](https://element-plus.org/)\n- [Pinia Documentation](https://pinia.vuejs.org/)\n- [Vue Router Documentation](https://router.vuejs.org/)\n- [Axios Documentation](https://axios-http.com/)\n\n## Contact\n\n- Project Link: [https://github.com/Albert-Vanderboom/taskflow-web-app-demo](https://github.com/Albert-Vanderboom/taskflow-web-app-demo)\n- Author Email: [2001dwt@gmail.com](mailto:2001dwt@gmail.com)\n\n## Acknowledgments\n\nSpecial thanks to:\n\n- [Cursor IDE](https://cursor.sh/) - This project utilized Cursor IDE's AI-assisted programming features during development\n- All teachers and students of Fudan University's Software Engineering course for their support of this teaching project\n\nThis project also demonstrates how to efficiently develop software using modern AI tools. As a prompt engineer, I completed this demo project through collaboration with Cursor AI.\n\n---\n\n🌟 If this teaching demo project helps you, please give it a star!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbert-vanderboom%2Ftaskflow-web-app-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falbert-vanderboom%2Ftaskflow-web-app-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbert-vanderboom%2Ftaskflow-web-app-demo/lists"}