DEV Community

Cover image for MovieFlixer πŸš€
Rohit Dhas
Rohit Dhas

Posted on • Updated on

MovieFlixer πŸš€

Overview of My Submission

MovieFlixer is a web app where you can search πŸ” for your favorite movies and shows, you can Buy πŸ’² those movies and also rate ⭐ them out of 10.

Submission Category:

E-Commerce Creation

Link to Code

GitHub logo rohitdhas / Dev-Hackathon

MovieFlixerπŸš€ - SearchπŸ”, BuyπŸ’² and rateπŸ‘πŸ» your favorite movies and shows


Movie Flixer

Search πŸ” and Rate ⭐ your Favorite Movies and shows!

Next JS Tailwind CSS Express.js NodeJS MongoDB Vercel

Getting started

Requirements

  • Node.js v14.18.2^
  • NPM v6.14.0^

Installation

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

cd frontend
npm install

cd backend
npm install
Enter fullscreen mode Exit fullscreen mode

NOTE

You'll need a .env file in the backend directory.

It looks like this -

PORT = 8080

MONGO_URI = Database connection String

EMAIL = Your Email

PASSWORD = Your Password
Enter fullscreen mode Exit fullscreen mode

Starting the application

cd frontend

npm run dev
Enter fullscreen mode Exit fullscreen mode
cd backend

node server.js
Enter fullscreen mode Exit fullscreen mode




Key Features of this Web App πŸ’‘

1. Search Autocomplete πŸ”

Implemented using Atlas Search

movieflixer autocomplete gif

Autocomplete is pretty handy because it predicts whatever you want to type even if you make silly typos πŸ˜„ like here I typed kong fu pa and it guessed correct movie name.

How it works?

Whenever you start typing in the input field it makes a request to an API endpoint along with the input string.

That API endpoint aggregates data based on input string using an Aggregation Pipeline with search stage, and then sends the results in response.

And finally, those search results are being used to render autocomplete list on frontend.


2. Mailing System πŸ“§

Implemented using Realm Triggers & Function + nodemailer

In this web application you receive an email on rating ⭐ a movie or on successfully purchasing πŸ’² a movie. For both the cases the logic is almost same.

To achieve this, I am making use of Database triggers which automatically responds based on certain events.

So, When you rate a movie it inserts a document in ratings collection. On this insert operation the trigger fires and executes a Realm Function which is making an API call telling the server to send an email to the given mail address.

Rating Gif

You should receive an email like this after rating a movie πŸ‘‡πŸ»

Email Screenshot

Also, when you click on Proceed to Purchase button it inserts a document in purchases collection, and then after your checkout session is successfully completed it updates the corresponding document in DB. Now, on this update operation the trigger fires and executes a Realm Function which helps the app to send an email.

Movie Purchase Gif

You should receive an email like this after buying a movie πŸ‘‡πŸ»

Purchase Screenshot


Now here's the link to my project. Go ahead and explore rest of the application πŸ™‚

MovieFlixer URL

And please let me know your thoughts on it below πŸ‘‡πŸ»

Discussion (15)

Collapse
codewithpom profile image
Padmashree Jha

I rated a movie but did not get the email.

Collapse
rohitdhas profile image
Info Comment hidden by post author - thread only accessible via permalink
Rohit Dhas Author • Edited on

How will you get an email, if you are trying to crash the server by making 15000 requests to my apps server

screenshot

Collapse
codewithpom profile image
Info Comment hidden by post author - thread only accessible via permalink
Padmashree Jha

What how can I do that you would have setup some security checks and do not try to trap me.

rohitdhas profile image
Info Comment hidden by post author - thread only accessible via permalink
Rohit Dhas Author • Edited on

I don't want to argue with you, I have sent an email to dev team regarding this situation. They'll decide what to do.

codewithpom profile image
Info Comment hidden by post author - thread only accessible via permalink
Padmashree Jha

Even I have mailed them and also messaged them on twitter and even my site is crashing and even of many others would you like to help me in finding out who is doing all these things.

rohitdhas profile image
Rohit Dhas Author

Definitely, if somebody is doing this with all of us then we should do something about it.

Thread Thread
codewithpom profile image
Padmashree Jha

Yes see other submissions as well so wannabe join me ?

Thread Thread
rohitdhas profile image
Rohit Dhas Author

yaa sure πŸ™‚

Thread Thread
codewithpom profile image
Padmashree Jha

Mail me mail available at my GitHub profile

Thread Thread
codewithpom profile image
Padmashree Jha

@rohitdhas waiting for your mail in my inbox.

Thread Thread
rohitdhas profile image
Rohit Dhas Author

I have mailed you on codewithpom@gmail.com is this your mail address?

Thread Thread
codewithpom profile image
Padmashree Jha

Of course

Collapse
codewithpom profile image
Info Comment hidden by post author - thread only accessible via permalink
Padmashree Jha

And I not even use that mail I use codewithpom@gmail.com

Collapse
thumbone profile image
Bernd Wechner

Interesting.

With all due respect and not meaning any criticism, I cannot help, wondering when reading the interaction between Padmashree Jha and Rohit Dhas (as a native English speaker) if there is some special code dialect of English evolving between dev.to users or Indian devs? I can barely understand what they're on about.

That said this is a nice little idea and I tied it, randomly searching Hamilton as I just had my family asking if we want to watch it (the broadway musical released in 2020 on DVD) and I couldn't find it but I did find this:

movieflixer.vercel.app/details/573...

And I can off this impression:

  1. The title is weird and like some foreign language translation of the actual title on image.

  2. I can see a Buy this Movie button but not price or price range (if there's a list behind it) - at which point personally, I leave a site. Buy now without a price means nothing to me alas other than poor web design so I depart (unless of course they have me by the short and curlys and are the only place offering something I'm desperately after in which case I click it to see if I can find out the price before filling out nay forms, because if not then I'm almost certainly outta there again).

Anyhow, nice little app, and idea. Keep it up.

Collapse
rohitdhas profile image
Rohit Dhas Author

Hay, thanks for reviewing my submission.

And actually, when you click on buy now button it opens a form with pricing information.

Some comments have been hidden by the post's author - find out more