🔥 Проект: Цитаты Джейсона Стетхема

О проекте

Этот проект разрабатывается как личный пет-проект с целью практики в веб-разработке и изучения современных технологий. Здесь можно генерировать случайные цитаты, зарегистрироваться и добавлять свои цитаты, оценивать чужие и делиться с ними со своими братанами.
Проект носит исключительно юмористический характер и создается для практики создания веб-приложений на React, Node.js (Express) + MongoDB.
Тестовая версия https://jusa11.github.io/JSQuotess/

🔨 Используемый стек технологий

📌 Frontend

• React
• Redux
• GSAP (для анимаций)
• Axios (для работы с API)
• Версктка на чистом SCSS без использования UI-библиотек, применяются Flex и Grid.

📌 Backend

• Node.js, Express.js
• MongoDB
• JWT (для аутентификации)

🚀 Запуск проекта

Локальный запуск в режиме разработки

1. Склонируйте репазиторий с GitHub

git clone https://github.com/jusa11/JSQuotes.git

2. Установка зависимостей

Для frontend-приложения:

cd JSQuotes
npm install

Для сервера
Откройте второй терминал:

cd JSQuotes/Server
npm install

3. Настройка переменных окружения

Создайте файл .env в папке Server и добавьте в него переменные окружения:

PORT=5000
MONGO_URI=your_mongodb
JWT_SECRET=your_secret_key

4. Запуск приложения

Запуск frontend

npm start

Запуск сервера

npm run dev

5. Открываем в браузере http://localhost:3000/

6. Пользователи

Тестовые данные пользователей:

Логин: SpiderMan2
Пароль: 0000

Логин: tanos4 (достиг максимального левела)
Пароль: 0000

🎈 Возможности приложения

• Генерация случайных цитат
• Анимированные планеты, движущиеся по свом орбитам, которые можно поймать и также получить случайную цитату
• Возможность зарегистрироваться и войти в личный профиль
• Возможность ставить лайки
• Возможность делиться своими мыслями
• Отображение недавно добавленных мыслей
• Отображение популярных цитат
• Поиск цитат, с выставлением фильтров
• На странице профиля показывается личная статистика пользователя по цитатам, а также отображаются понравившиеся и недавно добавленные цитаты
• Создана система уровней (левелов) для пользователей. Левел пользователя зависит от количества добавленных им цитат. Текущий уровень отображается под логином пользователя и в статистике. В статистике указавается количество цитат, которыми поделился пользователь, а также сколько осталось добавить, чтобы повысить левел
• Также добавлен прогресс-бар уровней, который показывает текущий уровень, какие пройдены, какие остались
• Адаптирован под мобильные устройства

📂 Структура проекта

