Scandiweb Test Task (full text one's)
To-do list:
- Manually configure the environment (Webpack, React)
- Create a carousel component:
- Mobile
- Desktop
- Swipes
- Desktop infinite option
- Mobile infinite option
- Work with any HTML content
- Animated
- Multi-picture referenced post usage ability
- Server side
- Tests (extra-task option)
- Client side
- Popup windows with desired apply
- Interection interface
- Server side
- Demonstrate component in action
- Make the application' setup explanation
- Keyboard accessibility (extra-task option)
- Connect client side with server side
- Deploy server side
App usage:
Clone a repository:
git clone https://github.com/lenchevskii/visualworm.git
Install actual node packages:
npm ci
Run script to build client side via Webpack bundler:
npm run build
Because of using a bundler, the client deploy environment has to have only JS engine to run the project.
The client's build stored at the /bundle
directory.
Simplified client deploy was implement through the GitHub Pages - Visual Worm.
Developing scripts:
Develop client under webpack
:
npm run client
Listen server via nodemon
:
npm run server
Test server via jest
:
npm run test
To use the server side, you need to create a .env
file with your own configuration. (PORT
, PASSWD
, .. etc. ).
The following tips can simplify developer's hard life:
-
jq
utility for terminal pretty print JSONcurl -s http://localhost:3001/instagram.worm | jq .
-
focus-visible
polyfill allow to use focus-visiable pseudo-selector properties in any browser
PS:
Carousel component was inspired by this video. The aimed component was rewritten by dint of useReducer()
(instead of useState()
), which allows troubleless working with complex logic inside the state in the future.