Разработка веб-сайта для компьютерного магазина «Pixel»

1.

Министерство образования и науки Пермского края
Государственное бюджетное профессиональное образовательное учреждение
«Соликамский горно-химический техникум»
Разработка веб-сайта для
компьютерного магазина
«Pixel»
Разработал М.А Соколов, группа ИСП-3
Проверил Д.А. Костылев
Соликамск, 2024

2.

Введение
В эпоху цифровых технологий и
информационной перегрузки важно иметь
удобный инструмент для организации и
учета прочитанной литературы. Стремясь
помочь читателям в систематизации их
книжных коллекций и отслеживании
прогресса чтения, проект "BookShelf" ставит
перед собой цель – создание современного
и удобного веб-приложения для учета
прочитанных книг.
В рамках данного проекта были применены
современные веб-технологии (React, Laravel,
SQLite), что позволило создать качественное
и функциональное веб-приложение,
способное эффективно помогать
пользователям в организации их
читательского опыта и достижении личных
целей в чтении.
Задачи проекта:
Разработка интуитивно понятного и эстетически
привлекательного веб-интерфейса, вдохновляющего
пользователей на чтение и ведение читательского дневника.
Реализация полноценного функционала для управления личной
библиотекой, включая добавление книг, отслеживание
прогресса чтения и ведение заметок.
Обеспечение безопасности и конфиденциальности данных
пользователей через современные методы аутентификации и
авторизации.
Создание адаптивного дизайна для комфортного
использования приложения на различных устройствах.
Внедрение социальных элементов для создания читательского
сообщества и обмена впечатлениями о книгах.

3.

Особое внимание в проекте уделено следующим аспектам:
Адаптивный дизайн. Приложение корректно отображается на различных устройствах: компьютерах, ноутбуках, планшетах и
смартфонах. Это обеспечивает удобство использования для всех категорий пользователей, независимо от предпочитаемого
ими способа ведения читательского дневника.
Интуитивно понятный интерфейс. Особое внимание было уделено простоте и удобству использования приложения.
Продуманная структура, четкая организация личной библиотеки и логичное расположение элементов управления позволяют
пользователям легко добавлять книги, отслеживать прогресс чтения и делать заметки.
Детальная информация о книгах. Каждая книга в библиотеке сопровождается подробной информацией: обложка, автор,
описание и личные рецензии. Это позволяет пользователям вести подробный учет прочитанной литературы и делиться
впечатлениями.
Актуальность проекта обусловлена растущим интересом к систематизации читательского опыта и потребностью в удобных
инструментах для отслеживания прочитанных книг. Создание функционального веб-приложения для учета книг позволяет не
только получить практические навыки в современной веб-разработке, но и создать полезный инструмент для читательского
сообщества.
При разработке веб-приложения использовались современные технологии:
• Frontend: React.js, Tailwind CSS
• Backend: Laravel (PHP)
• База данных: SQLite
• Аутентификация: Laravel Sanctum

4.

Структура сайта
Клиентская часть
(backend)
Корневая папка сайта
Серверная часть
(backend)

5.

Главная страница сайта
Главная страница
представляет из себя шапку
(header) со стилизованной
навигационной панелью,
блоки с различной текстовой
информацией, изображения и
кнопки.

6.

Страница библиотеки
На страницу личной
библиотеки можно добавлять
книги через модальное окно
указав название книги, автора,
рейтинг и прочее, а также по
желанию прикрепив обложку
книги.

7.

Страница профиля
На странице профиля
пользователя можно
заметить имя и
фамилию, аватар,
соцсети и статистику
чтения.
Также есть
возможность выйти
из учетной записи и
отредактировать
информацию
профиля, в том числе
поменять аватар

8.

Страница часто задаваемых вопросов (FAQ)

9.

Авторизация и регистрация

10.

Заключение
Результатом проделанной работы стал функциональный и современный веб-сайт, разработанный с использованием передовых
технологий React, TypeScript и Tailwind CSS. Проект имеет четкое разделение на frontend и backend части, что обеспечивает надежную и
масштабируемую архитектуру.
Сайт построен с учетом современных требований к веб-разработке, включая:
• Компонентный подход к разработке интерфейса
• Типизацию кода с помощью TypeScript для повышения надежности
• Стильный и адаптивный дизайн благодаря Tailwind CSS
• Контекстное управление состоянием приложения
• Модульную структуру с четким разделением ответственности между компонентами
Разработанное веб-приложение полностью отвечает поставленным задачам и готово к размещению в сети. Оно предоставляет
пользователям удобный интерфейс для взаимодействия с контентом, обеспечивая быструю загрузку страниц и плавную навигацию.
Однако разработка – это лишь первый шаг на пути к успешному онлайн-присутствию. В дальнейшем рекомендуется:
• Расширить функциональность путем добавления новых компонентов и страниц
• Улучшить пользовательский опыт на основе обратной связи
• Оптимизировать производительность приложения
• Внедрить дополнительные интерактивные элементы
• Регулярно обновлять зависимости для поддержания безопасности и стабильности
Созданная архитектура проекта позволяет легко масштабировать и модифицировать функционал в соответствии с растущими
потребностями пользователей. Четкая структура кода и использование современных практик разработки обеспечивают надежную
основу для дальнейшего развития проекта.