这公司很奇怪，一进来就叨叨叨的说什么我们公司专为大龄程序员之类的，还说什么公司账户制度，大概意思就是你给公司干活，你工资有些钱公司不给你发，放公司户头上，也没说要给你增值或者股份，反正絮絮叨叨没说一些有用的，听着就很低端。跟我对接做招聘的，竟然说自己以前做iOS的，我表示很吃惊。做iOS的竟然可以沦落到在外包公司做招聘。前期面试，面试官英文坑里吧唧，十句没五句能连成一句话，我真有点看不起啊。
这个是面试前题目，说客户是雅诗兰黛，题目是仿照另一个化妆品网站做个搜索功能。代码模板就是这个，前端用React 16.2，后端node的原生http库。这模板用gulp，React用16.2这么老，何谈最佳实践？大概率是想骗个日常功能，写进他们代码里。自己看看吧，谁会花这么多时间，争取一个低工资而且外包，还对你挑三拣四的公司呢？
The 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.
If you are not applying for a React role... No React code is required for this test and your focus should be on general best practices in Javascript & CSS. Our evaluators will be ignoring React-specifics & focusing on your skills in modern web standards (HTML/CSS/JS).
If you are applying for a React role... Please complete the task using React. Our evaluators will be looking for React best practices and specialized React knowledge in addition to Javascript & CSS.
You are required to create a simple auto-search feature similar to this one 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:
- 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
- The server with the response can be found in the 'server/app.js' file -- work from this file to complete the Node server setup
- The data can be found in the 'server/data.js' file, which is then loaded into the Node 'server/app.js' file
- The SCSS files, which contain the SASS styling, can be found in the 'app/sass' folder
- You can alter the setup of the runtime by editing the 'gulpfile.js' file
-
NPM (v6.14.12)
-
NodeJS (v14.16.1)
- 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
- Windows users can use NVM for Windows: https://github.com/coreybutler/nvm-windows
The first thing you need to do to get this app working is to install the Node modules with the following command:
npm install
After 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):
npm run servers
This 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.
Special Note for Windows Users
On Windows systems, you may get an error like the following:
'NODE_ENV' is not recognized as an internal or external command, operable program or batch file.
If 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 '&', like this: "node-server": "SET NODE_ENV=development & nodemon server/app.js"
All of the front end source code can be found in the './app' folder. A description of each subfolder is as follows:
Here you can (optionally) place images that can be processed with the npm command:
npm run image-min
This will minify the images and put them into the '.local_server/img/' folder.
Here 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:
npm run sass
All 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' and '@babel/preset-react' loaders, which will enable you to write ES2017 and/or React Code.
The code is all initialized from the 'app/scripts/main.js' file, so that should be your initial point of call for the App.
Third 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:
npm run third-party
The views folder contains the HTML templates folder. The templates are created with the Mustache templating language.
The 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.
To start the server on its own you can run this command:
npm run node-server
The data in the data.js file uses the following JSON Schema:
{
"_id": "001", // A Number for the product
"isActive": "false", // Is the product actively in stock
"price": "23.00", // The price of the product in the set currency
"picture": "/img/products/N16501_430.png", // The location of the image for the product
"name": "Damage Reverse Thickening Conditioner", // The products name
"about": "Description for the product...", // Description of the product
"tags": [ "ojon", "conditioner" ] // The tags for the product
}
- Please DELETE the node_modules folder prior to sending your code for review
- Don't forget to include CSS/SCSS styling
- If any additional commands are necessary to run your code, please make sure this is documented