{"id":32984842,"url":"https://github.com/frourio-framework/template-frouvel","last_synced_at":"2025-11-13T07:01:58.613Z","repository":{"id":323734793,"uuid":"1092993973","full_name":"frourio-framework/template-frouvel","owner":"frourio-framework","description":"🛡️ The production ready frourio-based fullstack typescript framework that is simple, elegant, and fun for php artisans.","archived":false,"fork":false,"pushed_at":"2025-11-11T19:16:06.000Z","size":2179,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-11T21:12:07.265Z","etag":null,"topics":["fastify","frourio","nextjs","railway","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/frourio-framework.png","metadata":{"files":{"readme":"README.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-09T17:50:38.000Z","updated_at":"2025-11-11T19:16:13.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/frourio-framework/template-frouvel","commit_stats":null,"previous_names":["frourio-framework/template-frouvel"],"tags_count":null,"template":true,"template_full_name":null,"purl":"pkg:github/frourio-framework/template-frouvel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frourio-framework%2Ftemplate-frouvel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frourio-framework%2Ftemplate-frouvel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frourio-framework%2Ftemplate-frouvel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frourio-framework%2Ftemplate-frouvel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frourio-framework","download_url":"https://codeload.github.com/frourio-framework/template-frouvel/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frourio-framework%2Ftemplate-frouvel/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":284170493,"owners_count":26959115,"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","status":"online","status_checked_at":"2025-11-13T02:00:06.582Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["fastify","frourio","nextjs","railway","typescript"],"created_at":"2025-11-13T07:00:50.001Z","updated_at":"2025-11-13T07:01:58.604Z","avatar_url":"https://github.com/frourio-framework.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"docs/frourio_framework.svg\" alt=\"Frourio Framework\" width=\"320\" height=\"320\"\u003e\n\u003c/p\u003e\n\n# Frourio Framework\n\nA full-stack TypeScript framework combining Next.js frontend with Fastify backend, featuring type-safe API communication and modern development tools.\n\n## Architecture Overview\n\nThis repository follows a monorepo structure with clear separation between frontend and backend applications:\n\n```\nfrourio-framework/\n├── frontend-web/          # Next.js frontend application\n├── backend-api/           # Fastify backend API\n├── scripts/              # Deployment and utility scripts\n├── Docker/               # Docker configuration files\n└── docker-compose.yml    # Local development database\n```\n\n### Technology Stack\n\n#### Backend API (`backend-api/`)\n\n- **Framework**: [Fastify](https://fastify.dev/) - High-performance Node.js web framework\n- **Language**: TypeScript with strict type checking\n- **Database**: PostgreSQL with [Prisma](https://prisma.io/) ORM\n- **API Generation**: [Frourio](https://frourio.com/) for type-safe API development\n- **Authentication**: JWT with admin/user role separation\n- **Testing**: Vitest with Prisma Fabbrica for test data generation\n- **Build Tool**: ESBuild for fast compilation\n\n#### Frontend Web (`frontend-web/`)\n\n- **Framework**: [Next.js 15](https://nextjs.org/) with React 19\n- **Language**: TypeScript with strict type checking\n- **Styling**: [Tailwind CSS](https://tailwindcss.com/) with [Flowbite](https://flowbite.com/) components\n- **State Management**: [Jotai](https://jotai.org/) for atomic state management\n- **Data Fetching**: [SWR](https://swr.vercel.app/) with type-safe API client\n- **Forms**: React Hook Form with Zod validation\n- **Storage**: Supabase integration for file uploads\n- **Testing**: Vitest for unit testing\n\n#### Shared Infrastructure\n\n- **Type Safety**: Aspida for end-to-end type safety between frontend and backend\n- **Code Generation**: Automatic API client and path generation\n- **Database**: PostgreSQL with Docker for local development\n- **Deployment**: Support for Railway, AWS Amplify, and ECS\n\n### Key Features\n\n#### Type-Safe API Communication\n\n- **Aspida**: Generates type-safe API clients from backend route definitions\n- **Shared Types**: Common types and constants shared between frontend and backend\n- **Automatic Generation**: API clients and route paths generated automatically\n\n#### Authentication System\n\n- **Dual Role System**: Separate authentication for admin and user roles\n- **JWT Tokens**: Secure token-based authentication\n- **Middleware**: Route protection with role-based access control\n\n#### Database Management\n\n- **Prisma ORM**: Type-safe database operations with automatic migrations\n- **Code Generation**: Database models and factory functions auto-generated\n- **Seeding**: Separate seed files for development and production environments\n\n#### Development Experience\n\n- **Hot Reload**: Both frontend and backend support hot reloading\n- **Parallel Development**: Run both applications simultaneously with `npm run dev`\n- **Type Checking**: Continuous type checking across the entire stack\n- **Linting**: Consistent code style with ESLint and Prettier\n\n### Directory Structure\n\n#### Backend API Structure\n\n```\nbackend-api/\n├── api/                  # API route definitions (Frourio)\n├── app/                  # Application utilities and helpers\n├── config/               # Configuration files (CORS, JWT, etc.)\n├── domain/               # Domain models and business logic\n├── middleware/           # Authentication and request middleware\n├── prisma/               # Database schema, migrations, and seeds\n├── service/              # Application services and Fastify setup\n└── tests/                # Test files and setup\n```\n\n#### Frontend Web Structure\n\n```\nfrontend-web/\n├── src/\n│   ├── components/       # Reusable UI components\n│   ├── features/         # Feature-specific code (auth, UI hooks)\n│   ├── layouts/          # Page layout components\n│   ├── pages/            # Next.js pages and API routes\n│   ├── styles/           # Global styles and Tailwind config\n│   ├── utils/            # Utility functions and API clients\n│   └── views/            # Page view components\n└── public/               # Static assets\n```\n\n## Ecosystem\n\n- [frourio-framework-prisma-generators](https://github.com/InterfaceX-co-jp/frourio-framework-prisma-generators)\n  - prisma generator that keeps your DX and speed 🚀\n\n## Root Commands\n\n```bash\n# At root dir\ncd frourio-framework\n```\n\nSetup .env\n\n```bash\n# With makefile\nmake env-setup-local\n```\n\nRun the app\n\n```bash\n# Let's run DB containers to begin with\ndocker-compose up -d\n\n# Run npm install for all the directories\nmake install\n\n# Run dev server for both frontend \u0026 backend\nnpm run dev\n```\n\n## Use Supabase At Local Environment\n\n①\n\n```bash\n# move directory to frontend\ncd frontend-web\n```\n\n②\n\n```bash\n# initialize supabase cofiguration\nnpx supabase init\n```\n\n③\n\n```bash\n# Let's staet Supabase\nnpx supabase start\n```\n\nAfter a moment, local keys and configurations will be generated.\n\n④\n\nCreate fields for \"NEXT_PUBLIC_SUPABASE_URL\" and \"NEXT_PUBLIC_SUPABASE_ANON_KEY\" in your .env.local file,\nand set their values to the \"API URL\" and \"anon key\", respectively.\n\n⑤\n\nAccess the Studio URL for initial setup.\n\n    1)Navigate to the Storage section and create a new bucket.\n\n    2)Go to the Policies section under Storage and create your storage policies (make sure to pay attention to the bucket name, folder name, and allowed file extensions, as they are case-sensitive).\n\n⑥\n\nFinally, call the API to perform actual uploads and other operations.\n\n## Enter ECS tasks in the Staging environment via SSM Session Manager\n\n### What you need\n\n- AWS CLI\n- [AWS SSM Plugin](https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/session-manager-working-with-install-plugin. html)\n\n### Reference.\n\n- [SSH connection to ECS Fargate using SSM (Qiita)](https://qiita.com/kouji0705/items/005ea6d7c21ddd24ebb3)\n\n```bash\n$ cd frourio-framework\n$ sh . /scripts/ecs_exec_stg -t ((task-id)) # Example) . /scripts/ecs_exec_stg -t 941f8694308b4adea44cb07ff9e50c30\n```\n\n## Deployment config\n\n### Railway\n\n[![Deploy on Railway](https://railway.com/button.svg)](https://railway.com/template/yiamej?referralCode=NtAl-c)\n\n### AWS Amplify(frontend)\n\n```yml\nversion: 1\napplications:\n  - frontend:\n      phases:\n        preBuild:\n          commands:\n            - cd ../\n            - npm install --prefix frontend-web\n            - npm install --prefix backend-api\n        build:\n          commands:\n            - cd frontend-web\n            - npm run build\n      artifacts:\n        baseDirectory: .next\n        files:\n          - \"**/*\"\n      cache:\n        paths:\n          - .next/cache/**/*\n          - .npm/**/*\n    appRoot: frontend-web\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrourio-framework%2Ftemplate-frouvel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrourio-framework%2Ftemplate-frouvel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrourio-framework%2Ftemplate-frouvel/lists"}