Tailrunner Frontend

Tailrunner 바로가기

소개

• Tailrunner는 제 개인 포트폴리오 프로젝트입니다. 알고리즘과 자료구조 공부를 하며 Leetcode라는 온라인 알고리즘 문제 풀이 플랫폼을 사용했습니다.
• 매일 플랫폼을 사용하며 저는 플랫폼 이용자를 넘어 내부 시스템에 관심을 가지게 되었습니다.이 프로젝트는 Leetcode를 Clone Coding 한 프로젝트입니다.
• Clone Coding이란 실제 서비스를 따라 만들면서 배우는 과정입니다. 본 Repo는 프로젝트의 Frontend 부분을 구현한 코드를 저장합니다.

📗 목차

• 📝 개요
• 🛠 기술 및 도구
• 🔗 링크
• 👨🏻‍💻 기능 구현
  • 메인 페이지
  • 문제 풀이 페이지

📝 포트폴리오 개요

프로젝트: 개인 포트폴리오 사이트

기획 및 제작: 김정환

분류: 개인 프로젝트

제작 기간: 2023.03 ~ 2023.05

주요 기능: 메인 페이지, 문제풀이 페이지, 백엔드 서비스

사용 기술: Vue.js, Docker, Github Actions, Bootstrap, AWS

문의: stevekim01310@gmail.com

🛠 기술 및 도구

🔗 링크

서비스 링크: http://tailrunner.run 백엔드 채점 API 링크: https://github.com/baobabtr33/Tailrunner-SolutionTester 백엔드 문제 API 링크: https://github.com/baobabtr33/Tailrunner-QuestionDetails

👨🏻‍💻 기능 구현

1. 메인 페이지

• Vue.js로 메인 페이지를 구성하여 원하는 문제를 고를 수 있도록 구성
• 문제 유형 표시

2. 문제 풀이 페이지

• 끊김 없이 보기 https://youtu.be/CVHnNJ0NXdA
• splitplanes로 문제 부분, 코드 작성 부분, 제출 부분을 구성
• submit을 누르면 코드가 제출 되고 정답 여부를 반환