Добрый день, я участвую в Bootcamp по веб-разработке в школе Масаи. В конце каждого модуля мы должны сделать групповой проект, и на этот раз мы клонируем веб-сайт Facebook. Мы команда из 5 разработчиков. В этом модуле мы изучили React и Redux и внедрили их с нашими предыдущими знаниями о внешнем и внутреннем интерфейсе.

Давайте познакомимся с моей командой,

  1. Атул Харвал
  2. Аншул Шарма
  3. Анураг Сингх
  4. Дирадж Кумар Гаур
  5. Упасана Куар

Таблицы содержания

  1. Обзор
  2. Функции
  3. Технологии
  4. Путешествие проекта
  5. Макеты
  6. Заключение
  7. Обзор

Facebook — одно из крупнейших в мире приложений для социальных сетей, на которое быстро пускают слюни по всему миру. Это веб-сайт, который заставляет пользователя уделять больше внимания социальным сетям. Этот сайт имеет отличный дизайн UI / UX. Он имеет множество функций, таких как обмен мультимедийным контентом с повторной публикацией, загрузка изображений, отправка и принятие запросов на добавление в друзья, отметка «Нравится» и комментирование чьего-либо изображения или видео, просмотр каталога страниц в следующих группах, поиск друзей и многое другое.

2. Особенности

  • Люди могут создавать свои учетные записи и могут входить в систему со своими учетными данными.
  • Пользователи могут обмениваться медиафайлами. Лайкайте, комментируйте чужие посты.
  • Может делиться и просматривать истории своих друзей.
  • Может искать кого угодно на Facebook по именам.
  • Пользователи могут отправлять и принимать запросы на добавление в друзья.
  • Пользователи также могут общаться со своими друзьями.

3. Технология

  • Мы использовали множество библиотек, фреймворков и технологических стеков.
  • Что касается технических стеков, мы использовали HTML, CSS, JS, MongoDB, Node.JS, Express.JS, React.JS и Redux.
  • Для создания этого проекта мы использовали языки программирования, такие как Javascript, а для стилей мы использовали CSS и пользовательский интерфейс материалов, для динамических веб-страниц мы использовали React.JS, а для серверной части мы использовали Node.JS и подключили его к базе данных MongoDB.
  • Для создания интерфейса мы использовали React.JS с Redux и HTML. Здесь мы использовали компоненты React, чтобы сделать наш код чистым и пригодным для повторного использования.
  • Для API REST мы использовали фреймворки NodeJS Express.JS, а для обработки данных мы использовали mongoose, для обработки API мы использовали Axios, а другие необходимые пакеты, такие как аутентификация, использовали веб-токен JSON.

4. Путь проекта

Для завершения этого проекта у нас были сжатые сроки, так как им дали 1 неделю на его выполнение. Кроме того, в этом проекте недели строительства нам нужно было узнать, как соединить бэкэнд с интерфейсом. Поскольку это наш первый проект реагирования, мы столкнулись с множеством проблем, которые улучшили наши возможности устранения ошибок и решения проблем. В этом проекте мы использовали много библиотек и пакетов NPM, о которых мы не знали, поэтому мы ссылаемся на документацию MDN и переполнение стека для варианта использования. Из этого проекта мы узнали, как реализовать документацию, управлять Github, как связать фронтенд с бэкендом, чтобы сделать хороший full-stack проект.

5. Макеты

6. Заключение

В заключение, наш веб-сайт имеет хороший дизайн UI / UX, динамические страницы, функции и отличные функции. Мы также сделали сайт адаптивным, чтобы пользователи могли запускать наш сайт на своих смартфонах, планшетах или любых других портативных устройствах. Все члены команды работали на обоих концах, но в основном Атул, Ансул работали на бэкэнде, а Упасана, Дирадж, Анураг работали на фронтенде. В целом, для нас это отличный опыт сотрудничества в этом проекте.