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
• 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 JSON

  curl -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.