{"id":39151716,"url":"https://github.com/akiletour/inrage","last_synced_at":"2026-01-17T21:41:11.294Z","repository":{"id":37026843,"uuid":"258753953","full_name":"akiletour/inrage","owner":"akiletour","description":"A React NextJS portfolio driven by a WordPress back-end with GraphQL and Typescript.","archived":false,"fork":false,"pushed_at":"2026-01-12T16:59:13.000Z","size":32759,"stargazers_count":9,"open_issues_count":13,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-01-12T19:46:28.728Z","etag":null,"topics":["graphql","headless-wordpress","nextjs","react","reactjs","wordpress"],"latest_commit_sha":null,"homepage":"https://www.inrage.fr","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/akiletour.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2020-04-25T11:00:48.000Z","updated_at":"2025-12-05T10:47:43.000Z","dependencies_parsed_at":"2023-12-15T21:42:15.867Z","dependency_job_id":"16d972e4-0472-401a-85ba-b9c375bec5e9","html_url":"https://github.com/akiletour/inrage","commit_stats":null,"previous_names":[],"tags_count":48,"template":false,"template_full_name":null,"purl":"pkg:github/akiletour/inrage","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akiletour%2Finrage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akiletour%2Finrage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akiletour%2Finrage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akiletour%2Finrage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akiletour","download_url":"https://codeload.github.com/akiletour/inrage/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akiletour%2Finrage/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28518677,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T18:55:29.170Z","status":"ssl_error","status_checked_at":"2026-01-17T18:55:03.375Z","response_time":85,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["graphql","headless-wordpress","nextjs","react","reactjs","wordpress"],"created_at":"2026-01-17T21:41:10.256Z","updated_at":"2026-01-17T21:41:11.283Z","avatar_url":"https://github.com/akiletour.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# inRage: A React / NextJS portfolio of a French Web developer\n\n[![Last commit](https://img.shields.io/github/last-commit/akiletour/inrage)](https://github.com/akiletour/inrage/commits/main)\n![Stars](https://img.shields.io/github/stars/akiletour/inrage?label=%E2%AD%90%20Stars)\n[![Follow](https://img.shields.io/github/followers/akiletour?label=Please%20follow%20%20to%20support%20my%20work\u0026style=social)](https://github.com/Akiletour)\n\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"Portfolio inRage - Pascal GAULT\" src=\"./public/images/inline-logo.png\" /\u003e\n\u003c/p\u003e\n\nInitially developed with WordPress, I decided to refactor the whole project with Next.js.\n\nTo retrieve all projects (portfolio) and blog posts, I've used the WordPress API with [GraphQL](https://fr.wordpress.org/plugins/wp-graphql/).\n\nSince the project part has ACF custom fields. I use a second [GraphQL extension](https://www.wpgraphql.com/acf/) to manage them\n\n![inRage](./public/images/screenshot.png)\n\n## 📦 Stack\n\n### Core Technologies\n\n- `TypeScript`: v5.9+\n- `Next.js`: v16.0 (App Router)\n- `React`: v19.2\n- `Node.js`: v24+ (Volta)\n- `pnpm`: v10.3 (Package manager)\n\n### Styling \u0026 Animations\n\n- `Tailwind CSS`: v4.1+ with Typography plugin\n- `Framer Motion`: v12+ for page transitions and animations\n- `GSAP`: v3+ for advanced animations\n\n### Backend \u0026 Data\n\n- `WordPress`: v6.7+ (Headless CMS)\n- `GraphQL`: WPGraphQL for WordPress API communication\n- `WPGraphQL ACF`: For Advanced Custom Fields support\n- `SWR`: Client-side data fetching\n\n### Content \u0026 Forms\n\n- `MDX`: Blog posts with frontmatter support\n- `React Hook Form`: Form management\n- `Akismet`: Spam protection for contact form\n- `Mailjet`: Email service integration\n\n### DevOps \u0026 Monitoring\n\n- `Sentry`: Error tracking and performance monitoring\n- `Turbopack`: Build tool (dev \u0026 production)\n- `Jest`: Testing framework\n- `ESLint`: Next.js core + TypeScript + Prettier\n\n## ⚡️ Installation\n\nMake sure to use a recent version of Node.js (\u003e= v24).\n\n```bash\npnpm install\npnpm dev\n```\n\nYou can now access to the project with: http://localhost:3000\n\n### Available Commands\n\n- `pnpm dev` - Start development server with Turbopack (http://localhost:3000)\n- `pnpm build` - Build production application with Turbopack\n- `pnpm start` - Start production server\n- `pnpm lint` - Run ESLint for code quality\n- `pnpm type-check` - TypeScript type checking\n- `pnpm test` - Run Jest tests in watch mode\n\n## 🔧 Configuration\n\nTo correctly run this project, you must create an environment variable named `.env.local`.\n\n- `AKISMET_API_KEY`: Your Akismet API Key to check spam\n- `MJ_APIKEY_PUBLIC`: Your API Mailjet username\n- `MJ_APIKEY_PRIVATE`: Your API Mailjet password\n- `WORDPRESS_API_URL`: https://YOUR-WEBSITE/graphql\n- `WORDPRESS_AUTH_REFRESH_TOKEN`: If you need to access to your private and unpublished content\n- `WORDPRESS_PREVIEW_SECRET`: The token used by `/api/preview?secret=XXX`\n- `SLACK_WEBHOOK_URL`: If set, on each contact message, a Slack Webhook will be sent.\n\n## 🏗️ Architecture\n\n### Project Structure\n\n```\napp/\n├── (pages)/          # Route groups for main pages\n├── components/       # Reusable React components\n├── types/            # TypeScript type definitions (including GraphQL types)\n├── libs/             # Utility libraries and API functions\n├── utils/            # Helper utilities\n├── hooks/            # Custom React hooks\n├── layouts/          # Layout components\n└── graphql/          # GraphQL queries and mutations\n```\n\n### Path Aliases\n\nThe project uses TypeScript path aliases for cleaner imports:\n\n- `@/*` → `app/*`\n- `@component/*` → `app/components/*`\n- `@layout/*` → `app/layouts/*`\n- `@hook/*` → `app/hooks/*`\n- `@type/*` → `app/types/*`\n- `@lib/*` → `app/libs/*`\n- `@util/*` → `app/utils/*`\n- `@image/*` → `public/images/*`\n- `@graphql-query/*` → `app/graphql/*`\n\n### Key Features\n\n- **App Router**: Using Next.js 16 App Router architecture\n- **TypeScript Strict Mode**: Comprehensive type safety\n- **MDX Support**: Blog posts written in MDX with frontmatter\n- **Image Optimization**: Remote WordPress images served via i0.wp.com\n- **Preview Mode**: Draft content preview functionality\n- **Tailwind Custom Theme**: 8px increment spacing system with custom color palette\n- **Authentication**: JWT-based for accessing private WordPress content\n\n# 🔒️ WordPress Configuration\n\nin this part, we will configure the WordPress part to ensure the communication with Next.js\n\n## WPGraphQL plugin\n\nOnce the site is ready, you'll need to install the [WPGraphQL plugin](https://github.com/wp-graphql/wp-graphql). It will add GraphQL API to your WordPress site, which we'll use to query the posts. Follow these steps to install it:\n\nDownload the WPGraphQL repo as a ZIP archive.\n\n## Access private content\n\nFirst thing first, we'll create a JWT constant in our `wp-config.php`.\n\n```php\ndefine('GRAPHQL_JWT_AUTH_SECRET_KEY', 'XXXXXXX');\n```\n\nIt's recommended that you use something like the WordPress Salt generator ([https://api.wordpress.org/secret-key/1.1/salt/](https://api.wordpress.org/secret-key/1.1/salt/)) to generate a Secret.\n\nYou can install and activate the plugin like any WordPress plugin. Download the .zip from GitHub Release page of WPGraphql [JWT Authentication](https://github.com/wp-graphql/wp-graphql-jwt-authentication/releases) and add to your plugins directory, then activate.\n\nOnce installed, in the GraphQL IDE, run the following mutation :\n\n```graphql\nmutation Login {\n  login(\n    input: {\n      clientMutationId: \"uniqueId\"\n      password: \"your_password\"\n      username: \"your_username\"\n    }\n  ) {\n    refreshToken\n  }\n}\n```\n\nCopy the `refreshToken` returned by the mutation, then open `.env.local`, and make the following changes:\n\n- `WORDPRESS_AUTH_REFRESH_TOKEN` : set it to be the `refreshToken` you just received.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakiletour%2Finrage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakiletour%2Finrage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakiletour%2Finrage/lists"}