🏃‍♂️🏃 WithRun의 Front-end 레포지토리입니다.

📌 런닝인들의 런메이트 매칭, 크루 홍보 및 식단 관리 서비스

위치기반서비스를 이용하여, 가까운 동네에서 함께 뛸 수 있는 사람을 구할 수 있으며
런닝 크루를 운영하고 있는 경우 본인의 크루를 홍보하여 멤버를 모집할 수 있습니다.

🏃 Period

2021.10~ 개발 진행 중

🏃‍♂️ Members

M17 팀

미디어학과 17학번끼리 팀이 되어 M17 이라는 팀명을 지었습니다.
'미디어프로젝트'의 주제로 이를 선정하여 아이디어를 공유하며 서비스를 기획하고 제작하게 되었습니다!

• 🏃‍♂️ 최현욱 (팀장, BACK-END)
  visit github
• 🏃 김승민 (FRONT-END)
  visit github

🏃‍♂️ Technology used

📌 Next.js

    - 리액트 기반의 프레임워크로, 리액트의 단점을 보완해주는 부분이 많아서 선택하였습니다. 
    - Next.js의 SSR(Server Side Rendering)을 이용하면 CSR(Client Side Rendering) 환경에서는 힘든 SEO 처리를 쉽게 할 수 있습니다.
    - CSR은 브라우저에서 html, javascript 파일을 받아 렌더링한다면 SSR은 브라우저에서 해야할 렌더링을 서버에서 렌더링하여 html 파일을 브라우저에 보내줍니다. 
    - API 요청을 서버에서 진행하고 브라우저가 받은 html 문서에는 SEO 처리에 필요한 정보가 들어있습니다.
    - Pre-rendering 을 통한 높은 퍼포먼스
    - 특히나, SSR과 SEO 때문에 선택하게 되었습니다.  
        ✔️page-based routing system  
        ✔️SSG / SSR  
        ✔️Fast Refresh  

📌 Ant-desgin

- 완성도 높은 UI 프레임워크  
- 강력한 브라우징 호환성, UX에 입각한 컴포넌트 구성  
- 빠른 레이아웃 구성 가능   

🏃 주요기술

📌 로그인 & 회원가입

📌 런메이트 구인

• 사용자들이 글을 작성하면, 각 사용자의 현재위치에 게시글이 연동됩니다.
• 이를 통해 가까운 지역에서 런메이트를 구할 수 있습니다.

📌 홍보 게시판

• 런닝크루에 속해있는 사용자의 경우, 본인의 런닝 크루를 어필하여 회원을 모집할 수 있습니다.
• 런닝크루에 들어가고 싶은 회원은 게시판을 보고 가입을 신청할 수 있습니다.

📌 영양소 분석

• 오늘 먹은 음식의 사진을 업로드하면, 음식의 이름/양/영양성분들을 표시해주는 서비스입니다.
• 이를 통해 본인의 식단을 관리할 수 있습니다.
• YOLO v3 Model을 이용해, 음식을을 탐지합니다.
• 음식양 추정은, Classification Model 중 Resnet을 사용하였습니다.

🏃 How to process

• Running front-end

# intall
$ npm install -g create-next-app
# make my project
$ npx create-next-app my-app
# start project
$ npm run dev

🌈Contact

-최현욱: [email protected]
-김승민: [email protected]