Giter Club home page Giter Club logo

eladin's Introduction

Eladin 도서 판매 서비스

엘라딘 로고

1. 서비스 개요

1-1. Topic

도서 구매 웹사이트

1-2. Service Name

Eladin(엘라딘)

1-3. Goal

기존 알라딘 사이트의 UX/UI 개선

1-4. Objective

기존 알라딘 사이트의 양탄자 배송에서 착안하여 사용자의 빠른 주문 및 배송이 가능하도록 단순화된 UI와 최소한의 기능 제공

1-5. Target User

복잡한 절차 없이 도서를 빨리 구매하고 싶은 사람


2. 팀원 소개

이름 담당 업무
윤동주 팀장/프론트엔드
김유정 팀원/프론트엔드
김혜민 팀원/백엔드
서윤지 팀원/백엔드
이수빈 팀원/프론트엔드

3. 서비스 설명


3-1. 서비스 도메인

⚠ 서버가 내려간 상태입니다.


3-2. 테스트 계정

Role ID PW
Admin [email protected] 12345678
User [email protected] python3!

3-3. API 문서


3-4. 서비스 주요 기능

제품 등록, 장바구니 추가, 주문하기 등 쇼핑몰의 핵심 서비스 구현

  1. 회원가입, 로그인, 회원정보 수정, 회원탈퇴 등 유저 정보 관련 CRUD 가능
  2. JWT 토큰: 서버 DB가 아닌 프론트 단 sessionStorage에서 저장 및 관리
  3. 카테고리에 따른 도서 목록, 도서 상세 정보 조회 가능
  4. 장바구니 도서 조회, 도서 추가, 일부/전체 선택, 일부/전체 삭제 등 장바구니에서 CRUD 가능
  5. 장바구니: 서버 DB가 아닌 프론트 단 localStorage에서 저장 및 관리
  6. 장바구니에서 주문 목록 조회, 주문 완료 후 주문 정보 조회 및 삭제 가능
  7. 관리자: 주문, 카테고리, 도서 CRUD 가능

3-5. 페이지 별 화면

User.mp4
Admin.mp4

4. 기술 스택

4-1. FE

Bulma LocalStorage SessionStorage

4-2. BE

Nodejs Express GCP MongoDB Atlas Mongoose

5. 구조

5-1. 인프라 구조

image

5-2. 폴더 구조

  • 프론트: src/views 폴더
  • 백: src/views 이외 폴더 전체
  • 실행: 프론트, 백 동시에 express로 실행

6. 실행 방법

6-1. 레포지토리를 클론하고자 하는 디렉토리에서 아래 명령어 수행

git clone https://kdt-gitlab.elice.io/sw_track/class_03/web_project/team4/eladin.git

6-2. 클론한 디렉토리에서 backend 디렉토리로 들어가 아래 명령어를 통해 Backend에서 필요한 module 설치

npm install

6-3. 최상위 폴더에 .env 생성 및 아래 내용 기입

MONGODB_URL=mongodb+srv://ming:[email protected]/?retryWrites=true&w=majority
PORT=8000

6-4. Express 앱 실행

npm start

eladin's People

Contributors

codeblue007 avatar darkenpeng avatar dongjooyun avatar jeongola avatar pansgraphy avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.