зайдите посмотреть приложение → kanban.yuandaputri.com

Привет и добро пожаловать!

Сегодня замечательный день, чтобы поделиться с вами своей работой. Это простое, всем известное и полезное приложение. Канбан-приложение. Канбан — это визуальная система для управления работой на протяжении всего процесса. Он показывает вам рабочий процесс от невыполненной работы до завершения.

Создание приложения Kanban было начато в марте 2023 года, но оно было отложено до июля 2023 года, и я снова отвлекся, потому что мне нужно было завершить финальный проект. И да, это будет сделано в августе 2023 года.

Технология, использованная в этом проекте

Большинство инструментов и фреймворков, которые я использовал в этом проекте, основаны на том, чему я научился в Purwadhika Bootcamp.

Я научился использовать ReactJS для внешнего интерфейса. Redux для управления глобальным состоянием. TailwindCSS для стилизации всего, а также я использую некоторые компоненты из Chakra UI и т. д.

В качестве серверной части я использую NodeJS и Express для создания серверной части. Jsonwebtoken, чтобы получить токен для авторизации. Nodemailer для отправки электронной почты пользователю (проверка электронной почты). И многое другое.

В этом проекте я использую технологию Cronjob, то есть node-cron, чтобы мое приложение могло отправлять вам уведомление по электронной почте, если задача пропустила крайний срок.

Для управления базой данных я использую MySQL. Я пишу необработанный запрос в коде на стороне сервера.

Возможности приложения Канбан:

В приложении Kanban я создал всего несколько функций, но они мне очень нравятся! Давайте посмотрим, что я создал:

  1. Войти и зарегистрироваться (можно использовать метод входа в Google)

Существует два способа входа в приложение Kanban. Если вы незарегистрированный пользователь, вы можете просто войти в систему напрямую, используя Google Sign In. Если вы выберете этот способ, вам больше не понадобится пароль: просто войдите в приложение Kanban, нажав кнопку «Войти через Google». Но если вы уже зарегистрировались в качестве пользователя, введя вручную свой адрес электронной почты, имя пользователя и пароль, вы не сможете выбрать метод входа в Google. Это произошло потому, что я добавилregisted_type в таблицу пользователей в базе данных, чтобы различать, какой пользователь входит в систему с помощью Google.

И еще одна вещь: если вы выберете метод входа в Google, вы автоматически пройдете проверку при входе в систему. С другой стороны, если вы вводите форму вручную, вам все равно придется проверить свою электронную почту, а затем щелкнуть ссылку для подтверждения.

Я создал эту функцию, используя Google OAuth2. Супер крутой Гугл!

2. Домашняя страница (доступен темный режим, здорово, не правда ли?)

Это домашняя страница в светлой теме. Я использую Tailwind CSS, чтобы изменить тему на темную. Чтобы она не менялась снова при обновлении страницы, я также сохранил тему в localStorage. Чтобы обработать тему изменения, я использую кнопку со значком солнца/луны. Сменить тему с помощью Tailwind CSS очень легко.

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

3. Добавить карточку — это добавить список дел

Для MVP этого проекта я предоставляю 3 карточки разного статуса: Todo, On go и Done. Пользователь может добавить свой список дел в каждую карточку. Название обязательно. Пользователь не может оставить форму пустой. Описание — это то, что отображается на главной странице. Чтобы выбрать дату, я использую компонент Date Picker из пользовательского интерфейса Chakra.

4. Изменить задачу

Пользователь может редактировать свой список, щелкнув один из списков в каждой карточке.

5. Получить уведомление по электронной почте

Вы получите уведомление, если пропустите крайний срок! Я создал эту функцию с помощью Cronjob на стороне сервера. Это что-то новое, что я узнал за несколько дней и реализовал эту функцию в приложении Kanban.

Более подробную информацию о моем коде можно найти в моем репозитории GitHub по kanban-react, а также be-kanban

Спасибо, что уделили время чтению моей работы! Пожалуйста, не стесняйтесь обращаться ко мне по электронной почте/телефону, если вы заинтересованы в моем портфолио. Я с нетерпением жду возможности сотрудничать с вами как с командой.

Увидимся снова~ ^^/

Посмотрите другие мои портфолио:

Спасибо, что дочитали до конца. Пожалуйста, подумайте о том, чтобы подписаться на автора и эту публикацию. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.