{"id":30357747,"url":"https://github.com/ethereumdevtech/cosmetic-carousel-ui","last_synced_at":"2026-04-09T18:07:30.744Z","repository":{"id":210952784,"uuid":"588312523","full_name":"EthereumDevtech/cosmetic-carousel-ui","owner":"EthereumDevtech","description":"landing page using react, node and sass","archived":false,"fork":false,"pushed_at":"2023-01-12T20:39:03.000Z","size":4226,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-29T00:26:08.816Z","etag":null,"topics":["nodejs","react","sass"],"latest_commit_sha":null,"homepage":"https://cosmetic-carousel-ui.vercel.app","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/EthereumDevtech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":"audit/.env","citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-01-12T20:35:34.000Z","updated_at":"2023-01-17T02:56:27.000Z","dependencies_parsed_at":"2023-12-05T18:42:30.852Z","dependency_job_id":"2f9c7c3d-d651-41a1-9b9c-46831f404d36","html_url":"https://github.com/EthereumDevtech/cosmetic-carousel-ui","commit_stats":null,"previous_names":["pijeismart/cosmetic-carousel-ui","imjuniorcris/cosmetic-carousel-ui","ethereumdevtech/cosmetic-carousel-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/EthereumDevtech/cosmetic-carousel-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EthereumDevtech%2Fcosmetic-carousel-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EthereumDevtech%2Fcosmetic-carousel-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EthereumDevtech%2Fcosmetic-carousel-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EthereumDevtech%2Fcosmetic-carousel-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EthereumDevtech","download_url":"https://codeload.github.com/EthereumDevtech/cosmetic-carousel-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EthereumDevtech%2Fcosmetic-carousel-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271121213,"owners_count":24702733,"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-08-19T02:00:09.176Z","response_time":63,"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":["nodejs","react","sass"],"created_at":"2025-08-19T08:19:33.908Z","updated_at":"2025-11-24T01:06:32.166Z","avatar_url":"https://github.com/EthereumDevtech.png","language":"JavaScript","readme":"# ELC Javscript Coding Test\n\nThe ELC Javascript Coding Test is a way for you to showcase your own approach to coding. It allows you to create something with your own style and preferences. You can change the code to match your own preferences however you like. Feel free to change the setup, code or approach however you like. PLEASE READ ALL INSTRUCTIONS BELOW BEFORE STARTING.\n\n**If you are not applying for a React role...**\nNo React code is required for this test and your focus should be on general best practices in Javascript \u0026 CSS. Our evaluators will be ignoring React-specifics \u0026 focusing on your skills in modern web standards (HTML/CSS/JS).\n \n**If you are applying for a React role...**\nPlease complete the task using React. Our evaluators will be looking for React best practices and specialized React knowledge in addition to Javascript \u0026 CSS. \n\n### The Task\n\nYou are required to create a simple auto-search feature similar to [this one](https://www.maccosmetics.com/) where-by, as you type, the data is checked against a Node server and the response is then loaded in. You can style this however you wish and can implement it however you wish but you MUST use Javascript/React and Node to accomplish this. This has already been setup for you in the source code provided. Some general tips on starting:\n\n* The point of entry for the app can be found in the 'app/scripts/main.js' file -- work from this file for your app code\n* The server with the response can be found in the 'server/app.js' file -- work from this file to complete the Node server setup\n* The data can be found in the 'server/data.js' file, which is then loaded into the Node 'server/app.js' file \n* The SCSS files, which contain the SASS styling, can be found in the 'app/sass' folder\n* You can alter the setup of the runtime by editing the 'gulpfile.js' file\n\n## Getting Started\n\n### Prerequisites\n\n* NPM (v6.14.12)\n\n* NodeJS (v14.16.1)\n    * If you are on a different NodeJS version, please use NVM (Node Version Manager) in order to change to version 14. You can find NVM's documentation here https://github.com/nvm-sh/nvm\n    * Windows users can use NVM for Windows: https://github.com/coreybutler/nvm-windows\n\n### Step 1 - Node Modules\n\nThe first thing you need to do to get this app working is to install the Node modules with the following command:\n\n    npm install\n\n### Step 2 - Running the App\n\nAfter installing the Node modules, you must start two locally hosted servers. The first server is the Node back end server, which runs the NodeJS files found in the './server' folder, and the second is the front end server, which runs the app files found in the './app' folder. Both servers can be started by running the following command (make sure you’re using the correct versions of Node and NPM per the prerequisites above):\n\n    npm run servers\n\nThis command will create a front end server at http://localhost:3030 (which should automatically open in your browser), and it will start the Node back end server at http://localhost:3035, with Nodemon, so that updates happen automatically on save. \n\n*Special Note for Windows Users*\n\nOn Windows systems, you may get an error like the following:\n\n  'NODE_ENV' is not recognized as an internal or external command, operable program or batch file.\n  \nIf so, you will need to replace any occurrences of NODE_ENV with 'SET NODE_ENV' in the package.json, and separate this command from the one that follows it with a '\u0026', like this:\n  \"node-server\": \"SET NODE_ENV=development \u0026 nodemon server/app.js\"\n  \n## Front End App Folder\n\nAll of the front end source code can be found in the './app' folder. A description of each subfolder is as follows:\n\n### images\n\nHere you can (optionally)  place images that can be processed with the npm command:\n\n    npm run image-min\n\nThis will minify the images and put them into the '.local_server/img/' folder.\n\n### sass\n\nHere you will find the SCSS files, we use Sass on the project to compile down to CSS. These files will be automatically compiled upon save when you are running the standard 'npm run dev-server' command. However you can compile this yourself by running this command:\n\n    npm run sass\n\n### scripts\n\nAll of the Javascript can be found in here. The Webpack setup can be found in the 'config/webpack.config.js' file. These files are ran with the '[@babel/preset-env](https://github.com/babel/babel/tree/master/packages/babel-preset-env)' and '[@babel/preset-react](https://www.npmjs.com/package/@babel/preset-react)' loaders, which will enable you to write ES2017 and/or React Code.\n\nThe code is all initialized from the 'app/scripts/main.js' file, so that should be your initial point of call for the App.\n\n### third_party\n\nThird party can be used to contain any third party libraries that you may want to use with your app. You can call a command to move all the third party items with:\n\n    npm run third-party\n\n### views\n\nThe views folder contains the HTML templates folder. The templates are created with the [Mustache](https://mustache.github.io/) templating language.\n\n\n## Node Back End Server Folder\n\n### app.js\n\nThe source code for the back end server can be found in the './server' folder, specifically in the app.js file.  The app.js file includes starter code for you to create your own HTTP server, which will listen on port 3035 and create a data response, loading the product data from the data.js file, in JSON format. In addition to the comments in the app.js file, review the [NodeJS http.serverResponse documentation](https://nodejs.org/api/http.html#http_class_http_serverresponse).\n\nTo start the server on its own you can run this command:\n\n    npm run node-server\n\n### data.js\n\nThe data in the data.js file uses the following JSON Schema:\n\n    {\n        \"_id\": \"001\", // A Number for the product\n        \"isActive\": \"false\", // Is the product actively in stock\n        \"price\": \"23.00\", // The price of the product in the set currency\n        \"picture\": \"/img/products/N16501_430.png\", // The location of the image for the product\n        \"name\": \"Damage Reverse Thickening Conditioner\", // The products name\n        \"about\": \"Description for the product...\", // Description of the product\n        \"tags\": [ \"ojon\", \"conditioner\" ] // The tags for the product\n    }\n\n## Additional Submission Guidelines\n\n* Please DELETE the node_modules folder prior to sending your code for review\n* Don't forget to include CSS/SCSS styling\n* If any additional commands  are necessary to run your code, please make sure this is documented\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fethereumdevtech%2Fcosmetic-carousel-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fethereumdevtech%2Fcosmetic-carousel-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fethereumdevtech%2Fcosmetic-carousel-ui/lists"}