Для создания этого сайта была проведена большая работа. Изначально была идея создать сайт на основе какого-нибудь дизайн-шаблона, но, после длительного поиска решил - сделать все сам, так как нужного макета нигде не нашел.
Я отсмотрел все отечественные и зарубежные примеры сайтов, собирая интересные фичи и возможности, которые мог бы использовать в разработке. Данный сайт собран на основе https://newbookmodels.com/ - как по мне самый удачный вариант сайта по поиску моделей. Я взял много идей для компонентов оттуда, а так же добавил несколько интересных решений с других сайтов.
От первоначальной идеи, где я планировал только делать фронтэнд пришлось отказаться. Сделал бекэнд на основе Django + DRF .
Для админки:
логин: admin
пароль: zaqzaq123456
Самая большая проблема была в контенте для сайта. Я отказался от идеи брать знаменитостей или моделей, чтобы не нарушать авторских прав. С помощью Stable Diffusion сделал 13 моделей + портфолио для каждого .
Фронтэнд часть была реализована с помощью React + Redux Toolkit + TypeScript + SCSS .
Компоненты галерии, отзывов, карточек моделей были разработаны без использования дополнительных библиотек с нуля.
Самая сложная часть этого сайта - поиск. Нужно было создать масштабируемый компонент, который показывает рандомные карточки, но при переходе между страницами не подгружал базу заново, но и не загружал всю базу поиска сразу. Готового решения для DRF не нашел - написал сам.
Еще одной сложной частью бекэнда была фотогалерея. В Django сделал возможность, при загрузке фотографии, чтобы загружалось 3 версии фотографии в разные папки (оригинал, средняя и маленькая фотографии), чтобы можно было использовать в галерее компоненты нужных размеров.
Всего было сделано 8 роутов в Django для получения нужных данных. В админ-панеле добавил дополнительные возможности для поиска, сортировки и редактированию страничек.
В этом сайте я отработал новые для себя технологии: Redux Toolkit, TypeScript, роутинг через createBrowserRouter, Django DRF, библиотеки axios, classnames, React Awesome Reveal, React Intersection Observer, а так же саму связку React + Django + Redux Toolkit.