Giter Site home page Giter Site logo

photo's Introduction

Фотосоцсетка

Соцсеть чтобы делиться фотками, лайкать их и меряться лайками. Учебный проект. Цель - закрепить навыки создания приложений на React и Express

Image alt

Макет в Figma

Содержание

  • Функции
  • Что сделано
  • Планы по доработке
  • Стэк технологий
  • Установка

Функции

  • Регистрация и авторизация пользователей;
  • Просмотр ленты фоток со счетчиком лайков, добавление фоток, простановка и снятие своих лайков;
  • Редактирование никнейма и информации о себе.

Что сделано

  • Настроена инфраструктура и создан сервер на express;
  • Подключена база данных, созданы схемы и модели ресурсов API;
  • Реализовано логирование, аутентификация и авторизация на сервере;
  • Бэкенд задеплоен на Яндекс Облако;
  • Свёрстаны компоненты на React, разметка портирована в его формат;
  • Описана логика и вёрстка страниц регистрации, логина, редактирования профиля;
  • Реализованы асинхронные GET- и POST-запросы к API;
  • Проработаны авторизованные и неавторизованные состояния, простановка лайков.

Планы по доработке

  • Добавление интернационализации с помощью i18next;
  • Перевод на TypeScript для повышения надежности;
  • Перевод проекта на Redux и SCSS для упрощения поддержки и расширения;
  • Добавление функции смены e-mail;
  • Добавление функции смены и восстановления пароля.

Стэк технологий

  • HTML, CSS, js, БЭМ, Grid и Flexbox
  • frontend на React (webpack через CRA), React hooks
  • ООП, модульный подход, асинхронность
  • роутинг, авторизация
  • backend на Node.js и Express JS, деплой на Ubuntu в Яндекс.Облаке
  • хехирование паролей, авторизация на токенах, сбор логов

Установка

  • Склонируйте репозиторий [email protected]:SergeyKardashev/photo.git
  • Установите зависимости npm install
  • Запустите сервер npm run start

Результаты

Закрепил навыки создания приложений на React, Express с MongoDB

Системные требования

Node.js версии 18.16.0

photo's People

Contributors

sergeykardashev avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.