DEV Community: adithyakam

Youtube Clone

adithyakam — Wed, 07 Apr 2021 03:39:13 +0000

This is the youtube clone which I did from the sonny sanga tutorials in youtube, The tutorial was good ,I have learnt many things also it includes Redux for the state management with stripe.

I have added my own touch to build by adding the youtube trailer link for the movies & the stripe button with node server for stripe payments.

Please find below how I have added stripe & trailer feature for netflix clone

link to the project- https://netfllicclonne.herokuapp.com/

How I added stripe button

Install react-stripe-checkout from npm
In client code add following code


   ` import React from 'react';
    import StripeCheckout from 'react-stripe-checkout';
    import axios from 'axios';

    const StripeCheckoutButton = ({ price }) => {
    const priceForStripe = price * 100;
    const publishableKey =****;

    const onToken = token => { 
     axios({
       url: 'payment',
       method: 'post',
       data: {
        amount: priceForStripe,
        token: token
       }
      })
      .then(response => {
        alert('succesful payment');
      })
      .catch(error => {
        console.log('Payment Error: ', error);
        alert(
          'There was an issue with your payment! Please make sure 
     you use the provided credit card.'
        );
      });
    };

  return (
    <StripeCheckout
      label='subscribe'
      name='Netflix-clone'
      billingAddress
      shippingAddress

image='https://assets.stickpng.com/images/580b57fcd9996e24bc43c529.png'
      description={`Your total is $${price}`}
      amount={priceForStripe}
      panelLabel='Pay Now'
      token={onToken}
      stripeKey={publishableKey}
    />
  );
};

export default StripeCheckoutButton `

3.Add an node server to run/open the stripe popup when hit /payment route



` app.post("/payment", (req, res) => {
  console.log("inpayment");
  const body = {
    source: req.body.token.id,
    amount: req.body.amount,
    description: "test description",
    currency: "INR",
  };

  stripe.charges.create(body, (stripeErr, stripeRes) => {
    if (stripeErr) {
      console.log("abc", stripeErr);
      res.status(500).send({ error: stripeErr });
    } else {
      console.log("abc2");

      res.status(200).send({ success: stripeRes });
     }
     }) `

4.Voila!! your stripe payment is ready

How To integrate Tmdb api with youtube-trailer

1.install movie-trailer & react-youtube from npm

2.Then fetch trailers id from the below link replace movie.id by id of the movie,that trailer to be fetched https://api.themoviedb.org/3/movie/${movie.id}/videos?api_key=9d2bff12ed955c7f1f74b83187f188ae

3.store the key value from the results fetched from before ,& send it as trailer prop


   `<Youtube videoId={trailer} opts={
    height : "390",
    width : "100%",
    playerVars : {
        autoplay:1,
    }}/>`

4.Now you have working trailer popup for the movies

please do share your feedback on this blog
Thanks for your time :)

The New porfolio: Github readme?

adithyakam — Mon, 03 Aug 2020 03:44:00 +0000

The Github released an new feature which makes your github profile look great. we can use markdown to edit too.

This new feature has all the potential to replace the portfolio,we need to wait how it turnout to be.

How to implement this

Create an repository in same name as the github account with readme file.
While creating this you will be notified as * you found a secret a special repository *, Also make sure repo is Public.

Most of the users are briging there creativity to make it look impressive,cool

Also you can add github stats,

for this you just have to add belowline replace gitname to your github account name

[![gitName github stats](https://github-readme-stats.vercel.app/api?username=gitname)](https://github.com/gitname/github-readme-stats)

for more info on this please check out Anurag ghazra

Also you can also automate the readme toget your latest post check out gautam krishnar

Thanks for your time :)

How to be an Web dev in 2020

adithyakam — Mon, 15 Jun 2020 08:01:12 +0000

Hi Guys,

This is my very first blog where I give little detail about how to be an web dev in 2020.

Background

How Internet/Web works.
Background on server,DNS.
Little bit of Networkinglike TCP/Ip...
Json

FrontEnd

HTML,CSS,JS
CSS Framework(like Bootstarp,MaterializeCSS)
JS Framework or Library(Like react,Angular,Vue)
Project Mangement(like NPM/Yarn ,Github)
CI/CD (Github , Jenkins)

BackEnd

NodeJS,Express or Java or PHP or Python
Rest API or GraphQL
Autentication(Firebase,Token-based)

DataBase

SQL or NoSQL anyone is prefferred to have knowledge.

Advance Topics

Datastructure & Algorithmns.
SSH,certificates.
Big-O
PWA,Cloud(AWS,Azure)

Thanks for your time.