{"id":24904654,"url":"https://github.com/mayromyller/frontend-challenge","last_synced_at":"2025-03-27T21:16:30.839Z","repository":{"id":248193797,"uuid":"828032500","full_name":"mayromyller/frontend-challenge","owner":"mayromyller","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-03T16:43:41.000Z","size":126,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T23:39:24.717Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://frontend-challenge-pied.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/mayromyller.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-12T23:55:13.000Z","updated_at":"2024-10-03T16:43:45.000Z","dependencies_parsed_at":"2024-07-13T01:35:59.788Z","dependency_job_id":null,"html_url":"https://github.com/mayromyller/frontend-challenge","commit_stats":null,"previous_names":["mayromyller/frontend-challenge"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mayromyller%2Ffrontend-challenge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mayromyller%2Ffrontend-challenge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mayromyller%2Ffrontend-challenge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mayromyller%2Ffrontend-challenge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mayromyller","download_url":"https://codeload.github.com/mayromyller/frontend-challenge/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245924504,"owners_count":20694731,"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":[],"created_at":"2025-02-01T23:39:27.121Z","updated_at":"2025-03-27T21:16:30.710Z","avatar_url":"https://github.com/mayromyller.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Challenge - Front End Developer\n\nDeploy: [frontend-challenge-pied.vercel.app](https://frontend-challenge-pied.vercel.app)\n\n## Prerequisites\n\nBefore starting, you need to have installed on your machine:\n\n- Node.js (version 18.x)\n- npm, yarn, or pnpm\n\n## Installation\n\nFollow the steps below to install and configure the project on your local machine.\n\n1. **Clone the repository**\n   ```bash\n   https://github.com/mayromyller/frontend-challenge.git\n   ```\n2. **Navigate to the project directory**\n   ```bash\n   cd frontend-challenge\n   ```\n3. **Using one of the Node package managers, install the dependencies**\n   ```bash\n   npm install\n   ```\n   or use `yarn` or `pnpm`, if you prefer.\n\n## Running the Project\n\nTo start the local server, run the following command:\n\n```bash\npnpm dev\n```\n\nThe project will run on `http://localhost:5173/`.\n\n## Technologies\n\nAmong the technologies used, I highlight:\n\n- TypeScript\n- React\n- Axios\n- Tailwind CSS\n- Vitest\n\n## About the Project\n\nThe application was developed using a React, Redux, and TypeScript. For styling, I chose TailwindCSS due to its numerous benefits: it enhances productivity, ensures visual consistency, is easy to configure, and optimizes the application's performance.\n\n### Key Components Developed\n\nSeveral crucial components were created during the development process: **Modal**, **Accordion**, **Carousel**, **Skeleton**, **Form Components**\n\n### Handling API Integration and CORS Issues\n\nWhen integrating the application with the provided API, I faced Cross-Origin Resource Sharing (CORS) errors. To work around this issue during development, I used mock data based on the JSON responses from the API endpoints:\n\n- Venue: `https://cdn-dev.preoday.com/challenge/venue/9`\n- Menu: `https://cdn-dev.preoday.com/challenge/menu`\n\nThis allowed me to proceed with development despite the CORS issues.\n\n### Using a Browser Extension for CORS\n\nTo bypass the CORS restrictions, I utilized a browser extension called [`Allow CORS: Access-Control-Allow-Origin`](https://chromewebstore.google.com/detail/lhobafahddgcelffkeicbaginigeejlf). This extension modifies the browser's request headers to allow cross-origin requests, enabling me to test API calls without being blocked.\n\nUsing this extension, I successfully integrated the data while running the application locally. However, after deploying the application, the CORS issue re-emerged. To address this, I implemented a check in the API call logic to fallback to mock data whenever a CORS error was detected.\n\n### Architectural Approach\n\nI developed the application following the Model-View-Presenter (MVP) pattern, combined with principles of clean architecture, obviously abstracted to the front-end context specifically to React with Hooks. The application is consistent in the separation of responsibilities, between the UI and the business rules, separating the logic into customized hooks, which can be interpreted as the Presenter layer, the business rule interfaces as the Model layer, and the components the View layer.\n\n### Summary\n\nThis architectural pattern ensures a clear separation of responsibilities, promoting isolation between components and enhancing flexibility. As a result, the application is easier to maintain, update, and test.\n\nIn conclusion, the application demonstrates a well-organized structure with a strong emphasis on modularity and scalability, making it robust and adaptable for future enhancements.\n\n## Tests\n\nTo run the tests, use the command `pnpm test`.\n\nI tested the main rules of the application, i.e., the cart and its functionalities, as well as the integration of the UI with the methods, using `Vitest` and the `React Testing Library`.\n\n## Contact\n\n- [LinkedIn - Mayro Myller](https://www.linkedin.com/in/mayromyller/)\n- Email: mayro.mmdev@gmail.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmayromyller%2Ffrontend-challenge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmayromyller%2Ffrontend-challenge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmayromyller%2Ffrontend-challenge/lists"}