Как создать приложение Github для поиска пользователей с помощью Next.js и Tailwind CSS
web-monetization beginners nextjs reactjs frontend beginners-guide guide frontend-development tailwindcss

Как создать приложение Github для поиска пользователей с помощью Next.js и Tailwind CSS

30 апреля 2022 г.

Всем привет. В этом проекте мы собираемся создать приложение для поиска пользователей GitHub с использованием Github API.


Мы разработаем пользовательский интерфейс приложения с помощью Tailwind CSS и Next.js в качестве основы.


Мы будем использовать Github API для извлечения данных профиля и их отображения.


Вот изображение приложения, которое мы собираемся создать:



![Давайте создадим приложение для поиска пользователей Github с помощью Next.js и Tailwind CSS.]
Давайте создадим приложение Github для поиска пользователей с помощью Next.js и Tailwind CSS.


Это вызов frontendmentor.io, и наша цель — сделать этот дизайн как можно ближе к заданному дизайну.


Он будет полностью адаптивным, а также иметь [темный режим] (https://dev.to/raivikas/add-dark-mode-in-nextjs-app-using-tailwind-css-dark-mode-220e). f функциональность.


[Демонстрационная ссылка проекта] (https://github-user-finder-by-raivikas.vercel.app/)


[Ссылка проекта на Github] (https://github.com/raiv200/github-user-finder)


Итак, начинаем строить 🚀 :


Создайте приложение Next.js с помощью CSS попутного ветра:


npx create-next-app my-project // без установленного Tailwind CSS


или


npx create-next-app -e with-tailwindcss my-project // с помощью Tailwind CSS


Установите необходимые пакеты npm:


  1. Установите @heroicons/реагировать.

  1. Установите следующие темы.

``` ударить


npm установить следующие темы @heroicons/реагировать


Создание компонентов и добавление функциональности темного режима


Прежде всего, создайте папку components в корне каталога и добавьте эти файлы:


  1. Аватар.js

  1. Загрузка.js

  1. Лого.js

  1. Navbar.js

  1. GithubUser.js

  1. SearchBar.js

  1. UserBio.js

  1. UserData.js

  1. UserProfile.js

  1. UserStats.js

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


Один важный момент перед этим: откройте файл _app.js внутри каталога pages и добавьте следующий код:


Внутри _app.js:


```javascript


импортировать 'tailwindcss/tailwind.css'


импортировать '../styles/globals.css'


импортировать {ThemeProvider} из «следующих тем»


функция MyApp({Компонент, pageProps}) {


возврат (


<Атрибут ThemeProvider="класс">


<Компонент {...pageProps} />



экспорт MyApp по умолчанию


Затем откройте файл tailwind.config.js и добавьте ключ darkMode со значением class следующим образом:


Внутри tailwind.config.js:


```json


модуль.экспорт = {


содержание: [


'./страницы/*/.{js,ts,jsx,tsx}',


'./компоненты/*/.{js,ts,jsx,tsx}',


тема: {


продлевать: {


анимация: {


wiggle: 'покачивание 1 с легким входом-выходом',


wiggle_reverse:'wiggle_reverse 0,3 с.


ключевые кадры: {


покачиваться: {


'0%, 100%': { преобразование: 'поворот (-60 градусов)' },


'50%': { преобразование: 'поворот (60 градусов)' },


wiggle_reverse: {


'0%': {преобразование: 'повернуть (90 градусов)'},


'100%': { преобразование: 'поворот (0 градусов)' },


темный режим: "класс",


плагины: [],


Затем файл next.config.js и добавьте домены для изображений следующим образом:


Внутри next.config.js:


/* @type {import('next').NextConfig} /


модуль.экспорт = {


картинки: {


домены: ["nextjsdev.com", "avatars.githubusercontent.com"]


реагироватьStrictMode: правда,


Я добавил две пользовательские анимации, которые я использую в этом приложении.


Теперь вставьте этот код один за другим в каждый компонент:


Внутри Avatar.js:


```javascript


импортировать изображение из «следующего/изображения»;


импортировать Vercel из "../public/vercel.svg"


постоянный аватар = ({imageURL}) => {


возврат (



{URL изображения ? (


<Изображение


источник = {URL-адрес изображения? URL-адрес изображения: Vercel}


ширина = "120"


высота = "120"


objectFit="обложка"


имя_класса = "закругленный-полный"


Изображение не найдено



экспортировать аватар по умолчанию


Внутри Loading.js:


```javascript


экспортировать константную загрузку = () => {


возврат (





<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5,373 0 12h4zm2 5.291A7.962 7,962 0 014 12H0c0 3,042 1,135 5,824 3 7,938l7z-2. </путь>




Внутри Logo.js:


```javascript


импортировать ссылку из 'далее/ссылка'


const Логотип = () => {


возврат (


<Ссылка href="/">




разработчик





экспорт логотипа по умолчанию


Внутри Navbar.js:


```javascript


импортировать {SunIcon} из '@heroicons/react/outline'


импортировать { MoonIcon } из '@heroicons/react/solid'


импортировать логотип из './Logo'


импортировать {useTheme} из «следующих тем»


импортировать {useState, useEffect} из «реагировать»


const Navbar = () => {


const { systemTheme, theme, setTheme } = useTheme();


const [mounted, setMounted] = useState (false);


использоватьЭффект(() => {


установитьMounted (истина);


константа renderThemeChanger = () => {


const currentTheme = тема === 'система' ? системаТема : тема


если (!mounted) вернуть ноль;


если (currentTheme === 'темный') {


возврат (




Светлый


<SunIcon


className="ml-1 встроенный блок h-8 w-8 текст-янтарь-400 анимация-покачивание "


onClick={() => setTheme('свет')}




} еще {


возврат (




Темный


<Иконка Луны


className="ml-1 встроенный блок h-8 w-8 text-grey-600 animate-wiggle_reverse"


onClick={() => setTheme('темный')}




возврат (



<дел>


<Логотип />



{renderThemeChanger()}



экспортировать панель навигации по умолчанию


Внутри GithubUser.js:


```javascript


импортировать UserProfile из './UserProfile'


импортировать UserBio из './UserBio'


импортировать UserStats из './UserStats'


импортировать UserData из './UserData'


const GithubUser = (реквизит) => {


константная дата = новая дата (props.data.created_at)


const newDate = date.toDateString(4, 10).slice(4, 15)


возврат (



<Профиль пользователя


имя={реквизит.данные.имя}


дата = {новая дата}


имя пользователя = {реквизиты.данные.логин}


imageURL={props.data.avatar_url}




<UserStats


репозитории={реквизиты.данные.public_repos}


последователи = {props.data.followers}


следующее={реквизиты.данные.следующие}


<Данные пользователя


location={реквизиты.data.location}


twitterUsername={реквизиты.данные.twitter_username}


блог={реквизиты.данные.блог}


компания={реквизиты.данные.компания}




экспортировать по умолчанию GithubUser


Внутри SearchBar.js:


```javascript


импортировать {SearchIcon} из '@heroicons/react/outline'


const SearchBar = ({userName, handleClick, userRef}) => {


возврат (




<ввод


имя = "поиск"


ссылка = {userRef}


placeholder="Ищите имя пользователя GitHub..."


className="text-md mt-1 w-[400px] rounded-md bg-grey-200 px-2 py-2 font-mono leading-6 text-slate-500 placeholder-neutral-400 продолжительность перехода-300 легкость- в фокусе: контур-нет темный: bg-[# 2b365e] темный: текст-серый-50 темный: заполнитель-шифер-500"


<кнопка


onClick={handleClick}


className=" text-md mx-auto h-10 rounded-md bg-grey-50 px-4 font-mono font-medium text-blue-600 shadow-xl продолжительность перехода-300 easy-in hover:bg-blue- 500 hover:text-blue-100 dark:bg-[#5176ff] dark:text-white dark:hover:bg-blue-600 "


Поиск




экспортировать SearchBar по умолчанию


Внутри UserBio.js:


```javascript


импортировать React из «реагировать»


const UserBio = ({био}) => {


возврат (



Био-{био === ноль? «Недоступно» :bio}



экспортировать UserBio по умолчанию


Внутри UserData.js:


```javascript


импорт {


МестоположениеMarkerIcon,


значок ссылки,


ОфисЗданиеЗначок,


} из '@heroicons/react/solid'


const UserData = ({местоположение, twitterUsername, блог, компания}) => {


возврат (






{место нахождения ? расположение : "Недоступно"}





<svg


ширина = "20"


высота = "20"


заполнить = «текущий цвет»


className="текст-небо-400 непрозрачность-100"





<а


href={https://twitter.com/${twitterUsername}}


цель = "_ пусто"


{Имя пользователя в Твиттере ? twitterUsername : "Недоступно"}









{Компания ? компания: "Недоступно"}





экспортировать UserData по умолчанию


Внутри UserProfile.js:


```javascript


импортировать аватар из './Avatar'


const UserProfile = ({имя, дата, имя пользователя, URL-адрес изображения}) => {


возврат (



<Аватар imageURL={imageURL} />




{название}{' '}



{имя пользователя && @${имя пользователя ? имя пользователя :'Недоступно'}}




{username &&


Присоединился{' '}



{дата ? дата :"Недоступно"}



}




экспортировать пользовательский профиль по умолчанию


Внутри UserStats.js:


```javascript


импортировать React из «реагировать»


const UserStats = ({repos,followers,following}) => {


возврат (





Репо




{репо? репозитории: "Недоступно"}






Последователи




{последователи? подписчики :"Недоступно"}






Следующий




{следующий? следующее: "Недоступно"}





экспортировать UserStats по умолчанию


Теперь откройте терминал и запустите приложение, выполнив команду:


``` ударить


нпм запустить разработчик


Приложение может работать или может показывать какую-то ошибку, потому что мы еще не завершили приложение, так что не беспокойтесь об этом.


Чтобы получить Github API и отобразить данные


Теперь настал последний шаг. Перейдите к index.js внутри каталога pages, удалите весь код внутри него, а затем вставьте внутрь этот код:


Внутри index.js:


```javascript


импортировать заголовок из 'следующего/заголовка'


импортировать SearchBar из '../components/SearchBar'


импортировать панель навигации из «../components/Navbar»


импортировать GithubUser из «../components/GithubUser»


импортировать {useState, useRef, useEffect} из «реагировать»


импортировать {загрузка} из '../components/Loading'


функция экспорта по умолчанию Home() {


пусть API = 'https://api.github.com/users/octocat'


const userRef = useRef (нуль)


const [имя_пользователя, setUserName] = useState('')


const [данные, setData] = useState('')


const [isLoading, setLoading] = useState (false)


функция handleClick() {


setUserName(userRef.current.value)


использоватьЭффект(() => {


установить загрузку (истина)


если (имя пользователя) {


API = https://api.github.com/users/${userName}


выборка (API)


.затем((рез) => res.json())


.тог((данные) => {


setData(данные)


установить загрузку (ложь)


}, [имя пользователя]);


если(!данные) (


Нет данных профиля.


возврат (



<Голова>


Приложение GitHub для поиска пользователей


<ссылка rel="icon" href="/favicon.ico" />



<Панель навигации />


{Идет загрузка? <Загрузка/> :


<SearchBar


имя_пользователя={имя_пользователя}


обработчикклик={handleClick}


пользовательская ссылка = {пользовательская ссылка}




Вставив код, сохраните приложение, перезапустите сервер и посетите localhost:3000, и вы увидите, что приложение работает.


Вы можете ввести любое действительное имя пользователя GitHub, и вы увидите, что данные отображаются во внешнем интерфейсе.


Вывод


Надеюсь, вы смогли создать это замечательное приложение для поиска пользователей Github для своего следующего проекта. Не стесняйтесь подписываться на меня в [Твиттере] (https://twitter.com/raivikas200) и делиться этим, если вам понравился этот проект 😉.


На создание этого проекта у меня ушло 4-5 дней, и я был бы признателен ✌️, если бы вы могли поделиться этой записью в блоге.


Если вы считаете, что это было полезно, посетите мой веб-сайт блога nextjsdev.com, подпишитесь на меня в Twitter и свяжитесь со мной в LinkedIn. .


Если вы где-то застряли и не смогли найти решение, вы можете ознакомиться с моим завершенным репозиторием [Github Repo] (https://github.com/raiv200/github-user-finder) здесь.


Увидимся в моем следующем блоге ✌️. А пока берегите себя и продолжайте строить проекты.


Некоторые полезные ссылки:


  1. [Документы по установке Next.js и Tailwind] (https://tailwindcss.com/docs/guides/nextjs)

  1. [Ссылка на Github для проекта] (https://github.com/raiv200/github-user-finder)

Свяжитесь со мной:


  1. [Ссылка на Твиттер] (https://twitter.com/raivikas200)

  1. [Ссылка на LinkedIn] (https://www.linkedin.com/in/raivikas200/)

  1. [Ссылка на Facebook] (https://www.facebook.com/raiv200/)

  1. [Ссылка на Github] (https://github.com/raiv200)

Также опубликовано [Здесь] (https://nextjsdev.com/lets-build-github-user-finder-app-with-next-js-tailwind-css/)


Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE