{"id":28987892,"url":"https://github.com/0xintuition/next-1ui","last_synced_at":"2025-06-24T21:15:38.266Z","repository":{"id":281772437,"uuid":"932937847","full_name":"0xIntuition/next-1ui","owner":"0xIntuition","description":"Scaffolding for Next.js and 1ui","archived":false,"fork":false,"pushed_at":"2025-03-26T01:13:11.000Z","size":389,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-26T02:24:52.565Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/0xIntuition.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}},"created_at":"2025-02-14T19:54:33.000Z","updated_at":"2025-03-26T01:13:15.000Z","dependencies_parsed_at":"2025-03-11T04:39:47.827Z","dependency_job_id":null,"html_url":"https://github.com/0xIntuition/next-1ui","commit_stats":null,"previous_names":["0xintuition/next-1ui"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/0xIntuition/next-1ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xIntuition%2Fnext-1ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xIntuition%2Fnext-1ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xIntuition%2Fnext-1ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xIntuition%2Fnext-1ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0xIntuition","download_url":"https://codeload.github.com/0xIntuition/next-1ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xIntuition%2Fnext-1ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261756802,"owners_count":23205165,"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":[],"created_at":"2025-06-24T21:15:37.570Z","updated_at":"2025-06-24T21:15:38.248Z","avatar_url":"https://github.com/0xIntuition.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Intuition Next.js Template\n\nA modern, feature-rich Next.js template with built-in GraphQL integration, React Query, and Tailwind CSS styling.\n\n## Overview\n\n- Built with Next.js 15, Turbopack, and 1UI components\n- TypeScript for type safety and better developer experience\n- GraphQL integration with automatic code generation for type-safe queries\n- React Query for efficient data fetching and state management\n- Tailwind CSS for utility-first styling\n- Fully responsive design with accessibility features\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18.x or higher\n- pnpm (recommended) or npm\n\n### Installation\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/yourusername/next-1ui.git\ncd next-1ui\n```\n\n2. Install dependencies:\n\n```bash\npnpm install\n# or\nnpm install\n```\n\n3. Generate GraphQL types and hooks:\n\n```bash\npnpm codegen:build\n# or\nnpm run codegen:build\n```\n\n4. Start the development server:\n\n```bash\npnpm dev\n# or\nnpm run dev\n```\n\n5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.\n\n## GraphQL Integration Tutorial\n\nThis template includes a complete GraphQL integration with automatic code generation. Here's how to use it:\n\n### 1. Understanding the Structure\n\nThe GraphQL integration is organized as follows:\n\n- `src/lib/graphql/queries/` - Contains GraphQL query definitions (`.graphql` files)\n- `src/lib/graphql/generated/` - Contains auto-generated TypeScript types and React hooks\n- `src/lib/graphql/client.ts` - GraphQL client configuration\n- `src/lib/graphql/constants.ts` - API endpoints and other constants\n- `codegen.ts` - Configuration for GraphQL code generation\n\n### 2. Finding Example Queries\n\nFor a comprehensive set of example queries to help you get started, visit the [Intuition GraphQL Examples documentation](https://tech.docs.intuition.systems/dev/graphql-examples). This resource provides:\n\n- Ready-to-use example queries with fragments included\n- Interactive Apollo Explorer links to experiment with each query\n- Access to the Intuition GraphQL package with pre-built fragments, queries, and typesafe hooks\n\nYou can also explore the [Intuition TypeScript monorepo](https://github.com/0xIntuition/intuition-ts/tree/main/packages/graphql) for more examples and the official GraphQL package that can be integrated into your React/Node applications. It is structured in the same way as this template, but with fragments and queries already built out. **The `0xintuition/graphql` is already installed into this template, so you can leverage the generated types and hooks.**\n\n### 3. Creating a New Query\n\n1. Create a new `.graphql` file in the `src/lib/graphql/queries/` directory:\n\n```graphql\n# src/lib/graphql/queries/example.graphql\nquery ExampleQuery($id: ID!) {\n  example(id: $id) {\n    id\n    name\n    description\n  }\n}\n```\n\n2. Run the code generation:\n\n```bash\npnpm codegen:build\n```\n\nThis will generate TypeScript types and React Query hooks for your new query.\n\n### 4. Using the Generated Hooks\n\nAfter code generation, you can import and use the generated hooks in your components:\n\n```tsx\nimport { useExampleQuery } from '@/lib/graphql'\n\nfunction ExampleComponent() {\n  const { data, isLoading, error } = useExampleQuery({ id: '123' }, { queryKey: ['example', '123'] })\n\n  if (isLoading) return \u003cdiv\u003eLoading...\u003c/div\u003e\n  if (error) return \u003cdiv\u003eError: {error.message}\u003c/div\u003e\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003e{data?.example?.name}\u003c/h1\u003e\n      \u003cp\u003e{data?.example?.description}\u003c/p\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### 5. Example: Atoms with Tags Query\n\nThe template includes an example query for fetching atoms with tags. Here's how it works:\n\n```tsx\n// In your component:\nconst {\n  data: atomsData,\n  error,\n  isLoading,\n} = useAtomsWithTagsQuery(\n  {\n    where: {\n      _and: [\n        // Filter conditions\n      ],\n    },\n    tagPredicateIds: ['3'],\n    orderBy: [{ vault: { total_shares: 'desc' } }],\n    verifiedPositionAddress: 'YOUR_ADDRESS',\n  },\n  {\n    queryKey: ['AtomsWithTags', 'YOUR_ADDRESS', selectedTags],\n  }\n)\n```\n\nThis query demonstrates several advanced features:\n\n- Filtering with complex conditions\n- Ordering results\n- Parameterizing queries with variables\n- Using React Query's caching with queryKey\n\n## Development Workflow\n\n### Code Generation\n\nThe template uses GraphQL Code Generator to create TypeScript types and React Query hooks from your GraphQL queries.\n\n- **One-time generation**: `pnpm codegen:build`\n- **Watch mode**: `pnpm codegen:watch` (automatically regenerates when queries change)\n\n### Available Scripts\n\n- `pnpm dev` - Start the development server with Turbopack\n- `pnpm build` - Build the application for production\n- `pnpm start` - Start the production server\n- `pnpm lint` - Run ESLint to check for code issues\n- `pnpm lint:fix` - Fix linting issues automatically\n- `pnpm typecheck` - Check TypeScript types\n- `pnpm codegen:build` - Generate GraphQL types and hooks\n- `pnpm codegen:watch` - Generate GraphQL types and hooks in watch mode\n\n## Resources\n\n- [Next.js Documentation](https://nextjs.org/docs)\n- [React Query Documentation](https://tanstack.com/query/latest/docs/react/overview)\n- [GraphQL Code Generator Documentation](https://the-guild.dev/graphql/codegen)\n- [Tailwind CSS Documentation](https://tailwindcss.com/docs)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xintuition%2Fnext-1ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0xintuition%2Fnext-1ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xintuition%2Fnext-1ui/lists"}