{"id":35909045,"url":"https://github.com/gminetoma/full-stack-boilerplate","last_synced_at":"2026-04-06T08:31:59.731Z","repository":{"id":323993443,"uuid":"1095526104","full_name":"gminetoma/full-stack-boilerplate","owner":"gminetoma","description":"Full-Stack TypeScript Boilerplate: React SSR + GraphQL API with Bun \u0026 Tailwind CSS","archived":false,"fork":false,"pushed_at":"2025-12-12T15:32:35.000Z","size":194,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-13T08:27:16.216Z","etag":null,"topics":["biome","bun","cypress","graphql","react","shadcn-ui","storybook","tailwind","tanstack","typescript","vite","yoga-graphql"],"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/gminetoma.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-13T07:01:52.000Z","updated_at":"2025-12-12T15:32:39.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/gminetoma/full-stack-boilerplate","commit_stats":null,"previous_names":["gminetoma/full-stack"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gminetoma/full-stack-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gminetoma%2Ffull-stack-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gminetoma%2Ffull-stack-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gminetoma%2Ffull-stack-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gminetoma%2Ffull-stack-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gminetoma","download_url":"https://codeload.github.com/gminetoma/full-stack-boilerplate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gminetoma%2Ffull-stack-boilerplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31464604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T21:22:52.476Z","status":"online","status_checked_at":"2026-04-06T02:00:07.287Z","response_time":112,"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":["biome","bun","cypress","graphql","react","shadcn-ui","storybook","tailwind","tanstack","typescript","vite","yoga-graphql"],"created_at":"2026-01-10T03:20:42.707Z","updated_at":"2026-04-06T08:31:59.725Z","avatar_url":"https://github.com/gminetoma.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Full-Stack TypeScript Monorepo\n\nA modern full-stack application built with TypeScript, React, and GraphQL using Bun as the runtime and package manager.\n\n## 🏗️ Architecture\n\nThis is a monorepo containing:\n\n- **`packages/graphql-api`** - GraphQL API server with subscriptions support\n- **`packages/react-app`** - React application with SSR and internationalization\n- **`packages/tools/cypress`** - End-to-end testing suite\n- **`packages/tools/storybook`** - Component documentation and development\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- [Bun](https://bun.sh) \u003e= 1.0.0\n\n### Installation\n\n```bash\nbun install\n```\n\n### Development\n\nRun both frontend and backend in separate terminals:\n\n```bash\n# Terminal 1 - Start the GraphQL API server\nbun api dev\n\n# Terminal 2 - Start the React app\nbun app dev\n```\n\nThe API will be available at `http://localhost:8080/graphql` and the React app at `http://localhost:3000`.\n\n## 📦 Workspace Commands\n\nThe monorepo uses workspace-scoped commands for convenience:\n\n```bash\n# React App commands\nbun app dev              # Start development server\nbun app build            # Build for production\nbun app codegen          # Generate GraphQL types\nbun app lint             # Run linter\nbun app test             # Run tests\n\n# GraphQL API commands\nbun api dev              # Start development server with hot reload\nbun api codegen          # Generate resolvers and types\nbun api lint             # Run linter\nbun api test             # Run tests\nbun api coverage         # Run tests with coverage\n\n# Testing tools\nbun cypress open         # Open Cypress test runner\nbun cypress run          # Run Cypress tests headlessly\n\n# Storybook\nbun storybook dev        # Start Storybook dev server\nbun storybook build      # Build Storybook\n\n# Root-level commands\nbun lint                 # Lint all packages\n```\n\n## 🛠️ Tech Stack\n\n### Core Technologies\n- **Runtime**: [Bun](https://bun.sh) - Fast all-in-one JavaScript runtime\n- **Language**: TypeScript with strict type checking\n- **Linting**: [Biome](https://biomejs.dev) - Fast formatter and linter\n\n### Backend (`graphql-api`)\n- **Web Server**: [Hono](https://hono.dev) - Lightweight web framework\n- **GraphQL**: [GraphQL Yoga](https://the-guild.dev/graphql/yoga-server) - Flexible GraphQL server\n- **Subscriptions**: [graphql-ws](https://github.com/enisdenjo/graphql-ws) - WebSocket protocol for GraphQL\n- **Configuration**: [Convict](https://github.com/mozilla/node-convict) - Environment configuration management\n\n### Frontend (`react-app`)\n- **Framework**: [React 19](https://react.dev) with Server-Side Rendering\n- **Routing**: [TanStack Router](https://tanstack.com/router) + [TanStack Start](https://tanstack.com/start)\n- **Data Fetching**: [TanStack Query](https://tanstack.com/query)\n- **Build Tool**: [Vite](https://vitejs.dev) with TypeScript paths support\n- **Styling**: [Tailwind CSS v4](https://tailwindcss.com)\n- **UI Components**: [shadcn/ui](https://ui.shadcn.com) + [Radix UI](https://www.radix-ui.com)\n- **Animations**: [Motion](https://motion.dev)\n- **i18n**: [i18next](https://www.i18next.com) with React integration\n\n### Testing \u0026 Development Tools\n- **Unit Testing**: [Vitest](https://vitest.dev) with coverage support\n- **E2E Testing**: [Cypress](https://www.cypress.io)\n- **Component Development**: [Storybook](https://storybook.js.org)\n\n## 📝 Code Generation\n\nBoth packages use GraphQL Code Generator to maintain type safety:\n\n```bash\n# Generate types for both packages\nbun api codegen \u0026\u0026 bun app codegen\n```\n\nThis generates:\n- **API**: TypeScript resolvers and type definitions from GraphQL schemas\n- **App**: Type-safe GraphQL client hooks and operations\n\n## 🌍 Internationalization\n\nThe React app supports multiple languages (English and Portuguese by default). Translations are located in:\n- `packages/react-app/public/locales/en/`\n- `packages/react-app/public/locales/pt/`\n\n## 🎨 Styling\n\nThe project uses Tailwind CSS v4 with the shadcn/ui component system. Add new components:\n\n```bash\nbun app shadcn add \u003ccomponent-name\u003e\n```\n\n## 🧪 Testing\n\n```bash\n# Unit tests\nbun api test             # Backend tests\nbun app test             # Frontend tests\n\n# Coverage reports\nbun api coverage\nbun app coverage\n\n# E2E tests\nbun cypress open         # Interactive mode\nbun cypress run          # CI mode\n```\n\n## 📂 Project Structure\n\n```\n.\n├── packages/\n│   ├── graphql-api/         # GraphQL backend\n│   │   ├── config/          # Configuration management\n│   │   ├── src/\n│   │   │   ├── entry/       # Server entry point\n│   │   │   ├── graphql/     # Schema and resolvers\n│   │   │   └── utils/       # Shared utilities\n│   │   └── tests/           # API tests\n│   │\n│   ├── react-app/           # React frontend\n│   │   ├── config/          # App configuration\n│   │   ├── public/          # Static assets and translations\n│   │   ├── src/\n│   │   │   ├── components/  # React components\n│   │   │   ├── graphql/     # Generated GraphQL client\n│   │   │   ├── layouts/     # Layout components\n│   │   │   ├── pages/       # Page components\n│   │   │   ├── routes/      # TanStack Router routes\n│   │   │   └── lib/         # Utilities and helpers\n│   │   └── tests/           # Frontend tests\n│   │\n│   └── tools/\n│       ├── cypress/         # E2E tests\n│       └── storybook/       # Component documentation\n│\n├── biome.json              # Biome configuration\n├── graphql.config.json     # GraphQL IDE configuration\n└── package.json            # Workspace configuration\n```\n\n## 🔧 Configuration\n\n### Environment Variables\n\nCreate `.env` files in the respective packages:\n\n**`packages/graphql-api/.env`**:\n```env\nNODE_ENV=development\nPORT=8080\nHOST_NAME=localhost\nPROTOCOL=http\nGRAPHQL_ENDPOINT=/graphql\nGRAPHIQL_ENDPOINT=/ws\n```\n\n**`packages/react-app/.env`**:\n```env\n# Add your React app environment variables here\nPORT=5173\nPROTOCOL=http\nHOST_NAME=localhost\nNODE_ENV=development\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgminetoma%2Ffull-stack-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgminetoma%2Ffull-stack-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgminetoma%2Ffull-stack-boilerplate/lists"}