Mereke - приложение для бронирование билетов
Для разработки приложения были использованы Next.js для фуллстэка и PocketBase для бэкенда и датабазы. Остальные технологии указаны ниже:
Next.js 14 - позволяет утилизировать server-side rendering который позволяет быстрее грузить сайты, и также обрабатывать клиентскую и серверную часть вместе на одном фреймворке. Данная технология идеальна подходит для небольших сайтов.
PocketBase- бэкенд, который позволяет создавать базы данных, работать с ними. Данная технология очень проста в использовании и легко интегрируется к nextjs.
Next.js v14.2.3
Pocketbase
TypeScript v5.4.5
Tailwind CSS v3.0Дизайн для сайта разрабатывался на figma:
Для запуска приложения необходимо клонировать данный репотизорий и загрузить данный код:
npm run dev
or
yarn dev
[Важно!] Программа будет работать только в серверной части, так как данные находятся на локальном сервере
Для данной веб приложения был использован Pocketbase. Pocketbase позволяет хранить данные а также совершать CRUD (CREATE, READ, UPDATE, DELETE) методы над ними с помощью API запросов. Ниже предоставлены таблицы которые были использованы:
| Events | |
|---|---|
| id | key |
| name | string |
| Description | string |
| Datetime | datetime |
| Location | string |
| City | string |
| Ticket | foreign key |
| Datetime | datetime |
| Type | type |
| Photo | url |
| Tickets | |
|---|---|
| id | key |
| isBought | boolean |
| price | number |
| owner |
Каждый Events может содержать в себе несколько tickets, и пользователи могут покупать несколько из них
Аутентификация была реализована с использованием технологии NextAuth.js. Авторизация может быть сделана двумя путями: OAuth or Credentials. Пользователь может зайти через аккаунт Github либо использовать свою почту/пароль. На сайте поддерживается регистрация, логин и логаут.
Мероприятия отображены на главной странице. Для доступа к мероприятиям авторизация не обьязателен. Пользователь может нажать на один из ивентов чтобы зайти на новую страницу и получить более детальную информацию об ивенте:
Страница /events/:
Страница /events/{eventid}/:
В целях тестирования, для каждого мероприятия есть один билет. Пользователь должен быть авторизован для того чтобы покупать билет. В обратном случае, он будет перенаправлен на страницу авторизации. Как только пользователь купит билет, он может получить к нему доступ на своем личном кабинете:
В личном кабинете пользователь может увидеть купленные им билеты. Билеты показываются путем фильтра датабазы с помощью api с билетами которые отмечены именем пользователя. Для доступа в личный кабинет необходима авторизация.
-
Authorization - Были трудности с имплементации авторизации, тк PocketBase новая для меня технология и была немного непонятна именно для создании авторизации. В последсвтии было принято решение использовать NextAuth.js технологию который помогает легко интегрировать авторизацию включая OAuth
-
Server and Client Side - Next.js совмещает в себе и фронт и бэк но это создает трудности так как серверная часть не должна пересекаться с клиентским. Сложность заключается в том что я не мог использовать async/await функции на клиентской части и точно также, имплементировать форму/кнопки паралельно рендеря компоненты сайта. Приходилось создавать api, отделять страницы чтобы они могли находиться на разных сторонах
-
Tickets - было тяжело связывать many-to-one-relations в датабазе, тк Pocketbase к сожалению, не позволял такое. Поэтому сайт ограничивается один билетом на одно мероприятие