Привет всем, я вернулся с другим блогом. На недавней неделе строительства в школе масаи нам нужно было создать клон Reddit.com. Мы команда из четырех человек, и мы создали клон за 7 дней.
Коротко о сайте Reddit.com
Reddit — американский сайт социальных новостей, агрегации, рейтинга веб-контента и дискуссий. Зарегистрированные участники отправляют контент на сайт, такой как ссылки, текстовые сообщения, изображения и видео, которые затем голосуют за или против других участников. Сообщения организованы по темам в созданные пользователями доски, называемые сообществами или субреддитами, которые охватывают множество тем, таких как новости, политика, религия, наука, фильмы, видеоигры, музыка, книги, спорт, фитнес, кулинария, домашние животные и обмен изображениями. Материалы с большим количеством голосов появляются в верхней части их сабреддита и, если они получают достаточно голосов, в конечном итоге на главной странице сайта.
Используемая технология:
Бэкенд
- узлы
- Expressjs
- монгодб
Внешний интерфейс
- Реагировать
- Пользовательский интерфейс материала
- Иконки
Давай начнем
На этот раз задача в наших руках немного отличается от предыдущих проектов, потому что на этот раз мы должны построить наш проект с использованием MERN Stack, поэтому как команда мы нервничаем и взволнованы одновременно. Во-первых, мы решили создать страницы внешнего интерфейса, включая главную страницу канала и страницу создания сообщения, а также страницу входа и регистрации. Мы попытались клонировать идеальный веб-сайт, похожий на оригинальный. После завершения фронтенда мы сосредоточились на бэкенде. Теперь бэкенд-часть немного сложна для нас, потому что на нашем сайте в основном все связано с бэкэндом, например:
- Пользователь создал новый пост
- Получить данные из API
- Войти и зарегистрироваться, используя электронную почту и номер телефона
- Лента всех последних сообщений из разных сообществ
Итак, чтобы создать серверную часть, мы сначала начинаем с функций входа и регистрации, используем Context API для аутентификации и используем Redux для глобального состоянияуправлениетеперь для настройки других внутренних функций мы создали различные схемы, модели, контроллеры и использовали одну из самых популярных внутренних сред веб-приложений под названием Express.
Вот несколько снимков веб-сайта, который мы создаем:
1 : – Домашняя страница
2 : – Создать страницу публикации
Заключение
Каждый проект особенный, а если это совместный проект, то он становится еще более особенным, потому что вы работаете в команде, и есть много вещей, которым вы можете научиться у других членов команды. Это был отличный опыт при создании этого проекта, мы будем продолжать улучшать этот проект и в будущем.
Спасибо всем, что нашли время, чтобы прочитать это 😊
Надеюсь, вам понравится 😃
Свяжитесь со мной в Linkedin.
Если вам понравился этот блог, пожалуйста, нажмите кнопку 👏. Спасибо.
