{"id":14968138,"url":"https://github.com/luovtyrell/star-wars","last_synced_at":"2026-01-05T04:39:16.572Z","repository":{"id":249964747,"uuid":"832031126","full_name":"Luovtyrell/Star-Wars","owner":"Luovtyrell","description":"A dynamic React webpage that presents information about spacecraft from the Star Wars universe using SWAPI. Users can browse a list of ships, view detailed information on individual spacecraft, and manage access through authentication.","archived":false,"fork":false,"pushed_at":"2024-09-13T13:10:22.000Z","size":26649,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-31T12:51:25.539Z","etag":null,"topics":["context","css3","custom-hook","daisy-ui","eslint","firebase","image-server","javascript","jsx","postcss","prettier","prop-types","react","reactrouterdom","swapi-api","tailwind-css","vite"],"latest_commit_sha":null,"homepage":"https://star-wars-kappa-sepia.vercel.app/","language":"JavaScript","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/Luovtyrell.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-22T08:06:59.000Z","updated_at":"2024-09-13T13:10:25.000Z","dependencies_parsed_at":"2024-09-23T01:30:39.931Z","dependency_job_id":"567a876e-4beb-4f92-954e-a1dbbac6d6b7","html_url":"https://github.com/Luovtyrell/Star-Wars","commit_stats":{"total_commits":37,"total_committers":2,"mean_commits":18.5,"dds":0.1351351351351351,"last_synced_commit":"4fa2aacb492efc6af1d2f3fb6df780af767626cb"},"previous_names":["luovtyrell/star-wars"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Luovtyrell%2FStar-Wars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Luovtyrell%2FStar-Wars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Luovtyrell%2FStar-Wars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Luovtyrell%2FStar-Wars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Luovtyrell","download_url":"https://codeload.github.com/Luovtyrell/Star-Wars/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238229940,"owners_count":19437723,"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":["context","css3","custom-hook","daisy-ui","eslint","firebase","image-server","javascript","jsx","postcss","prettier","prop-types","react","reactrouterdom","swapi-api","tailwind-css","vite"],"created_at":"2024-09-24T13:39:22.513Z","updated_at":"2025-10-26T00:31:00.354Z","avatar_url":"https://github.com/Luovtyrell.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://img.shields.io/badge/Read%20Time-7%20min-green?style=flat-square\" width=\"100\"\u003e\n\n\n# React Star Wars Web\n\n\u003cdiv align=\"center\"\u003e\u003cimg src=\"./public/gif/sampleWeb.gif\"\u003e\u003c/div\u003e \n\u003cbr\u003e\n\nThe project consists of developing a web application to visualize information about the Star Wars spacecraft, using React and various associated technologies like axios, react-router-dom, among others which will be specified later. The goal is to create an interface that allows users to browse a list of ships, view individual details, and manage access via authentication.\n\n\u003cbr\u003e\n\n## Table of Contents\n\n1. [Project Overview](#project-overview)\n2. [Technologies](#technologies)\n3. [Installation](#installation)\n4. [Main Features](#main-features)\n5. [Star Wars API (SWAPI)](#star-wars-api-swapi)\n6. [Img project gallery](#img-project-gallery)\n7. [Further steps](#further-steps)\n8. [Contributing](#contributing)\n9. [Contact](#contact)\n10. [Author](#author)\n\n\u003cbr\u003e\n\n## Project Overview\n\n\u003cdetails\u003e\n  \n```\ndist/\nnode_modules/\npublic\n├── gif/\n├── screenshots/\nsrc/\n├── assets/\n│   ├── fonts/\n│   │   ├── Space_Mono/\n│   │   └── fonts.css\n│   ├── img/\n│   │   ├── skeletonCrew.jpg\n│   │   ├── starry-black-night.jpg\n│   │   └── stars-black.jpg\n│   ├── png/\n│   │   ├── facebook.png\n│   │   ├── instagram.png\n│   │   ├── logout.png\n│   │   ├── register.png\n│   │   ├── user.png\n│   │   └── x.png\n│   └── svg/\n│       ├── icons8-youtube-50.svg\n│       ├── react-logo.svg\n│       ├── star-wars-4.svg\n│       ├── star-wars-46.svg\n│       └── tiktok.svg\n├── components/\n│   ├── Footer/\n│   │   └── Footer.jsx\n│   ├── Header/\n│   │   └── Header.jsx\n│   ├── LoginLogout/\n│   │   └── LoginLogout.jsx\n│   ├── Navbar/\n│   │   └── Navbar.jsx\n│   ├── PilotsDetailCard/\n│   │   └── PilotsDetailCard.jsx\n│   ├── PilotsListCard/\n│   │   ├── PilotsListCard.css\n│   │   └── PilotsListCard.jsx\n│   ├── SocialLinks/\n│   │   └── SocialLinks.jsx\n│   ├── SrarshipDetailCard/\n│   │   └── StarshipDetailCard.jsx\n│   └── StarshipListCard/\n│       ├── StarshipListCard.css\n│       └── StarshipListCard.jsx\n├── context/\n│   ├── AuthContext.jsx\n│   ├── StarWarsContext.jsx\n│   └── StarWarsProvider.jsx\n├── data/\n│   ├── pilotProperties.json\n│   └── starshipProperties.json\n├── helpers/\n│   ├── findStarship.js\n│   ├── getFromUrl.js\n│   └── imageHelpers.js\n├── hooks/\n│   └── useData.jsx\n├── pages/\n│   ├── Home/\n│   │   └── Home.jsx\n│   ├── LoginPage/\n│   │   ├── LoginPage.css\n│   │   └── LoginPage.jsx\n│   ├── PilotsDetailPage/\n│   │   └── PilotsDetailPage.jsx\n│   ├── PilotsPage/\n│   │   └── PilotsPage.jsx\n│   ├── RegisterPage/\n│   │   └── RegisterPage.jsx\n│   ├── StarshipDetailPage/\n│   │   └── StarshipDetailPage.jsx\n│   └── StarshipsPage/\n│       └── StarshipsPage.jsx\n├── routes/\n│   ├── AppRoutes.jsx\n│   └── privateRoute.jsx\n└── services/\n│   ├── firebase.js\n│   └── swapiService.jsx\n├── App.jsx\n├── index.css\n└── main.jsx\n.eslintrc.cjs\n.gitignore\nindex.html\npackage-lock.json\npackage.json\npostcss.config.js\nREADME.md\ntailwind.config.js\nvercel.config.js\nvite.config.js\n```\n\u003c/details\u003e\n\u003cbr\u003e\n\n## Technologies\n\n- **Frontend:**\n\n  \u003cimg src=\"https://img.shields.io/badge/React-61DAFB?logo=react\u0026logoColor=000\u0026style=flat-square\" alt=\"React Badge\" style=\"height:25px;\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript\u0026logoColor=000\u0026style=flat-square\" alt=\"JavaScript Badge\" style=\"height:25px;\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React%20Router%20DOM-CA4245?logo=reactrouter\u0026logoColor=fff\u0026style=flat-square\" alt=\"React Router DOM Badge\" style=\"height:25px;\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Tailwind%20CSS-06B6D4?logo=tailwindcss\u0026logoColor=fff\u0026style=flat-square\" alt=\"Tailwind CSS Badge\" style=\"height:25px;\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/DaisyUI-5A0EF8?logo=daisyui\u0026logoColor=fff\u0026style=flat-square\" alt=\"DaisyUI Badge\" style=\"height:25px;\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/CSS3-1572B6?logo=css3\u0026logoColor=fff\u0026style=flat-square\" alt=\"CSS3 Badge\" style=\"height:25px;\"\u003e\n  \u003cbr\u003e\u003cbr\u003e\n\n- **Tools and Libraries:**\n\n  \u003cimg src=\"https://img.shields.io/badge/Vite-646CFF?logo=vite\u0026logoColor=fff\u0026style=flat-square\" alt=\"Vite Badge\" style=\"height:25px;\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/PostCSS-DD3A0A?logo=postcss\u0026logoColor=fff\u0026style=flat-square\" alt=\"PostCSS Badge\" style=\"height:25px;\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/ESLint-4B32C3?logo=eslint\u0026logoColor=fff\u0026style=flat-square\" alt=\"ESLint Badge\" style=\"height:25px;\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Prettier-F7B93E?logo=prettier\u0026logoColor=000\u0026style=flat-square\" alt=\"Prettier Badge\" style=\"height:25px;\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/PropTypes-4ba7bc?style=for-the-badge\u0026logo=react\u0026logoColor=white\" alt=\"PropTypes\" style=\"height:25px;\"\u003e\n  \u003cbr\u003e\u003cbr\u003e\n\n- **Backend auth service:**\n\n  \u003cimg src=\"https://img.shields.io/badge/Firebase-DD2C00?logo=firebase\u0026logoColor=fff\u0026style=flat-square\" alt=\"Firebase Badge\" style=\"height:25px;\"\u003e\n  \n\u003cbr\u003e\n\n## Installation\n\nTo get started with the Star Wars Web Application locally, follow these steps:\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/Luovtyrell/Star-Wars.git\n   ```\n\n2. Navigate to the project directory:\n\n   ```bash\n   cd Star-Wars\n   ```\n\n3. Install dependencies:\n\n   ```bash\n   npm install\n   ```\n\n4. Set up Firebase by creating a `.env` file in the root directory and adding your Firebase configuration. The configuration should look something like this:\n\n   ```\n   REACT_APP_FIREBASE_API_KEY=your_firebase_api_key\n   REACT_APP_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain\n   REACT_APP_FIREBASE_PROJECT_ID=your_firebase_project_id\n   REACT_APP_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket\n   REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id\n   REACT_APP_FIREBASE_APP_ID=your_firebase_app_id\n   ```\n\n5. Start the development server:\n\n   ```bash\n   npm start\n   ```\n\u003cbr\u003e\n\n\n## Main Features\n\n| **Feature** | **Description** |\n|-------------|-----------------|\n| **Starship List** | Displayed a list of starships on the main screen, showing essential data: Name and Model of each starship. |\n| **Load More** | Implemented a \"view more\" button to load additional starships and pilots. |\n| **Starship Detail View** | Created a detailed view for each starship including their photo. Users can access details by clicking on a starship in the list. The view also shows who pilots the starship and in which films it appears including their photo. |\n| **Pilot Detail View** | Created a new component to display detailed information about the pilot, including their photo, and styled it appropriately. |\n| **Modern Design** | Modernized the site’s design to closely match the official Star Wars website. |\n| **Welcome Page** | Implemented a welcome page with a button to access the main starship list and pilots, using React routing for navigation. |\n| **User Management** | Developed a fake backend with Firebase for user management. Implemented Login and Register screens, ensuring users cannot register with the same email and are logged in immediately after registration. |\n| **Route Protection** | Protected routes so that only registered users can view the starship list and pilot list. Redirected unauthenticated users to the login page and then back to the originally requested page upon successful login. |\n| **Film and Pilots Appearances** | Added information on which pilots have piloted each starship and in which films the starships appeared, including photos of the pilots and film poster. |\n| **Context \u0026 Provider** | Implemented Context and Provider for global state management. \n| **`useData` Hook** | A custom React hook designed for managing data fetching from APIs. It simplifies the process of retrieving data from single or multiple endpoints and handles the loading state, data, and errors. This hook uses `useEffect` to perform asynchronous data fetching and updates the state based on the API responses. It supports both single and multiple endpoint requests and ensures that the data is properly formatted and errors are handled gracefully. |\n| **`fetchData` Function** | A utility function for making HTTP GET requests using Axios. It fetches data from a specified URL and includes error handling to provide user-friendly error messages if the request fails. This function sets custom headers and manages the response data, ensuring that any issues encountered during the data retrieval process are communicated effectively. |\n\n\u003cbr\u003e\n\n## Star Wars API (SWAPI)\n\nIn this project, I have utilized the [Star Wars API](https://swapi.dev/) to fetch information related to starships, films, pilots and characters. Additionally, I have used the [Star Wars Visual Guide](https://starwars-visualguide.com/#/) as a server for retrieving images related to Star Wars characters, starships, films, and other elements. This server provides image resources that complement the data retrieved from the API.\n\n### How to Use\n\n- **Star Wars API**: Provides structured data about Star Wars entities. See the for details on endpoints and usage: [API documentation](https://swapi.dev/documentation)\n- **Star Wars Visual Guide**: Supplies image URLs for visual representation. For example, images can be accessed at `https://starwars-visualguide.com/assets/img/characters/1.jpg` for a specific character.\n\n\u003cbr\u003e\n\n## Img project gallery\n\n| Img | Description |\n|--------|------------------------------|\n| \u003cimg src=\"public/screenshots/1.png\" style=\"width:250px;\"\u003e | Full detail character view |\n| \u003cimg src=\"public/screenshots/3.png\" style=\"width:250px;\"\u003e | Detail character view |\n| \u003cimg src=\"public/screenshots/4.png\" style=\"width:250px;\"\u003e | Register page |\n| \u003cimg src=\"public/screenshots/6.png\" style=\"width:250px;\"\u003e | Log in page |\n| \u003cimg src=\"public/screenshots/7.png\" style=\"width:250px;\"\u003e | Full detail starship view |\n| \u003cimg src=\"public/screenshots/8.png\" style=\"width:250px;\"\u003e | Detail starship view |\n| \u003cimg src=\"public/screenshots/2.png\" style=\"width:250px;\"\u003e | Full responsive starship view |\n| \u003cimg src=\"public/screenshots/10.png\" style=\"width:250px;\"\u003e | Home page |\n| \u003cimg src=\"public/screenshots/11.png\" style=\"width:250px;\"\u003e | Starship card list |\n| \u003cimg src=\"public/screenshots/12.png\" style=\"width:250px;\"\u003e | View more button |\n\n\u003cbr\u003e\n\n## Further Steps\n\n-  **Testing:** In the future, I plan to implement unit tests for individual components with vitest.\n\n- **Display Planet List and Detailed Card:** This will involve integrating with the Star Wars API to fetch and display a list of planets, as well as providing detailed information about a specific planet, including its inhabitants and the films in which it appears.\n\n\u003cbr\u003e\n\n## Contributing\n\nContributions to the Star Wars Web Application are welcome! To contribute:\n\n1. Fork the repository.\n2. Create a new branch (`git checkout -b feature/YourFeature`).\n3. Make your changes and commit (`git commit -am 'Add new feature'`).\n4. Push to the branch (`git push origin feature/YourFeature`).\n5. Create a new Pull Request.\n\u003cbr\u003e\n\n\n## Contact\n\nFor questions or feedback, feel free to open an issue on the GitHub repository or contact me directly at: \u003cbr\u003e \n\n\u003ca href=\"mailto:luciaorvilanova@gmail.com\" target=\"_blank\" rel=\"noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/badge/Gmail-EA4335?logo=gmail\u0026logoColor=fff\u0026style=flat-square\"  height=\"23\" alt=\"Gmail\" /\u003e\u003c/a\u003e \u003ca href=\"https://www.linkedin.com/in/luovtyrell\" target=\"_blank\" rel=\"noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/badge/LinkedIn-0A66C2?logo=linkedin\u0026logoColor=fff\u0026style=flat-square\" height=\"23\" alt=\"LinkedIn\" /\u003e\u003c/a\u003e \u003ca href=\"https://t.me/luovtyrell\" target=\"_blank\" rel=\"noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/badge/Telegram-26A5E4?logo=telegram\u0026logoColor=fff\u0026style=flat-square\" height=\"23\" alt=\"Telegram\" /\u003e\u003c/a\u003e \u003ca href=\"http://discordapp.com/users/664163194989707308\" target=\"_blank\" rel=\"noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/badge/Discord-5865F2?logo=discord\u0026logoColor=fff\u0026style=flat-square\" height=\"23\" alt=\"Discord\" /\u003e\u003c/a\u003e\n\n\u003cbr\u003e\n\n## Author\n[![Lucía Ordoñez Vilanova](https://avatars.githubusercontent.com/u/153511070?v=4\u0026s=100 \"Lucía Ordoñez Vilanova's GitHub Avatar\")](https://github.com/Luovtyrell) \u003ca href=\"https://www.github.com/Luovtyrell\"\u003e \u003cbr\u003e\n\u003cimg src=\"https://img.shields.io/badge/LUCIA%20ORDO%C3%91EZ%20VILANOVA-gray?style=flat-square\u0026color=ffcf00\"  height=\"30\" alt=\"Made by Lucía Ordoñez Vilanova\"/\u003e\n\u003c/a\u003e\n\u003e May the Force be with you as you explore the Star Wars universe! 🌌\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluovtyrell%2Fstar-wars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluovtyrell%2Fstar-wars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluovtyrell%2Fstar-wars/lists"}