Добрый день, я участвую в Bootcamp по веб-разработке в школе Масаи. В конце каждого модуля мы должны сделать групповой проект, и на этот раз мы клонируем веб-сайт Facebook. Мы команда из 5 разработчиков. В этом модуле мы изучили React и Redux и внедрили их с нашими предыдущими знаниями о внешнем и внутреннем интерфейсе.
Давайте познакомимся с моей командой,
- Атул Харвал
- Аншул Шарма
- Анураг Сингх
- Дирадж Кумар Гаур
- Упасана Куар
Таблицы содержания
- Обзор
- Функции
- Технологии
- Путешествие проекта
- Макеты
- Заключение
- Обзор
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, динамические страницы, функции и отличные функции. Мы также сделали сайт адаптивным, чтобы пользователи могли запускать наш сайт на своих смартфонах, планшетах или любых других портативных устройствах. Все члены команды работали на обоих концах, но в основном Атул, Ансул работали на бэкэнде, а Упасана, Дирадж, Анураг работали на фронтенде. В целом, для нас это отличный опыт сотрудничества в этом проекте.