{"id":19293594,"url":"https://github.com/hayanisaid/front-end-challenge","last_synced_at":"2026-04-13T13:32:07.985Z","repository":{"id":97739014,"uuid":"122357425","full_name":"hayanisaid/Front-end-Challenge","owner":"hayanisaid","description":null,"archived":false,"fork":false,"pushed_at":"2018-08-02T00:42:52.000Z","size":35568,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-24T00:25:10.096Z","etag":null,"topics":["bootstrap4","sass","vuejs2"],"latest_commit_sha":null,"homepage":null,"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/hayanisaid.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":"2018-02-21T15:55:06.000Z","updated_at":"2018-08-02T00:42:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"96ec88c9-93f9-4e45-9afb-1fae25dd77a2","html_url":"https://github.com/hayanisaid/Front-end-Challenge","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hayanisaid/Front-end-Challenge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hayanisaid%2FFront-end-Challenge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hayanisaid%2FFront-end-Challenge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hayanisaid%2FFront-end-Challenge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hayanisaid%2FFront-end-Challenge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hayanisaid","download_url":"https://codeload.github.com/hayanisaid/Front-end-Challenge/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hayanisaid%2FFront-end-Challenge/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31754868,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T13:27:56.013Z","status":"ssl_error","status_checked_at":"2026-04-13T13:21:23.512Z","response_time":93,"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":["bootstrap4","sass","vuejs2"],"created_at":"2024-11-09T22:35:28.450Z","updated_at":"2026-04-13T13:32:07.968Z","avatar_url":"https://github.com/hayanisaid.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Front-end Challanege [Hidden Founder]\n![image](preview/full.png)\n\n\u003e A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n\n# run e2e tests\nnpm run e2e\n\n# run all tests\nnpm test\n```\n\n## [Documentation]()\nThis template is build with vue.js and bootstrap 4,I used [vue.js](https://vuejs.org/), I can use Angular but I found Vue appropriate for this project because it's a great Framwork for UI and User Experience,so I used vue.js to handle and make nice animation,and has small size too.\nin product section I created an Array of object that contain product detail,the way that helped me to handle product displaying ,and make dynamic page with vue-router,So when use click product title ,it go you to detail component with nice transition and blur effect while diplaying product details.\n#Like feature : when you click heart icon the like will be add and the icon will take a red color,with like counter that incresse while clicking heart icon.\n### - Vue.js 2\n\n## - Vue-cli\n### [bootstrap 4](http://getbootstrap.com/)\nbootstrap 4 is latest version off twitter bootstrap ,which is  is an open source toolkit for developing with HTML, CSS, and JS.\n\nI just used the necessary elments for the project to avoid loading the entire Framwork and unsed code\n \n **bootstrap.scss\n ```\n @import \"functions\";\n@import \"variables\";\n@import \"mixins\";\n@import \"root\";\n@import \"reboot\";\n@import \"images\";\n@import \"grid\";\n@import \"forms\";\n@import \"buttons\";\n@import \"dropdown\";\n@import \"input-group\";\n@import \"nav\";\n@import \"navbar\";\n//@import \"code\";\n//@import \"tables\";\n//@import \"transitions\";\n//@import \"button-group\";\n//@import \"custom-forms\";\n//@import \"type\";\n//@import \"card\";\n//@import \"breadcrumb\";\n//@import \"pagination\";\n//@import \"badge\";\n//@import \"jumbotron\";\n//@import \"alert\";\n//@import \"progress\";\n//@import \"list-group\";\n//@import \"close\";\n//@import \"modal\";\n//@import \"tooltip\";\n//@import \"carousel\";\n//@import \"utilities\";\n//@import \"print\";\n```\n\n### -Sass\n\nI used sass as CSS processor.which make a development mush easier and some dynamizm,with a little code\n\n## [Vue-router](https://router.vuejs.org/en/)\n\n![image](preview/routeing.gif)\n\n\n I used Vue-router ,So the user can navigate to detail page without page refresh with a nice animation effect\n\n## The template is responsive\n\n![Responsive](preview/responsive.gif)\n\n\n ### Mobile Menu\n![Mobile Menu](preview/mobileMenu.gif)\n\nI made a special Menu to mobile,it appear only on mobile\n\n## -Material icons\nI used Material-icons for icons which is free icons, I prefere material-icons good for User Interface instead of fontawesome\n## -Files are minified\nWith ``` npm run buil ``` all files are minified \n\n##  -Image Carousel\n![product](preview/productpred.gif)\n\nSimple Image carousel to Browse other images .\n\n\n[By Said Hayani](https://twitter.com/hayanisaid1995)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhayanisaid%2Ffront-end-challenge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhayanisaid%2Ffront-end-challenge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhayanisaid%2Ffront-end-challenge/lists"}