나만의 특별한 라면 레시피 공유 앱 🍥

🗓️ 프로젝트 기간 : 2024.10.15 ~ 2024.11.06

📑 기획서

https://www.figma.com/design/8nDuzTlsqahg1VkcVcUmAq/3%EC%B0%A8_1%ED%8C%80_%ED%9B%84%EB%A3%A8%EB%A3%A9?node-id=847-4837&t=6AUoooiX26zQZLv3-1

📎 배포 링크

https://hululug.vercel.app/

📖 소개

🍜 후루룩은 자신만의 특별한 라면 레시피를 공유하고 발견할 수 있는, 라면을 사랑하는 모든 이들을 위한 커뮤니티 입니다 🍜

👫 팀원

김도연	김민석	유성민	윤석준
Design, Backend	Frontend	Frontend	Backend

✨ 주요 기능

🍜 라면 레시피 공유
👥 소셜 로그인
🏆 라면 이상형 월드컵 등 다양한 이벤트
💬 레시피 댓글 및 좋아요
📱 라면 레시피 검색

🖼 스크린샷

로그인

메인

레시피 상세

레시피 작성

라면 이상형 월드컵 (이벤트)

검색

마이페이지

🛠 기술 스택

Frontend

• 프레임워크: React
• 언어: TypeScript
• 상태 관리:
  • Zustand (클라이언트 상태)
  • React-Query (서버 상태)
• 스타일링: Emotion CSS
• API 통신: Axios
• 컴포넌트 문서화: Storybook
• 개발 도구:
  • ESLint
  • Prettier
  • Vite

BackEnd

Authentication

JWT, OAuth

Deployment and Cloud

AWS S3, AWS CloudFront, Railway

📁 프로젝트 구조

src
├── api                 # API 관련 설정 및 인터페이스
├── assets             # 이미지, 폰트 등 정적 파일
├── components         # 재사용 가능한 컴포넌트
├── constants          # 상수 정의
├── hooks              # 커스텀 훅
├── pages              # 페이지 컴포넌트
├── router             # 라우팅 설정
├── store              # Zustand 스토어
├── styles             # 글로벌 스타일 및 테마
├── types              # TypeScript 타입 정의
├── App.tsx            # 앱 메인 컴포넌트
└── main.tsx           # 앱 진입점
config
├── .env               # 환경 변수
├── .eslintrc         # ESLint 설정
├── .gitignore        # Git 제외 파일 설정
├── .prettierrc       # Prettier 설정
├── .yarnrc.yml       # Yarn 설정
├── eslint.config.js  # ESLint 추가 설정
├── index.html        # HTML 템플릿
├── package.json      # 프로젝트 의존성 및 스크립트
├── sw.js             # Service Worker
├── tsconfig.json     # TypeScript 설정
├── tsconfig.app.json # App TypeScript 설정
├── tsconfig.node.json # Node TypeScript 설정
└── vite.config.ts    # Vite 설정

브랜치 전략

🚀 시작하기

1. 저장소 클론

git clone https://github.com/se0kcess/hululug-web.git

2. 의존성 설치

yarn install

3. 개발 서버 실행

yarn dev

🤓 추후 계획

• 라면으로 알아보는 mbti 테스트
• 주간/월간 베스트 라면 레시피 대회