Free-to-play Games Website

Сайт, повторяющий интерфейс сайта с бесплатными играми, с использованием Free-To-Play Games API. На данный момент deployment на Github Pages не работает, потому что я не придумала, как обойти CORS.

Что реализовано?

• Главная страница игр с фильтрацией по платформе, жанру и сортировкой по 4-м категориям.
• Отдельная страница для каждой игры с постером, названием, кратким описанием, дополнительной информацией о дате выхода, создателе и т.д.
• Кнопка возврата на самый верх страницы, кастомные дропдауны и скелетоны-загрузчики.
• Мобильная версия сайта со скрывающимся меню в хедере.
• При переходах по ссылкам сраница не перезагружается (для удоства ссылки, ведущие на нереализованные страницы, ведут на главную)
• Сохраняются значения выбранных фильтров (sessionScoped)

Использованные технологии

• TypeScript, JavaScript
• React + Next.js
• Ant Design (UI Framework)
• Redux, React Hooks (кастомые - для получения информации с сервера), Reducers (для отслеживания состояния фильтров)
• proxy server

Как запустить?

Заметка: я использовала Node v18.17.1

Так как существует CORS policy, которую достаточно сложно обойти, я создала прокси-сервер (server.js) на Node.js с использованием Express, который подменяет URL адрес, когда мы обращаемся к ресурсу. То есть создается видимость, что берем всю информацию с localhost.

Как использовать этот прокси сервер: в package.json удобнее всего будет прописать команду для запуска и сервера, и приложения Next:

"scripts": {
    "dev": "concurrently \"npm run dev:client\" \"npm run dev:server\"",
    "dev:client": "next dev -p 3001", 
    "dev:server": "node server.js",

Таким образом, при запуске проекта командой npm run dev на 3001 порту открывается приложение, а на 3000 порту открывается прокси, все пишется в консоль.

Что-то пошло не так?

• удостоверьтесь, что в файле src/app/redux/services/gamesApi.js написана такая строчка: baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:3000/api' })
• удостоверьтесь, что в файле next.config.js нет строки output: 'export'
• проверьте, не заняты ли используемые порты
• проверьте консоль!

Скриншоты интерфейса (десктоп)

Скриншоты интерфейса (мобильный)

Главная страница	Главная страница с открытым меню

Страница игры	Главная страница с применеными фильтрами