유니온 | 대학생 연합생활관 커뮤니티

✔️ https://uni-on.me

✔️ 기숙사 커뮤니티 웹앱

✔️ 2021.09 ~ 운영 관리 중

✔️ 1인 프로젝트

✔ 인증 완료한 가입자 수 202명 (2022.05.24 기준)

목차

1. 웹 서비스 소개
2. 기술 스택
3. 주요 기능
4. 프로젝트 구성도
5. 프로젝트 데모
6. 실행 방법

웹 서비스 소개

👋 유니온(UNION) 은 대학생연합기숙사에 거주하는 학생들을 위한 커뮤니티 웹앱입니다.

✏️ 일상, 스터디, 익명 등 다양한 게시판에서 자유롭게 글을 작성할 수 있고, 좋아요와 댓글을 남길 수 있습니다.

🛍 장터 게시판에서 기숙사생끼리 편리하게 물건을 판매하거나 무료 나눔을 할 수 있습니다.

💬 사용자에게 개인적으로 대화를 하고 싶다면, 메시지 보내기를 통해 사용자에게 메시지를 보낼 수 있습니다.

📱 PWA로 빌드된 앱을 통해, iOS와 android 등 모바일 환경에서 편리하게 앱으로 접속할 수 있습니다.

🔗 웹 사이트

🔗 Demo

🔗 Github

💡 새 창에서 열기 : Ctrl+click (CMD+click)

기술 스택

Frontend

HTML5	CSS3	JavaScript(ES6+)	TypeScript

React(v17)	Recoil	styled-component	PWA

Backend

Firebase	Google Cloud

주요 기능

기능	내용
게시판, 댓글	일상, 스터디, 동아리 게시판 등 다양한 주제로 게시물과 댓글을 남길 수 있습니다. 또한 비밀 게시판에서는 익명으로 글을 남길 수 있습니다.
장터 게시판	기숙사생끼리 편리하게 물건을 거래할 수 있습니다. 특히 나눔과 물물교환 카테고리에서는 사용자끼리 필요한 물건을 주고받을 수 있습니다.
실시간 메시지, 알림	실시간 메시지 기능을 통해, 사용자 간에 편리하게 메시지를 주고 받을 수 있고, 게시물에 댓글이 달리면 알림창에서 알림을 확인할 수 있습니다.
반응형 웹 제공	PC, 태블릿, 모바일 등 어떤 기기에서든 최적화된 서비스를 이용할 수 있습니다.
PWA	PWA로 빌드된 앱을 통해 iOS와 android 등 다양한 모바일 환경에서 앱으로 서비스를 이용할 수 있습니다.

프로젝트 구성도

아키텍처(Architecture)

프로젝트 데모

서비스 데모 영상

🔗 Youtube

💡 새 창에서 열기 : Ctrl+click (CMD+click)

랜딩 페이지

소셜 로그인 & 회원 가입

Slack + Firebase 회원가입 승인 처리 자동화

실시간 메시지

PWA 설치	모바일 반응형 디자인	장터 게시판

실행 방법

1. 원격 저장소 복제

$ git clone https://github.com/tech-hoon/union-community.git

2. 프로젝트 폴더로 이동

$ cd union-community

3. 필요한 node_modules 설치

$ npm install

4. 프로젝트 실행을 위한 env 파일 작성

firebase에서 프로젝트를 추가하고, 아래처럼 얻은 api key를 토대로 다음과 같이 .env파일에 작성

// .env
REACT_APP_FIREBASE_API_KEY=[YOUR_API_KEY]
REACT_APP_AUTH_DOMAIN=[YOUR_AUTH_DOMAIN]
REACT_APP_PROJECT_ID=[YOUR_PROJECT_ID]
REACT_APP_STORAGE_BUCKET=[YOUR_STORAGE_BUCKET]
REACT_APP_MESSAGING_SENDER_ID=[YOUR_MESSAGING_SENDER_ID]
REACT_APP_APP_ID=[YOUR_APP_ID]
REACT_APP_VAPID_KEY=[YOUR_VAPID_KEY]
REACT_APP_COMMIT_REF=[YOUR_COMMIT_REF]

5. 개발 서버 실행

# start on localhost:3000
$ npm start