Представляем NoteScape: Самое простое приложение для ведения заметок

Полный текст статьи читайте здесь

Введение

Здравствуйте, читатели! Это мой проект для хакатона Hashnode x PlantScale. На его создание у меня ушло около 2 недель. Все функции в той или иной мере используют базу данных PlantScale.

Посмотрите на сайте : NoteScape


Представляем NoteScape

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

Лично я обнаружил, что многие популярные приложения для ведения заметок и Todo List не очень удобны для новичков и имеют крутую кривую обучения. NoteScape не только очень удобен для новичков, но и обладает всеми необходимыми функциями.

Технологический стек

  • Plant Scale (база данных MYSQL)

  • Express и Node (для бэкенда)

  • Axios (для http-запросов)

  • React JS и Material UI (для фронтенда)

  • Framer Motion (для анимации)

  • Heroku (для хостинга)

Функции

Вот все основные функции, которые вы найдете в моем приложении:

  1. Главная страница: На главной странице у вас есть возможность зарегистрироваться/залогиниться, а также перечислены функции приложения.

  2. Регистрация: Чтобы пользоваться приложением, вам необходимо создать учетную запись. После создания учетной записи вы будете перенаправлены на страницу входа в систему для авторизации.

  3. Вход: Вы можете войти в систему, указав свой email и пароль на странице входа.

  4. Приборная панель: После входа в систему вы будете перенаправлены на приборную панель, где у вас также будет возможность выйти из системы.

  5. Создать новую заметку. Каждая заметка содержит заголовок и основной текст. Дата и время создания также добавляются автоматически. Прогресс-бары показывают, сколько символов вы можете набрать при создании/редактировании заголовка или основного текста заметки.

  6. Редактировать заметку

  7. Удалить заметку

  8. Поиск заметки

  9. Сортировка заметок. Можно сортировать по дате или по названию заметки.

  10. Сохранить заметки. Чтобы сохранить заметки, вы можете нажать на кнопку сохранения в правом верхнем углу. Это сохранит заметки в базе данных PlantScale.

Процесс создания 🔨

Для back-end я создал несколько API для различных типов запросов, таких как вход/выход, сохранение и получение заметок и т.д., используя express js. Axios использовался для отправки POST/GET запросов. Экспресс-сессии использовались для сохранения входа пользователя в систему. Подключение к базе данных PlantScale осуществлялось с помощью файла .env, который содержал URL базы данных.

Для внешнего интерфейса многие компоненты были сделаны с использованием Material UI, хотя все заметки были оформлены в собственном стиле. Также преобладает использование морфизма стекла. Анимация при загрузке страницы была реализована с помощью Framer Motion. Большая часть функциональности заметок была реализована с помощью React Hooks.

Роль PlantScale

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

В целом, это был хороший опыт, и в будущем я обязательно воспользуюсь им снова.

Проблемы

Некоторые из трудностей, с которыми я столкнулся:

  • В какой-то момент во время работы над бэкендом я потратил абсурдное количество времени на проблему CORS. В конце мне удалось решить ее с помощью учетных данных.

  • Хотя plantscale оказался очень простым в использовании, мне все равно пришлось потратить значительное количество времени, чтобы привыкнуть к нему. Это усугублялось тем, что я уже давно не использовал базу данных MYSQL в Node.js.

  • Я долго колебался между выбором Axios или Fetch для выполнения API-запросов. В итоге я выбрал Axios, поскольку у него лучше обработка ошибок и простота использования.

  • Наконец, развертывание на Heroku было большой проблемой. Думаю, мне не нужно объяснять это дальше.😅

Заключение

В конце я просто хочу сказать спасибо командам Hashnode и PlantScale за организацию этого мероприятия. Это был мой первый хакатон, и я не только хорошо провел время, работая над ним, но и узнал тонну новых вещей.

Мое приложение еще можно значительно улучшить новыми функциями, но я доволен тем, что мне удалось создать с моим скудным 1-летним опытом работы с React.

Спасибо вам 😊

Ссылки 🔗

Загляните на сайт : NoteScape

И исходный код: https://github.com/Saleh-Mubashar/NoteScape

Оцените статью
devanswers.ru
Добавить комментарий