Посмотреть демо на Netlify

Это SSR-приложение, разработанное с использованием React, Next.js и TypeScript, которое отображает список покемонов, полученных с открытого Pokemon API
Пользователи могут регистрироваться, логиниться, искать и фильтровать покемонов, просматривать детальную информацию о конкретном покемоне, а также добавлять их в "любимые" и "избранное".

• Используется Auth0 (форма входа + социальные сети).
• Бесплатный тариф активен в течение 22 дней.
• После входа сохраняется информация о пользователе (email, имя, любимые/избранные покемоны) в MongoDB.

• Список покемонов — по 20 карточек с возможностью подгрузки ещё.
• Добавление в "любимые" и в "избранное".
• Поиск по имени с debounce (lodash).
• Фильтрация и сортировка:
  • по росту, весу, типу, способностям;
  • сортировка по имени (A-Z, Z-A).
• Страница покемона — полная информация по выбранному покемону.
• Адаптивный дизайн — приложение удобно на любых устройствах.

• React + Next.js (SSR)
• TypeScript
• TailwindCSS + Shadcn + Lucide-React — UI и иконки
• Axios — HTTP-запросы
• Auth0 — авторизация
• MongoDB Atlas + Prisma — база данных
• Lodash — дебаунс поиска

Локально

1. Клонируйте репозиторий: git clone https://github.com/HelenVirtanen/pokemon-react-ts-next
2. Перейдите в папку проекта: cd pokemon-react-ts-next
3. Установите зависимости: npm i
4. Запустите приложение: npm run start

Приложение будет доступно по адресу http://localhost:3000

Для разработки

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

• Pokemon API
• Next.js Documentation
• Learn Next.js
• Next.js GitHub repository
• next/font

Netlify Docs Netlify Environment variables Vercel Platform Next.js deployment documentation Geist