Этот блог был создан, чтобы поделиться нашим опытом работы над проектом в команде, назначенной школой Масаи. Мы разработали клон cricbuzz.com за 5 дней в рамках нашей учебной программы. Этот клон успешно демонстрирует все функции cricbuz.com. С помощью всех членов команды, понятия, которые мы изучаем до сих пор.

Cricbuzz – это индийский веб-сайт новостей о крикете, принадлежащий Times Internet. В нем представлены новости, статьи и прямые трансляции матчей по крикету, включая видео, текстовые комментарии, статистику игроков и рейтинги команд. Для получения дополнительной информации перейдите на https://www.cricbuzz.com/.

Члены команды:

  1. Виджаяпракаш
  2. Бхимуду Гугулот
  3. МАЛЛЕЛА НИРАНДЖАН КУМАР
  4. Чайтанья Макала
  5. Приянка Дубей

Нам поставили задачу успешно клонировать веб-сайт cricbuzz.com за 5 дней.

Цель:

Нашей задачей было внедрить наши HTML, CSS, ES6, Node.js, Express.js и MongoDB, React, redux, Material UI, bootstrap, знания, которые мы получили в школе Масаи. Мы использовали этот набор навыков для создания статической и динамической копии Cricbuzz.

Как мы начинали проект

Во-первых, мы отметили все трудности, с которыми мы могли столкнуться в проекте, и сначала работали над ним, например, создали API с использованием узла JS и развернули его на Heroku, чтобы получить фактический API, а затем получили данные с сервера. Затем мы разделили работу поровну и постоянно обсуждали прогресс, хвалили работу друг друга и продолжали двигаться вперед, пока не достигли цели. Мы помогали друг другу с решениями трудностей, с которыми мы столкнулись при выполнении проекта. Мы наслаждались обществом друг друга и прогрессом проекта.

Роли и обязанности членов команды

Я работал над полной серверной частью (создание схем и контроллеров) и над частью внешнего интерфейса, такой как страница команд. Бхимуду работал над интерфейсной частью, такой как (навигационная панель, нижний колонтитул, Cricbuzz plus), и над некоторыми внутренними частями, такими как создание моделей схемы, Приянка Дубей работала над страницей расписания.

Технический стек используется:

  1. HTML
  2. CSS
  3. JavaScript
  4. API выборки
  5. Node.Js
  6. Экспресс Js
  7. Мангуста
  8. MongoDB
  9. Реагировать
  10. Пользовательский интерфейс материала

Платформа, используемая для связи

Для обеспечения ориентированного на результат результата любой работы/проекта общение между командой является наиболее важной частью. Мы использовали Slack и Zoom для общения друг с другом. Для заимствования кода мы использовали git hub.

Как мы это сделали:

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

  1. Макет главной страницы

целевая страница

2. Главная страница

домашняя страница

3. Страница фотографий

страница фотографий

4. Страница текущих результатов

страница текущих результатов

5. Рекламная страница

рекламная страница

6. Страница карьеры

страница карьеры

7. Страница "Команды"

страница команд

8. Страница телеобъявлений

страница телерекламы

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

Как часть школы масаи, мы всегда считали, что общение и навыки важнее, чем знания, поэтому именно благодаря эффективному общению и явному желанию понять сложные вещи и сделать их простыми для понимания мы смогли создать страницу со сравнительно меньшими затратами. Ресурсы.

Проблемы, с которыми столкнулись:

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

  1. React Js был новым для всех нас, и поэтому было сложно понять всезависимостиот разрешить конфликты. Мы преодолели эту проблему, убедившись, что мы общаемся со всеми по одному, просто читаем документацию и вносим улучшения в окончательную версию.
  2. Мы столкнулись с множеством проблем при добавлении функций JavaScript.
  3. Мы не были знакомы с развертыванием нашего кода в Vercel. Мы прочитали некоторые документы, а также наш IA помог развеять наши сомнения.

Выводы

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

Нам очень понравился проект, и мы с нетерпением ждем новых проектов.

Ознакомьтесь с нашим репозиторием на GitHub:

https://github.com/VijayaprakashVp/cricbuzz/tree/Vijayaprakash

Ссылка для развертывания:

https://newcricbuzzcb.netlify.app/