Next-Network

Описание проекта

Социальная сеть, макет взят из сервиса Dribbble. Проект включает в себя следующие функции:

• регистрация и авторизация
• создание и удаление постов с возможностью прикрепить изображение
• создание историй
• возможность ставить лайки/писать комментарии к постам
• поиск пользователей по имени и никнейму
• просмотр профиля пользователя, его постов и когда пользователь последний раз заходил в сеть
• просмотр своего профиля, возможность его редактировать, изменять аватар
• возможность написать пользователям, чат в онлайн-времени
• страница с чатами
• удаление сообщений, удаление чата
• переключение темы

Технологии

Backend

• Express.js - фреймворк web-приложений для Node.js
• Vercel Postgres — бессерверная база данных SQL, разработанная для интеграции с функциями Vercel и вашим фреймворком frontend
• Prisma - инструмент, позволяющий работать с реляционными (PostgreSQL, MySQL, SQL Server, SQLite) и нереляционной (MongoDB) базами данных с помощью JavaScript или TypeScript без использования SQL
• Multer - middleware для фреймворка express для обработки multipart/form-data
• Bcrypt - адаптивная криптографическая хеш-функция формирования ключа, используемая для защищенного хранения паролей
• Socket.IO - библиотека JavaScript (Node.js), обеспечивающая двустороннюю связь между клиентами и серверами в режиме реального времени

Frontend

• NextJS - фреймворк на JavaScript, использующий React для построения Server Side Render-приложений (SSR) и статически-генерируемых сайтов.
• TypeScript - строго типизированный язык программирования, построенный на JavaScript
• Redux Toolkit - набор официальных инструментов и соглашений, которые упрощают разработку приложений на Redux
• Axios - библиотека для выполнения HTTP-запросов
• React Hooks - useEffect, useState, useRef, useCallback
• MaterialUI - библиотека React UI компонентов с открытым исходным кодом, предоставляющая готовые к использованию компоненты, соответствующие принципам Material Design, разработанным Google
• Code Splitting - разделение кода
• Prettier - инструмент для автоформатирования кода
• React Hook Form - библиотека для управления состоянием и валидацией форм в React
• react-insta-stories - библиотека для рендера собственных JSX компонентов в историях
• Socket.IO - библиотека JavaScript (Node.js), обеспечивающая двустороннюю связь между клиентами и серверами в режиме реального времени

Установка и запуск

Инструкция по установке

1. Склонируйте репозиторий

git clone https://github.com/ValeriaPostylyakova/Next-Network.git

2. Перейдите в директорию сервера

cd server

3. Установите пакеты и сгенерируйте Prisma Client

npm install
npx prisma generate

4. Запустите локальный сервер

npm run dev

5. Перейдите в директорию клиента

cd client

6. Установите пакеты

yarn install

7. Запустите локальный сервер

yarn dev

Использование

После запуска будет сразу доступен весь функционал приложения.

Авторы проекта

Valeria Postylyakova - разработчик приложения