{"id":31574483,"url":"https://github.com/mayzamendesrodrigues/web_project_around_react","last_synced_at":"2026-05-08T07:33:36.741Z","repository":{"id":310694431,"uuid":"1039248441","full_name":"MayzaMendesRodrigues/web_project_around_react","owner":"MayzaMendesRodrigues","description":"This project was created to develop React skills, serving as a practical case study for migrating an application built with plain JavaScript to the React. The goal is to transform a functional and interactive website into a modern, component-based application, using Vite as the build tool.","archived":false,"fork":false,"pushed_at":"2025-08-31T19:53:00.000Z","size":897,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-09T07:51:09.101Z","etag":null,"topics":["babel","react","vite"],"latest_commit_sha":null,"homepage":"","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/MayzaMendesRodrigues.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,"zenodo":null}},"created_at":"2025-08-16T19:49:11.000Z","updated_at":"2025-08-31T19:53:03.000Z","dependencies_parsed_at":"2025-08-19T18:36:06.441Z","dependency_job_id":"ec1eed69-d476-4e28-8063-a67b252554a1","html_url":"https://github.com/MayzaMendesRodrigues/web_project_around_react","commit_stats":null,"previous_names":["mayzamendesrodrigues/web_project_around_react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MayzaMendesRodrigues/web_project_around_react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MayzaMendesRodrigues%2Fweb_project_around_react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MayzaMendesRodrigues%2Fweb_project_around_react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MayzaMendesRodrigues%2Fweb_project_around_react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MayzaMendesRodrigues%2Fweb_project_around_react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MayzaMendesRodrigues","download_url":"https://codeload.github.com/MayzaMendesRodrigues/web_project_around_react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MayzaMendesRodrigues%2Fweb_project_around_react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280806835,"owners_count":26394451,"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","status":"online","status_checked_at":"2025-10-24T02:00:06.418Z","response_time":73,"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":["babel","react","vite"],"created_at":"2025-10-05T16:05:21.895Z","updated_at":"2025-10-24T13:53:19.642Z","avatar_url":"https://github.com/MayzaMendesRodrigues.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# 🇺🇸 USA Around in React\n![image](https://github.com/user-attachments/assets/0a104bfd-b418-4dae-9954-a68002c3a517)\n\n---\n\n## 📌 Project Overview\n\nThis project was created with the main goal of developing React skills, serving as a practical case study for the migration of an application built with pure JavaScript to the React framework.\nThe focus is to convert a functional and interactive website into a modern, component-based application, using Vite as the build tool and preparing integration with external APIs.\n\n---\n\n## 🎯 Key Learning Goals\n\n* Set up a React project with Vite.\n* Refactor HTML into JSX.\n* Develop and structure reusable React components.\n* Manage data flow with `props` and `children`.\n* Organize the folder structure for scalability.\n* Integrate with external APIs using `fetch` .\n\n---\n\n## 🛠 Tech Stack\n\n* **React** – UI library.\n* **Vite** – Lightning-fast build tool.\n* **JSX** – Syntax extension for JavaScript.\n* **CSS** – Styling (migrated from previous project).\n* **REST API** – Dynamic data integration.\n\n---\n\n## ⚙️ Setup Instructions\n\n1. Clone the repository:\n\n```bash\ngit clone git@github.com:MayzaMendesRodrigues/web_project_around_react.git\ncd web_project_around_react\n```\n\n2. Create the React project with Vite:\n\n```bash\nnpm create vite@latest .\n# Select: React → JavaScript\n```\n\n3. Install dependencies:\n\n```bash\nnpm i\n```\n\n4. Configure scripts in **`package.json`** and server port in **`vite.config.js`** (default: 3000).\n\n---\n\n## 🌐 API Integration\n\nThe application fetches and renders **dynamic content** through REST API requests.\nData can be consumed using either **fetch** or **axios**, centralized under `src/services/` for clean architecture.\n\n---\n\n## 🚀 Next Steps\n\n* [ ] Migrate to **TypeScript** for static typing.\n* [ ] Add **unit and integration tests** (Jest + Testing Library).\n* [ ] Implement **global state management** (Context API or Zustand).\n* [ ] Set up **CI/CD pipeline** with GitHub Actions.\n* [ ] Enhance **mobile-first responsiveness**.\n* [ ] Add **JWT authentication**.\n\n---\n\n## 📞 Contact\n\n* **Email:** [mayzamrodrigues@gmail.com](mailto:mayzamrodrigues@gmail.com)\n* **LinkedIn:** [linkedin.com/in/mayza-ynara-mendes-rodrigues](https://linkedin.com/in/mayza-ynara-mendes-rodrigues)\n* **Portfolio:** [mayzamendesrodrigues.github.io]\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmayzamendesrodrigues%2Fweb_project_around_react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmayzamendesrodrigues%2Fweb_project_around_react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmayzamendesrodrigues%2Fweb_project_around_react/lists"}