Коллекционер

Интерактивное веб-приложение для отображения и фильтрации коллекции фотографий с использованием API

Open Demo

Tech stack:

• React
• Typescript
• Next
• MUI

Реализовано:

• Аунтификация пользователя
• Страницы отображения коллекции фотографий и избранных фотографий пользователя
• Фильтрация фотографий по категориям
• Сортировка фотографии по популярности, дате добавления
• Постраничная навигация
• Двойной тап для лайка фото

Для получения фотографий использовалось Unsplash API
Хранение данных в IndexDB

🤸 Quick Start

Следуйте этим шагам, чтобы запустить проект локально.

Предварительные условия

Убедитесь, что на вашем компьютере установлено следующее:

• Git
• Node.js
• npm (Node Package Manager)

Клонируйте репозиторий

git clone https://github.com/monstrikwho/photo_collection.git
cd photo_collection

Установка

Установите зависимости проекта с помощью NPM:

npm install

Настройка переменных среды

Создайте новый файл с именем .env в корне вашего проекта и добавьте следующий контент:

NEXT_PUBLIC_API_URL=https://api.unsplash.com
NEXT_PUBLIC_ACCESS_KEY=

Получить Access key можно, зарегистрировавшись на Unsplash Developers

Запустите проект локально

npm run dev

Перейдите по ссылке http://localhost:3000.