{"id":20739877,"url":"https://github.com/ecureuill/adopet-app","last_synced_at":"2026-05-23T03:35:30.201Z","repository":{"id":173531050,"uuid":"650881183","full_name":"ecureuill/adopet-app","owner":"ecureuill","description":"Project developed for Alura Forth Front-End Challenge","archived":false,"fork":false,"pushed_at":"2023-08-30T06:53:38.000Z","size":14922,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-12-27T12:21:32.038Z","etag":null,"topics":["alura-challenge","alura-challenges","alurachallenge","axios","fluid-design","react","react-query","react-responsive","react-router-dom","responsive-design","testing-library","typescript"],"latest_commit_sha":null,"homepage":"https://ecureuill.github.io/adopet-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/ecureuill.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":"2023-06-08T02:39:04.000Z","updated_at":"2023-06-09T16:04:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"60019240-f7a6-4c7a-b128-89a201d33bd2","html_url":"https://github.com/ecureuill/adopet-app","commit_stats":null,"previous_names":["ecureuill/adopet-app"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/ecureuill/adopet-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecureuill%2Fadopet-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecureuill%2Fadopet-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecureuill%2Fadopet-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecureuill%2Fadopet-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ecureuill","download_url":"https://codeload.github.com/ecureuill/adopet-app/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecureuill%2Fadopet-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33381989,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-23T01:21:08.577Z","status":"online","status_checked_at":"2026-05-23T02:00:05.530Z","response_time":53,"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":["alura-challenge","alura-challenges","alurachallenge","axios","fluid-design","react","react-query","react-responsive","react-router-dom","responsive-design","testing-library","typescript"],"created_at":"2024-11-17T06:26:30.222Z","updated_at":"2026-05-23T03:35:25.191Z","avatar_url":"https://github.com/ecureuill.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cdiv align=\"center\"\u003e\n\n# \u003ca href='https://ecureuill.github.io/Adopet-app/'\u003e\u003cimg src=\"./src/assets/images/logo-blue.svg\" alt=\"adopet\" width=800px/\u003e\u003c/a\u003e\n\n![HTML5](https://img.shields.io/badge/-HTML5-000?\u0026logo=HTML5)\n![CSS3](https://img.shields.io/badge/-CSS3-000?\u0026logo=CSS3)\n![React](https://img.shields.io/badge/-React-000?\u0026logo=React)\n![Docker](https://img.shields.io/badge/-Docker-000?\u0026logo=Docker)\n![Linux](https://img.shields.io/badge/-Linux-000?\u0026logo=Linux)\n![Git](https://img.shields.io/badge/Git-000?\u0026logo=Git)\n![SublimeText](https://img.shields.io/badge/SublimeText-000?\u0026logo=SublimeText)\n\n[![Alura Challenge Front-End](https://www.alura.com.br/assets/img/challenges/logos/challenges-logo-front.1674580905.svg)](https://www.alura.com.br/challenges) \n\n4-week challenge to develop the version of the adopter user's screens for the AdoPet website, which will have a login page, registration, list of pets and message form. This is a project focused on responsive layout, being recommended the mobile first approach. \n\n\u003c/div\u003e\n\n-------------------------\n\n\n| :placard: Vitrine.Dev |     |\n| -------------  | --- |\n| :sparkles: Nome        | **Adopet**\n| :label: Tecnologias | React, TypeScript, React-Router-Dom, React-Query, React-Responsive, Axios, Testing-Library\n| :rocket: URL         | https://ecureuill.github.io/adopet-app/\n| :fire: Desafio     | [Figma](https://www.figma.com/file/TlfkDoIu8uyjZNla1T8TpH/Challenge---Adopet)\n\n\u003c!-- Inserir imagem com a #vitrinedev ao final do link --\u003e\n![Adopet - home page](https://github.com/ecureuill/adopet-app/assets/993369/73f362b2-cebb-480b-a957-b2762f37d4c4)\n\n## Table of Content\n\n- [About](#about)\n- [Project Details](#project-details)\n- [Technologies Used](#technologies-used)\n- [Layout and Responsiveness](#layout-and-responsiveness)\n- [Live demo](#live-demo)\n- [Feedback and Contribution](#feedback-and-contributions)\n- [Screenshots](#screenshots)\n\n## About\nAdopet App is the result of the Alura Front-end Challenge, developed based on the provided [Figma design](https://www.figma.com/file/TlfkDoIu8uyjZNla1T8TpH/Challenge---Adopet). The project showcases the skills and knowledge acquired during the challenge.\n\n## Project Details\n\nThe server-side of the Adopet App is developed in Node.js and can be found in a separate repository at [Adopet API ](https://github.com/ecureuill/adopet).\n\n## Technologies Used\n\nThe project is built using the following technologies:\n\n- React\n- TypeScript\n- React-Router-Dom\n- React-Query\n- React-Responsive\n- Axios\n- Testing-Library\n\nI tried to well-structured and organize the project. The css architecture was based on ITCSS.\n\nThe use of TypeScript enhances code readability and promotes type safety.\n\nThe adoption of React-Query helps optimize data fetching and management, resulting in faster loading times and improved performance. The use of Axios for API communication ensures efficient handling of asynchronous requests.\n\n## Layout and Responsiveness\n\nThe Adopet App boasts a beautifully designed and responsive layout. It has been thoughtfully crafted with a mobile-first approach, ensuring seamless user experience across various devices, from desktops to tablets and smartphones.\n\nThe design is fluid, allowing it to adapt gracefully to different screen sizes and resolutions, providing an optimal viewing experience to users. The use of vanilla CSS ensures a lightweight and efficient rendering of styles, contributing to faster loading times and smoother interactions.\n\nFor the responsive layout, I decided to experiment with fluid design, instead of fixed breakpoints. And when a component should only render in specifics screen width, I used [react-responsive](https://github.com/yocontra/react-responsive) hooks to determine the condition. \n\n## Live demo\nFor demo purpose, a version with mock data was published [here](https://ecureuill.github.io/adopet-app/).\nYou can log in with email `tutor@mail.com` and password `123aSd7`.  It will automatically logout after 1 minute. \n\nIs possible to edit user profile data, except for the photo (you can select one from your device, but it will not be rendered). \nYou can mimic create a new user and sent message to a shelter. \n\n## Running Locally\n\nTo run the Adopet App locally, follow these steps:\n\n1. Clone this repository: `git clone https://github.com/ecureuill/adopet-app.git`\n1. Install the dependencies: `npm install`\n1. Start the development server: `npm start`\n1. Follow instructions on how to run locally the server-side in the separete repository [here](https://github.com/ecureuill/adopet)\n1. Access the app in your web browser at: http://localhost:3000\n\n## Feedback and Contributions\n\nFeedback and contributions are always welcome! If you have any suggestions or find any issues in the project, feel free to create an issue or submit a pull request.\n\n## Screenshots\nScreenshots have been provided to demonstrate functionalities and responsiveness of the layout.\n\n#### Mobile \n\n##### Non authenticated user\n\u003cdiv styles={display:'inline'}\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/1d6e6a01-33b4-4808-b9ae-ab69a3628718' alt= 'Home Page' style=\"width: 20%;\"/\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/630aff9c-6e8d-4c62-9b2e-ea92c09743c9' alt= 'Sign Up Page' style=\"width: 20%;\"/\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/86a63220-05b9-40a7-957c-21c29e1f83cf' alt= 'Login Page' style=\"width: 20%;\"/\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/c03d373a-afa2-4895-b021-1726ecf26eee' alt= 'Pets Page' style=\"width: 20%;\"/\u003e\n\u003c/div\u003e\n\n##### Authenticated user\n\u003cdiv styles={display:'inline'}\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/0e4ebc06-b0ce-4b9f-b1a9-ec898ed1d1cb' alt= 'Home Page' style=\"width: 20%;\"/\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/56cbf362-aaf9-46a4-b81c-991c221be653' alt= 'Sent Message Page' style=\"width: 20%;\"/\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/9ef1e0e7-e604-4e23-b46d-867ced710e54' alt= 'Profile Page' style=\"width: 20%;\"/\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/b538a2da-2fc8-41cf-86ee-9cd3c59cbec1' alt= 'Pets Page' style=\"width: 20%;\"/\u003e\n\u003c/div\u003e\n\n#### Tablet (width 768) \n\n##### Non authenticated user\n\u003cdiv styles={display:'inline'}\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/c27e23f0-3316-45c6-a04b-f3ed06326086' alt= 'Home Page' style=\"width: 40%;\"/\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/4a19cce4-61f1-43b4-aae4-cd4e3b7d20ef' alt= 'Sign Up Page' style=\"width: 40%;\"/\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/87796ebc-ba22-4735-909d-354cac4d3de5' alt= 'Login Page' style=\"width: 40%;\"/\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/2a781724-d3fd-4208-820e-f5becf88da1b' alt= 'Pets Page' style=\"width: 40%;\"/\u003e\n\u003c/div\u003e\n\n##### Authenticated user\n\u003cdiv styles={display:'inline'}\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/c71544e7-75a0-4dfb-9511-bcae4de82849' alt= 'Home Page' style=\"width: 40%;\"/\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/08490dbd-8c12-4855-ae31-600fa38e5536' alt= 'Sent Message Page' style=\"width: 40%;\"/\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/e38b8c38-b3ec-41ab-8e26-b5f34260a0a8' alt= 'Profile Page' style=\"width: 40%;\"/\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/6194e981-b3c7-4ae5-9137-75386d2887b9' alt= 'Pets Page' style=\"width: 40%;\"/\u003e\n\u003c/div\u003e\n\n#### Desktop (width 1440) \n\n##### Non authenticated user\n\u003cdiv styles={display:'inline'}\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/4b3f6bc1-5dfa-4a2c-bcf7-d5e32b888626' alt= 'Home Page' style=\"width: 80%;\"/\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/afad5cc0-833f-441e-bcd7-c28032a9f909' alt= 'Sign Up Page' style=\"width: 80%;\"/\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/c0a4a341-0365-40bc-82b5-a18ec61b014f' alt= 'Login Page' style=\"width: 80%;\"/\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/39cf227a-8b2e-4798-8e2e-f6ddc60aa942' alt= 'Pets Page' style=\"width: 80%;\"/\u003e\n\u003c/div\u003e\n\n##### Authenticated user\n\u003cdiv styles={display:'inline'}\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/4ffb70ff-7661-4c77-96c8-31f6b0533c99' alt= 'Home Page' style=\"width: 80%;\"/\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/614d016f-b4e5-4dfb-a008-5284061b69d1' alt= 'Sent Message Page' style=\"width: 80%;\"/\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/5d470aa1-f6e7-45f1-9a89-9b28a5a3b835' alt= 'Profile Page' style=\"width: 80%;\"/\u003e\n    \u003cimg src='https://github.com/ecureuill/adopet-app/assets/993369/78d55d8b-b7a0-498d-9471-cff48cce1f6e' alt= 'Pets Page' style=\"width: 80%;\"/\u003e\n\u003c/div\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecureuill%2Fadopet-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fecureuill%2Fadopet-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecureuill%2Fadopet-app/lists"}