Skip to content

PLAN.md

Latest commit

 

History

History
99 lines (73 loc) · 4.85 KB

PLAN.md

File metadata and controls

99 lines (73 loc) · 4.85 KB

План выполнения проекта: Telegram Chat App

Описание

Разработка простого чат‑приложения с фронтендом на React + TypeScript (Vite) и бэкендом на Python + FastAPI, с деплоем фронта на Vercel и бэка на Render.

Этапы реализации

1. Инициализация проекта и структура

  • Создать репозиторий telegram-chat-app на GitHub.
  • Добавить базовую структуру:
    • backend/ для FastAPI‑приложения.
    • frontend/ для React/Vite‑приложения.
    • PLAN.md, README.md, REVIEW.md для документации.
  • Настроить .gitignore для исключения venv, node_modules, .env*, __pycache__ и т.п.

2. Бэкенд (Python + FastAPI)

  • Инициализировать FastAPI‑приложение в backend/main.py.
  • Реализовать REST API:
    • GET /messages — вернуть список сообщений.
    • POST /messages — добавить новое сообщение.
  • Сделать простое хранилище сообщений в памяти (список в Python).
  • Описать модель сообщения с помощью Pydantic.
  • Добавить CORS‑настройки через CORSMiddleware с указанием домена фронтенда.

3. Фронтенд (React + TypeScript + Vite)

  • Инициализировать проект Vite (шаблон React + TS) в папке frontend/.
  • Создать основные компоненты:
    • MessageList — список сообщений.
    • MessageItem — отдельное сообщение.
    • MessageInput — форма отправки нового сообщения.
  • Подключить API (через fetch или axios):
    • При загрузке страницы получать сообщения с GET /messages.
    • При отправке формы отправлять POST /messages и обновлять список.
  • Добавить базовую обработку состояний: загрузка, ошибка, отправка.

4. Интеграция фронтенда и бэкенда локально

  • Запустить FastAPI локально на http://localhost:8000.
  • Настроить во фронтенде переменную окружения VITE_API_URL:
    • Для локальной разработки: http://localhost:8000.
  • Убедиться, что:
    • сообщения загружаются из бэкенда;
    • новые сообщения отправляются и отображаются после обновления.

5. Деплой

Backend (Render)

  • Создать Web Service на Render из папки backend/ репозитория.
  • Описать зависимости в requirements.txt.
  • Настроить команду запуска uvicorn main:app --host 0.0.0.0 --port <PORT>.
  • Проверить доступность эндпоинтов по публичному URL.

Frontend (Vercel)

  • Подключить репозиторий к Vercel.
  • Указать:
    • Build Command: npm run build.
    • Output Directory: dist.
  • Настроить переменную окружения:
    • VITE_API_URL = публичный URL бэкенда на Render.
  • Убедиться, что прод‑фронтенд успешно обращается к прод‑бэкенду.

6. Документация и саморевью

  • Описать в README.md:
    • краткое описание проекта;
    • инструкции по локальному запуску;
    • инструкции по деплою (Vercel + Render);
    • структуру проекта.
  • Заполнить REVIEW.md:
    • что было сделано;
    • с какими проблемами столкнулся (CORS, деплой, переменные окружения, git);
    • что можно улучшить в будущем.

Технический стек

  • Frontend: React 18, TypeScript, Vite.
  • Backend: Python 3.12, FastAPI, Uvicorn.
  • Хостинг: Vercel (frontend), Render (backend).
  • Контроль версий: Git, GitHub.

Ключевые точки внимания

  • Чистая структура проекта: отдельные frontend/ и backend/.
  • Явное использование переменных окружения (VITE_API_URL) для API‑адреса.
  • Корректная CORS‑настройка для работы фронта и бэка на разных доменах.
  • Рабочее демо на публичных URL (Vercel + Render).