{"id":22253280,"url":"https://github.com/willacosta/star-wars-characters","last_synced_at":"2026-04-20T05:32:01.035Z","repository":{"id":249128074,"uuid":"830575010","full_name":"WillACosta/star-wars-characters","owner":"WillACosta","description":"This project is built with Next.js that displays information about characters from the Star Wars universe. You can browse through a list of characters, view detailed information about each of them, and filter characters home world/planets.","archived":false,"fork":false,"pushed_at":"2024-07-28T15:16:00.000Z","size":5260,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T12:28:18.788Z","etag":null,"topics":["inversify","layered-architecture","nextjs","react","server-components","solid","star-wars","sw-api"],"latest_commit_sha":null,"homepage":"https://star-wars-characters-five.vercel.app/","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/WillACosta.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":"2024-07-18T14:31:20.000Z","updated_at":"2024-07-28T20:21:33.000Z","dependencies_parsed_at":"2024-07-25T18:10:42.027Z","dependency_job_id":null,"html_url":"https://github.com/WillACosta/star-wars-characters","commit_stats":null,"previous_names":["willacosta/star-wars-characters"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/WillACosta/star-wars-characters","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WillACosta%2Fstar-wars-characters","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WillACosta%2Fstar-wars-characters/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WillACosta%2Fstar-wars-characters/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WillACosta%2Fstar-wars-characters/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WillACosta","download_url":"https://codeload.github.com/WillACosta/star-wars-characters/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WillACosta%2Fstar-wars-characters/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32034601,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T00:18:06.643Z","status":"online","status_checked_at":"2026-04-20T02:00:06.527Z","response_time":94,"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":["inversify","layered-architecture","nextjs","react","server-components","solid","star-wars","sw-api"],"created_at":"2024-12-03T07:17:41.493Z","updated_at":"2026-04-20T05:32:01.014Z","avatar_url":"https://github.com/WillACosta.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### @star-wars-characters\n\nThis is a Next.js application that displays information about characters from the Star Wars universe. You can browse through a list of characters, view detailed information about each of them, and filter characters by planets. The application fetches data from [Star Wars API](https://swapi.dev/) and presents it in an easy-to-navigate interface.\n\nProduction URL: https://star-wars-characters-five.vercel.app/\n\n#\n\n- **[Features and Architecture](#features-and-architecture)**\n- **[Technical Resources](#technical-resources)**\n- **[Getting Started](#getting-started)**\n  - **[Running unit tests](#running-unit-tests)**\n\n\u003cbr\u003e\n\n![Screenshot showing the app](docs/images/screenshot.jpeg 'Screenshot showing the app')\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n# Features and Architecture\n\nThis project is built on top of concepts like [Layered Architecture](https://www.oreilly.com/library/view/software-architecture-patterns/9781491971437/ch01.html) and [Separation of Concerns](https://www.geeksforgeeks.org/separation-of-concerns-soc/). We have a main `feature` that shows a list of the characters from Star Wars universe provided by **Star Wars API**, also we provide an option to filter the results by planets.\n\nThis project uses a modularization approach, to organize and follow the best architecture guidelines, as you can see in the representation of the main layers below:\n\n\u003cbr/\u003e\n  \u003ccenter\u003e\u003cimg align=\"center\" src=\"docs/images/arch_layers.png\"\u003e\u003c/center\u003e\n\u003cbr/\u003e\u003cbr/\u003e\n\nTake a look into how the app's folder structure looks like:\n\n```\n.\n├── app                    # app level (framework)\n│\n├── components             # common ui components\n│   ├── atoms\n│   ├── layout\n│   └── molecules\n│\n├── modules\n│   ├── characters\n│   │    ├── data           # centralize changes in data and resolves external sources\n│   │    ├── di             # dependency injection container\n│   │    ├── domain         # business rules and models\n│   │    └── presentation   # ui code for this module\n│   │\n│   └─── core\n│        └── ...\n.\n```\n\n# Technical Resources\n\n- Layered architecture, SOLID and atomic design concepts\n- Usage of a simple state management with native hooks\n- Unit tests with Jest\n- Responsive version using Media Query rules\n- CI workflow with GitHub Actions\n- Usage of Tailwind CSS and CSS Motion Animations\n- Usage of Next.js, React and TypeScript\n- Accessibility implementations for UI components\n- Context API from React to distribute state across components\n- Next Api Route Handler\n\n# Getting Started\n\n1. First you need to setup your environment with Node.js, you can find more information in the [official docs](https://nodejs.org/en).\n\n- After setting up your Node env, you'll need to install `pnpm`, as this project uses it to manage dependencies.\n\n```shell\nbrew install pnpm # for macOS\nnpm i -g pnpm # using node\n```\n\n- For more options, head to the [documentation](https://pnpm.io/installation).\n\n2. After that, clone this repository in your local machine.\n\n```shell\ngit clone https://github.com/WillACosta/star-wars-characters.git\n```\n\n3. Go to the place you cloned the repository and runs the following command in the root path, to get a copy for `.env` file, and fill it with the proper values.\n\n```shell\ncp .env.example .env\n# open the file and add the SW API URL (Get on https://swapi.dev/)\n```\n\n4. Finally, run the following command in a terminal (still in the root path):\n\n```shell\npnpm dev\n```\n\n5. Now you should be able to visit `localhost:3000` and see the application in action.\n\n## Running unit tests\n\nJust run the following command in a terminal:\n\n```shell\npnpm test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillacosta%2Fstar-wars-characters","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwillacosta%2Fstar-wars-characters","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillacosta%2Fstar-wars-characters/lists"}