https://github.com/maximkanet/web-site-builder
https://github.com/maximkanet/web-site-builder
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/maximkanet/web-site-builder
- Owner: MaximkaNet
- Created: 2025-06-01T23:32:25.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-03T20:41:38.000Z (about 1 year ago)
- Last Synced: 2025-07-01T12:49:45.446Z (12 months ago)
- Language: Vue
- Size: 8.77 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# web-site-builder
## EN
The goal of the project is to create a website where you can create instructions for using something (for example, online banking).
To create it, I used Nuxt 3, Drizzle ORM, and Pinia.
### Functionality:
`/` - Landing page or Home page
On this page you can play with automatically generated balls that can be shoveled by click or generated by right click.
Use the 'Sign up' and 'Log in' buttons to log in to the system. Authorization is done through JWT.
I use two tokens (Access and Refresh). Access token stores in localStorage, Refresh in httpOnly cookies.
`/auth/login` - Login page
`/auth/signup` - Registration page
This page has validation through the interface `/utils/validator.ts`, where inheritance is used.
`/dashboard` - Manuals page
This page contains all available instructions. By clicking on an instruction, you can switch to the builder mode.
`/builder/:id` - Builder page
On this page you can quickly build a manual with sections. Each input field is a `contenteditable` paragraph (`/components/EditableText.vue`).
To load the files, I used the Drag & Drop API of `/components/MediaReceiver.vue`.
`/preview/:id` - Preview page
> Handling in case access to the manual is blocked (does not exist or another user) 'NO!!!'
## UA
Ціль проекта створити вебсайт, на якому можна створити інструкцію для користування чимось (наприклад інтернет-банкінгом).
Для його створення, я використав Nuxt 3, Drizzle ORM та Pinia.
### Функціонал:
'/' - Landing page or Home page
На цій сторінці можна погратися з кульками які генеруються автоматично та які можна лопати.
За допомогою кнопок `Sign up` and `Log in` можна авторизуватися у системі. Авторизація відбуваться через JWT.
Я використовую два токени (Access and Refresh). Access token stores in localStorage, Refresh in httpOnly cookies.
`/auth/login` - Login page
`/auth/signup` - Registration page
На цій сторінці є валідація через інтерфейс `/utils/validator.ts`, де використовується наслідування.
`/dashboard` - Manuals page
На цій сторінці знаходяться всі доступні інструкції. По кліку на інструкцію можна перейти у режим будування.
`/builder/:id` - Builder page
На цій сторінці можна щвидко побудувати інструкцію з секціями. Кожне поле вводу це `contenteditable` параграф (`/components/EditableText.vue`).
Для завантаження файлів я використав Drag&Drop API `/components/MediaReceiver.vue`
`/preview/:id` - Preview page
> Обробки на випадок, якщо доступ до інструкці заблокований (неіснує або іншого користувача) 'НЕМАЄ!!!'