https://github.com/sobakavosne/visualworm
Scandiweb test task: implement a carousel component, demonstrate it
https://github.com/sobakavosne/visualworm
carousel-component node react slide swipes webpack
Last synced: about 1 year ago
JSON representation
Scandiweb test task: implement a carousel component, demonstrate it
- Host: GitHub
- URL: https://github.com/sobakavosne/visualworm
- Owner: sobakavosne
- License: mit
- Archived: true
- Created: 2020-12-09T07:14:57.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-13T11:31:06.000Z (about 5 years ago)
- Last Synced: 2025-03-10T18:40:28.423Z (over 1 year ago)
- Topics: carousel-component, node, react, slide, swipes, webpack
- Language: JavaScript
- Homepage: https://sobakavosne.github.io/visualworm
- Size: 18.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### Scandiweb Test Task (**[full text one's](https://github.com/lenchevskii/visualworm/blob/main/TASK.md)**)
**To-do list:**
- [x] Manually configure the environment (Webpack, React)
- [x] Create a carousel component:
- [x] Mobile
- [x] Desktop
- [x] Swipes
- [x] Desktop infinite option
- [ ] Mobile infinite option
- [x] Work with any HTML content
- [x] Animated
- [ ] Multi-picture referenced post usage ability
- [x] Server side
- [x] Tests (extra-task option)
- [ ] Client side
- [ ] Popup windows with desired apply
- [ ] Interection interface
- [x] Demonstrate component in [action](https://lenchevskii.github.io/visualworm/)
- [x] Make the application' setup explanation
- [x] Keyboard accessibility (extra-task option)
- [ ] Connect client side with server side
- [ ] Deploy server side
**App usage:**
Clone a repository:
```bash
git clone https://github.com/lenchevskii/visualworm.git
```
Install actual node packages:
```bash
npm ci
```
Run script to build client side via Webpack bundler:
```bash
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](https://lenchevskii.github.io/visualworm/).
**Developing scripts:**
Develop client under `webpack`:
```bash
npm run client
```
Listen server via `nodemon`:
```bash
npm run server
```
Test server via `jest`:
```bash
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
```bash
curl -s http://localhost:3001/instagram.worm | jq .
```
- `focus-visible` [polyfill](https://github.com/WICG/focus-visible) allow to use **focus-visiable** pseudo-selector properties in any browser
---
*PS:*
*Carousel component was inspired by [this](https://www.youtube.com/watch?v=Tdpq-9XYoNM) 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.*