{"id":23183446,"url":"https://github.com/whosramoss/clean-nextjs-github","last_synced_at":"2026-02-18T23:02:10.522Z","repository":{"id":268493984,"uuid":"904526723","full_name":"whosramoss/clean-nextjs-github","owner":"whosramoss","description":"Project implementing clean architecture consuming data from Github Api with NextJs","archived":false,"fork":false,"pushed_at":"2025-12-31T23:08:10.000Z","size":2913,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-05T11:56:50.259Z","etag":null,"topics":["clean-architecture","framer-motion","github","ioc","nextjs","react","tailwindcss","typescript","vitest","zod"],"latest_commit_sha":null,"homepage":"","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/whosramoss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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}},"created_at":"2024-12-17T04:16:58.000Z","updated_at":"2025-12-31T23:08:14.000Z","dependencies_parsed_at":"2025-06-22T01:34:33.356Z","dependency_job_id":"013302d2-e39d-401c-8e9b-942a22edc1d1","html_url":"https://github.com/whosramoss/clean-nextjs-github","commit_stats":null,"previous_names":["whosramoss/clean-nextjs-github"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/whosramoss/clean-nextjs-github","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whosramoss%2Fclean-nextjs-github","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whosramoss%2Fclean-nextjs-github/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whosramoss%2Fclean-nextjs-github/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whosramoss%2Fclean-nextjs-github/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/whosramoss","download_url":"https://codeload.github.com/whosramoss/clean-nextjs-github/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whosramoss%2Fclean-nextjs-github/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29597853,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-18T22:25:43.180Z","status":"ssl_error","status_checked_at":"2026-02-18T22:25:42.766Z","response_time":162,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["clean-architecture","framer-motion","github","ioc","nextjs","react","tailwindcss","typescript","vitest","zod"],"created_at":"2024-12-18T09:13:03.978Z","updated_at":"2026-02-18T23:02:10.508Z","avatar_url":"https://github.com/whosramoss.png","language":"TypeScript","readme":"\u003ca href=\"https://github.com/whosramoss/clean-nextjs-github\"\u003e\n  \u003cimg alt=\"clean-nextjs-github\" src=\"./public/thumbnail.png\" /\u003e\n  \u003ch1 align=\"center\"\u003eClean Nextjs Github\u003c/h1\u003e\n\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\n  Project implementing clean architecture consuming data from Github Api with NextJs\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/next.js-242424?style=for-the-badge\u0026logo=nextdotjs\" alt=\"Website\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React-563D7C?style=for-the-badge\u0026logo=React\u0026logoColor=fff\" alt=\"React\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Tailwind-FEFEFE?style=for-the-badge\u0026logo=tailwindcss\" alt=\"Tailwind\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Typescript-007acc?style=for-the-badge\u0026logo=typescript\u0026logoColor=fff\" alt=\"TypeScript\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Framer%20Motion-CC6699?style=for-the-badge\u0026logo=framer\" alt=\"Framer Motion\"\u003e\n  \u003cbr/\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Prettier-242424?style=for-the-badge\u0026logo=prettier\" alt=\"Prettier\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/eslint-0170FE?style=for-the-badge\u0026logo=eslint\" alt=\"eslint\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/zod-242424?style=for-the-badge\u0026logo=zod\" alt=\"zod\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/vitest-242424?style=for-the-badge\u0026logo=vitest\" alt=\"vitest\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/zustand-242424?style=for-the-badge\u0026logo=React\" alt=\"zustand\"\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\n\u003cbr/\u003e\n\n\n\n## How to install\n\n```bash\n  # Clone the project\n  git clone https://github.com/whosramoss/clean-nextjs-github/\n\n  # Go to the project directory\n  cd clean-nextjs-github\n\n  # Install dependencies\n  npm install\n\n  # Start the server \n  npm run dev\n```\n\n## About GitHub API\nThe GitHub API (https://api.github.com), is a powerful RESTful web service that allows developers to interact programmatically with GitHub's platform. It provides a wide range of endpoints for accessing and manipulating data stored on GitHub, such as repositories, issues, pull requests, users, organizations, and more.\nWith both REST and GraphQL options, the api allows developers to retrieve only the data they need, ensuring efficiency.\n\nThe following API endpoints are being used in the project. Each route corresponds to a specific action within the system :\n\n|  Name | Purpose | Method | Params |\n|---|---|---|---|\n|/events|Get events|GET|No Params|\n|/orgs|Get information about a specific organization|GET|Organization Name  (e.g.: [/orgs/google](https://api.github.com/orgs/google))|\n|/gists|Get information about a specific gist|GET|Gist Id - (e.g.: [/gists/public](https://api.github.com/gists/public))|\n|/search/topics|Searh information about a specific topic|GET|Topic Name - (e.g.: [/topics?q=google](https://api.github.com/search/topics?q=google))|\n|/users|Get information about a specific user|GET|User Name - (e.g.: [/users/whosramoss](https://api.github.com/users/whosramoss))|\n\n## About Clean Architecture\nSoftware design principle focused on organizing the code to improve maintainability, testability, and flexibility by clearly defining the responsibilities of different components. When applied to an application using the GitHub API, it ensures that the core business logic remains independent of external systems like the API.\n\nThis allows for easier updates, testing, and modifications, as changes to the API or other external dependencies do not directly impact the core logic. The approach promotes a modular and extensible design, making the application easier to maintain and scale over time.\n\n\n##  Layers and Structs\nFollowing the Clean Architecture principles, we separate our project into 4 layers inside the [layers](./src/layers/) folder:\n\n|  Name | Contains  | Purpose |\n|---|---|---|\n|[interface-adapters](./src/layers/interface-adapters/)|[controllers](./src/layers/interface-adapters/controllers)|The layer translates data between the core business logic and the UIs. It implements controllers to adapt data returned by the usecases into usable formats.|\n|[application](./src/layers/application/)|[interfaces](./src/layers/application/interfaces) \u0026 [usecases](./src/layers/application/usecases)|Contains the usecases that define the application's business processes and workflows. Usecases may also need data from external sources, so they interact with repositories or services implemented in the infrastructure layer to fulfill specific requirements.|\n|[infrastructure](./src/layers/infrastructure/)|[repositories](./src/layers/infrastructure/repositories) \u0026 [services](./src/layers/infrastructure/services)|The layer provides the implementation details for external systems like databases, APIs, and file storage. It's responsible for managing communication with external services and ensuring the core logic remains decoupled from specific technologies.|\n|[domain](./src/layers/domain/)|[errors](./src/layers/domain/errors) \u0026 [models](./src/layers/domain/models)|Contains models, schemas and errors that drive the system's behavior.|\n\nYou can explore the entire data search process, layer by layer, through the graph below:\n\n\u003ca href=\"https://github.com/whosramoss/clean-nextjs-github/blob/main/public/clean-arch.png\"\u003e\n  \u003cimg alt=\"clean-nextjs-github\" src=\"./public/clean-arch.png\" /\u003e\n\u003c/a\u003e\n\n## Overhead Structure View\n```bash\nsrc/\n├── app/\n|     └── _components/\n├── layers/\n|     ├── application/\n|     |     └── interfaces/\n|     |     └── usecases/\n|     ├── domain/\n|     |     └── errors/\n|     |     └── models/\n|     ├── infrastructure/\n|     |     └── repositories/\n|     |     └── services/\n|     └── interface-adapters/\n|           └── controllers/\n├── app/\n|     ├── di/\n|     ├── hooks/\n|     ├── styles/\n|     ├── ui/\n|     └── utils/\n└── tests/\n```\n\n## Dependency injection (DI) \nUsing [ioctopus](https://github.com/Evyweb/ioctopus)\n\n## Framework and Packages \n- [Next.js](https://nextjs.org/) \n- [TypeScript](https://www.typescriptlang.org/) \n- [Prettier](https://prettier.io/)\n- [ESLint](https://eslint.org/) \n- [Tailwind CSS](https://tailwindcss.com/) \n- [Framer Motion](https://framer.com/motion) \n- [Zod](https://zod.dev/) \n- [Vitest](https://vitest.dev/) \n- [ioctopus](https://github.com/Evyweb/ioctopus) \n\n\n# Screenshoots\n|   |   |\n|---|---|\n|  ![](./public/screenshoots/1.png) | ![](./public/screenshoots/2.png)  |\n|  ![](./public/screenshoots/3.png) | ![](./public/screenshoots/4.png)  |\n\n\n\n## Contributing \nIf you want to contribute to `clean-nextjs-github`, please make sure to review the [contribution guidelines](https://github.com/whosramoss/clean-nextjs-github/blob/master/CONTRIBUTING.md). This project makes use of [GitHub issues](https://github.com/whosramoss/clean-nextjs-github/issues) for tracking requests and bugs.\n\n## License \n\nMIT License. [LICENSE](./LICENSE)\n\n## Author \n\nGabriel Ramos ([@whosramoss](https://github.com/whosramoss))\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhosramoss%2Fclean-nextjs-github","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwhosramoss%2Fclean-nextjs-github","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhosramoss%2Fclean-nextjs-github/lists"}