JSQuotes/
├── Server/ # Серверная часть приложения
│ ├── controllers/ # Логика обработки запросов
| |	├── authController.js # Контроллер атентификации
| | ├── quotesController.js  # Контроллер взаимодействия с цитатами
| | ├── usersController.js # Контроллер действий пользователей
| ├── middleware/
| | ├── authMiddleware.js # Функция проверки токена
│ ├── models/ # Определения схем MongoDB
| | ├── Quote.js
| | ├── User.js
│ ├── routes/ # Определения маршрутов API
| | ├── authRoutes.js # Маршруты аутентификации
| | ├── quotesRoute.js # Мартшруты для взаимодествия с цитатами
| | ├── usersRoute.js # Маршруты для действий пользователей
| ├── uploads/ # Хранение файлов (аватарки пользователей)
│ ├── utils/ # Вспомогательные функции
| | ├── checkUserLevel.js # Функция проверки текущего левела пользователя
| | ├── randomQuote.js # Функция генерации случайной цитаты
| | ├── userLevels.js # Массив с левелами
| ├── .env # Переменные окружение (необходимо создать файл, см. выше)
│ └── index.js # Главный файл сервера
├── build/ # Сборка фронтенда для продакшена
├── public/ # Публичные статические файлы
├── scss/ # SCSS-стили для приложения
| ├── base/ # Базовые стили
| | ├── _base.scss
| | ├── _burger.scss
| | ├── _logo.scss
| | ├── _mixins.scss
| | ├── _normalize.scss
| | ├── _stars.scss
| | ├── _vars.scss
| ├── blocks # Отдельные по секциям и блокам
| | ├── _auth-page.scss # Пока не используется
| | ├── _buttons.scss # Стили для кнопок
| | ├── _footer.scss
| | ├── _header.scss
| | ├── _last-list-quotes.scss # Блок с последними цитатами
| | ├── _main-cards.scss # Карточки для цитат
| | ├── _nav.scss # Главное навигационное меню
| | ├── _navbar.scss # Меню для мобильных устройств в профиле
| | ├── _not-found.scss # Страница 404
| | ├── _popular.scss # Секция популярных цитат
| | ├── _profile.scss # Страница профиля
| | ├── _quote-card.scss # Вспылвающая карточка с цитатой
| | ├── _quotes-action.scss # Секция с формой для добавления цитат и с блоком с последними цитатами
| | ├── _search-form.scss # Форма поиска
| | ├── _search-overlay.scss # Оверлей для формы поиска на главной странице
| | ├── _share-form.scss # Форма для отправки цитаты
| | ├── _sidebar.scss # Меню профиля (для десктопов)
| | ├── _space-popup.scss # Попап для секции с орбитами и планетами
| | ├── _space.scss # Секция с орбитами и планетами
| | ├── _stats-profile.scss # Статистика пользователя
| | ├── _stepper-profile.scss # Шаги с левелами для пользователя
| | ├── _user-auth-popup.scss # Попап с авторизацией
| | ├── _user-card.scss # Карточка пользователя
| ├── App.scss # Главный scss файл
├── src/ # Исходный код фронтенда
│ ├── Сomponents/ # React-компоненты
| | ├── blocks/ # По отдельным блокам
| | | ├── authorization/
| | | | ├── AuthPopup.jsx # Попап для аутентификации
| | | | ├── FileDrop.jsx # drag-and-drop для аватарок при регистрации
| | | | ├── Login.jsx # Форма авторизации
| | | | ├── LogoutPopup.jsx # Выход с профиля
| | | | ├── Registration.jsx # Форма регистрации
| | | ├── footer/
| | | | ├── Footer.jsx # Главный компонент футера
| | | | ├── FooterBottom.jsx
| | | | ├── FooterTop.jsx
| | | ├── header/
| | | | ├── Header.jsx # Главный компонент хедера
| | | | ├── HeaderContent.jsx # Блок с генерацией цитаты
| | | | ├── HeaderNav.jsx # Главное меню
| | | | ├── RetroLoading.jsx # Эффект набора текста при генерации цитаты
| | | ├── popular/ # Секция с популярными цитатами
| | | | ├── Popular.jsx
| | | ├── profile/
| | | | | other
| | | | | ├── MyChart.jsx # Отображение статистики в виде диаграммы (используется библиотека Recharts)
| | | | | ├── Navbar.jsx # Навигационное меню (для мобильных устройств)
| | | | | ├── PersonBlock.jsx # Карточка пользователя
| | | | | ├── Sidebar.jsx # Навигационное меню профиля
| | | | | ├── StatsProfile.jsx # Главный компонент статистики
| | | | | ├── Stepper.jsx # Шаги по левелам
| | | | ├── FavoritePage.jsx # Страница с лайкнутыми цитатами (еще в разработке)
| | | | ├── Profile.jsx # Главная страница профиля
| | | | ├── SettingsPage.jsx # Страница с настройками профиля (еще в разработке)
| | | | ├── SharePage.jsx # Страница управления добавленных пользователем цитат (еще в разработке)
| | | ├── quotes-action/
| | | | ├── QuotesAction.jsx # Секция с формой для добавления цитат и с блоком с последними цитатами
| | | | ├── ShareForm.jsx # Форма отправки цитаты
| | | ├── space/ # Секция с планетами и орбитами
| | | | ├── Orbit.jsx # Орбиты
| | | | ├── Planet.jsx # Планеты
| | | | ├── Space.jsx # Главный компонент секции
| | | | ├── SpacePopup.jsx # Попап с цитатой при нажатии на планету
| | ├── others/
| | | ├── AuthPage.jsx # Страница авторизации (не используется)
| | | ├── Burger.jsx # Бургер для мобильных устройств
| | | ├── Error.jsx # Компонент для уведомлений (в последующем изменить название компонента)
| | | ├── FavoriteQuotesCards.jsx # Не используется
| | | ├── Filter.jsx # Не используется
| | | ├── Layout.jsx # Макет страницы для профиля
| | | ├── ListQuote.jsx # Компонент для отображения списка цитат
| | | ├── Logo.jsx # Логотип
| | | ├── MainMenu.jsx # Главное навигационное меню
| | | ├── NavigateOnLogout.jsx # Не используется
| | | ├── NotFound.jsx # Страница 404
| | | ├── QuotesCard.jsx # Карточка для цитаты
| | | ├── ScrollToTopButton.jsx # Скрол наверх
| | | ├── SearchForm.jsx # Форма поиска
| | | ├── SearchOverlay.jsx # Оверлей для формы поиска на главной странице
| | | ├── Stars.jsx # Звезды на фоне
| | | ├── UserCard.jsx # Карточка авторизованного пользователя
| | ├── redux/ # Управление состоянием приложения slices
| | | ├── slices/
| | | | ├── displayQuotesSlice.js # Управление отображения цитат
| | | | ├── likedQuotesSlice.js # Управление лайками
| | | | ├── notificationsSlice.js # Управление уведомлениями
| | | | ├── searchSlice.js # Управление поиском
| | | | ├── statsBarSlice.js # Управление статистики
| | | | ├── userSlice.js # Управление аутентификации
| | | ├── store.js
│ ├── Hooks/ # Кастомные хуки
| | ├── useGetQuotesCount.js # Получение количества цитат пользователя
| | ├── useHandleLike.js # Взаимодействие по API для управления лайками
| | ├── useOutletRef.js # Управление рефами по компонентам
│ ├── utils/ # Утилиты фронта
| | ├── checkQuoteWithID.js # Проверка на наличие ID
| | ├── generateRandomQuoteAPI.js # Генерация цитаты по API
| | ├── limitTextLength.js # Ограничение длины текста
| | ├── steps.js # Массив с левелами
│ ├── App.js # Корневой компонент React
│ ├── config.js # Конфигурационный файл с переменными
│ └── index.js
├── .gitignore
├── README.md
├── package.json
└── package-lock.json

⭐ Проблемы и улучшения

1. Реализовать просмотр всех цитат
2. Улучшить регистрацию пользователей
3. Переработать логику генерации цитат. Снизить вероятность выдачи цитаты, которая генерировалась недавно
4. Добавить комментарии и отправку личных сообщений
5. Сделать, что-то вроде таблицы лидеров
6. Добавление друзей
7. Показывать инфо о пользователе другим пользователям
8. Уведомление в виде попапа о том, что перешел на следующий уровень
9. Провести рефакторинг scss
10. Улучшить и пофиксить анимации
11. Реализовать остальные страницы профиля
12. Переработать маршруты, если пользователь не авторизован и отображение авторизации попапа в этом случае
13. Улучшить запросы из формы поиска (добавить задержку, чтобы не по каждому символу уходил запрос на сервер)
14. Сделать логику по токенам чтобы обновлялись (долговременный и кратковременный токены)
15. Провести рефакторинг фронта и серверной части. Оптимизировать код. Сейчас есть лишние моменты

📩 Связь со мной

Если у вас есть вопросы, предложения или вы хотите поучаствовать в проекте, свяжитесь со мной:

• GitHub: github.com/jusa11
• Telegram: @jusaa28
• Email: a.juiceit@gmail.com