무비플릭서 🚀

내 제출물 개요

MovieFlixer는 좋아하는 영화와 프로그램을 🔍 검색하고 해당 영화를 💲 구매하고 10점 만점에 ⭐ 평가할 수 있는 웹 앱입니다.

제출 카테고리:

전자상거래 생성

코드 링크

로히다스 / 데브 해커톤

MovieFlixer🚀 - 좋아하는 영화와 프로그램을 검색🔍, 구매💲하고 평가👍🏻하세요.

영화 플릭서

🔍 검색하고 좋아하는 영화와 프로그램을 ⭐ 평가하세요!

시작하기

요구 사항

Node.js v14.18.2^

NPM v6.14.0^

설치

git clone https://github.com/rohitdhas/Dev-Hackathon.git

cd frontend
npm install

cd backend
npm install

노트

.env 디렉토리에 backend 파일이 필요합니다.
이렇게 생겼어요 -

PORT = 8080

MONGO_URI = Database connection String

EMAIL = Your Email

PASSWORD = Your Password

애플리케이션 시작

cd frontend

npm run dev

cd backend

node server.js

View on GitHub

추가 리소스/정보

나는 이 앱의 frontend를 다음과 같이 만들었습니다.

다음 JS(TypeScript)

Tailwind CSS

그리고 Backend와

노드 JS

익스프레스 JS

노드메일러

스트라이프

몽고DB

이 웹 앱의 주요 기능 💡

1. 검색 자동 완성 🔍

Implemented using Atlas Search


자동 완성 기능은 여기에 내가 kong fu pa를 입력하고 올바른 영화 이름을 추측하는 것과 같이 어리석은 오타 😄를 만들어도 입력하려는 모든 것을 예측하기 때문에 매우 편리합니다.


어떻게 작동합니까?

입력 필드에 입력을 시작할 때마다 입력 문자열과 함께 API 끝점에 요청합니다.

해당 API 엔드포인트는 Aggregation Pipeline with search 단계를 사용하여 입력 문자열을 기반으로 데이터를 집계한 다음 응답으로 결과를 보냅니다.

마지막으로 이러한 검색 결과는 프론트엔드에서 자동 완성 목록을 렌더링하는 데 사용됩니다.

2. 메일링 시스템 📧

Implemented using Realm Triggers & Function + nodemailer
이 웹 애플리케이션에서 영화 평가 ⭐ 또는 영화 💲 구매에 대한 이메일을 받습니다. 두 경우 모두 논리는 거의 동일합니다.

이를 달성하기 위해 특정 이벤트에 따라 자동으로 응답하는 데이터베이스 트리거를 사용하고 있습니다.

따라서 영화를 평가할 때 ratings 컬렉션에 문서를 삽입합니다. 이 삽입 작업에서 트리거는 지정된 메일 주소로 이메일을 보내도록 서버에 지시하는 API 호출을 만드는 Realm Function를 실행하고 실행합니다.



영화 평점을 매기고 나면 이런 메일이 와야지 👇🏻



또한 Proceed to Purchase 버튼을 클릭하면 purchases 컬렉션에 문서가 삽입되고, 체크아웃 세션이 성공적으로 완료되면 해당 문서를 DB에 업데이트합니다. 이제 이 업데이트 작업에서 트리거는 앱이 이메일을 보내는 데 도움이 되는 Realm Function를 실행하고 실행합니다.



영화를 구매하고 나면 이런 메일이 오겠죠 👇🏻




이제 여기 내 프로젝트에 대한 링크가 있습니다. 계속해서 나머지 응용 프로그램을 탐색하십시오 🙂

MovieFlixer URL

그리고 아래에 여러분의 생각을 알려주세요 👇🏻