{"id":21560658,"url":"https://github.com/mariocc29/shoe_store","last_synced_at":"2026-04-11T17:01:06.864Z","repository":{"id":239763113,"uuid":"800492437","full_name":"mariocc29/shoe_store","owner":"mariocc29","description":"About Exemplary React project aimed at assessing code quality with meticulous attention to detail. It interfaces with a Websocket to retrieve data of a inventory system.","archived":false,"fork":false,"pushed_at":"2024-05-16T22:45:14.000Z","size":354,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T04:32:58.794Z","etag":null,"topics":["babel","figma","frontend","javascript","react","scss"],"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/mariocc29.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-05-14T12:43:49.000Z","updated_at":"2024-08-06T14:48:31.000Z","dependencies_parsed_at":"2025-03-18T04:29:40.663Z","dependency_job_id":"b1af1294-2734-45b8-91fe-ad70ae96e520","html_url":"https://github.com/mariocc29/shoe_store","commit_stats":null,"previous_names":["mariocc29/shoe_store"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mariocc29/shoe_store","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariocc29%2Fshoe_store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariocc29%2Fshoe_store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariocc29%2Fshoe_store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariocc29%2Fshoe_store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mariocc29","download_url":"https://codeload.github.com/mariocc29/shoe_store/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mariocc29%2Fshoe_store/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31687881,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T13:07:20.380Z","status":"ssl_error","status_checked_at":"2026-04-11T13:06:47.903Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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","figma","frontend","javascript","react","scss"],"created_at":"2024-11-24T09:16:40.126Z","updated_at":"2026-04-11T17:01:06.843Z","avatar_url":"https://github.com/mariocc29.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shoe Store Inventory Monitoring System\n**Potloc Test React frontend**\n\n### Overview\n\nThe Shoe Store Inventory Monitoring System frontend provides a user-friendly interface for monitoring Aldo's stores and shoes inventory in real-time. This React-based application connects to the backend API to fetch and display inventory data.\n\n## Technologies\n\nThe following technologies are used in this project:\n\n||Version|Command for checking\n|-|-:|-|\n|node|20.11.1|node --version\n|npm|10.2.4|npm --version\n|react|18.3.1|\n\n## Deployment\n\nTo deploy the application, follow these steps:\n\n1. Install dependencies:\n\n```bash\n  npm install\n```\n\n2. Start the server:\n\n```bash\n  npm run dev\n```\n\n## Running Tests\n\nExecute the following command to run the tests:\n\n```bash\n   npm run test\n```\n\n## Solution Approach\n\nThe solution approach for building the Shoe Store Inventory Monitoring System frontend involves the following steps:\n\n**Atomic Pattern Design:** The atomic pattern design pattern was implemented to ensure a consistent and modular design architecture. This approach breaks down the user interface into independent and reusable components called \"atoms,\" which are then combined to form more complex molecules and, ultimately, complete organisms. This promotes a clean and scalable code structure, facilitating maintainability and extensibility of the system.\n\n**Design Thinking:** This project embraced certain stages of the Design Thinking methodology. After empathizing with and defining the requirements of the project, ideation took place.\n\n**Inspiration \u0026 References**\n\nVarious design inspirations and references were explored to create an intuitive and visually appealing user interface. Behance and Dribbble provided valuable insights into dashboard UI designs, particularly focusing on neumorphism design trends.\n\n* https://www.behance.net/gallery/196934185/Neumorphism-Dashboard-UI-Design?tracking_source=search_projects|neumorphism+dashboard\u0026l=0\n* https://www.behance.net/gallery/99511533/Neumorphism-Trading-Exchange-Dashboard?tracking_source=search_projects|neumorphism+dashboard\u0026l=13\n* https://www.behance.net/gallery/189074535/FinanceDashboard-UIUX-Design?tracking_source=search_projects|neumorphism+dashboard\u0026l=17\n* https://dribbble.com/shots/22150452-Analytics-Dashboard\n\n**Wireframes**\n\nVisual wireframes in Figma served as a skeletal framework, providing a visual guide for the project's layout and structure.\n\n**Mockups**\n\nGraphic mockups in Figma further detailed the design, offering a clear representation of the to-be system's interface.\n\n## Future Enhancements\n\nFor future enhancements, the installation of Redux was performed. This decision was made in anticipation of receiving anomaly notifications, as Redux offers a convenient solution for managing global variables. By utilizing Redux, the frontend will be well-equipped to receive and handle alerts seamlessly, ensuring efficient monitoring of inventory anomalies.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmariocc29%2Fshoe_store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmariocc29%2Fshoe_store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmariocc29%2Fshoe_store/lists"}