Forem: sumit kumar bighaniya

Spotify HomePage Clone

sumit kumar bighaniya — Sat, 08 Jan 2022 12:46:02 +0000

HomePage=>👁 View Now:

Github Repo

Repo Link:

Project Structure

Author

😜~ Sumit

1.Website:
2.Github:
3.LinkedIn:

Show Your Support

~by giving ⭐️ to this Project

Create a Spotify Clone with Song Playing Feature.

sumit kumar bighaniya — Fri, 27 Aug 2021 15:27:24 +0000

In this post i describe you how i build a spotify clone using ReactJS,Redux and Spotify Web & Playback API.

Note:Only for Spotify Premium Users.and This is currently in development but you can view current build online by going.

here

Features

User can view his/her profile
User can play track,album,playlist
User can control active device volume.
User can perform play,pause,next,previous song.
User can create playlist.

Bugs currently have

There some glitch in play and pause button when we play a song directly inside app.
You may encountered some problem in login to app due to spotify access_token stored in cookie basically this is happen because spotify provide an expiration time of access_token of 1 hour so after one hour that token expire but not deleted from cookies so to fix this you have to delete manually from the cookies if you are in Chrome You can visit dev option>application>cookies>url of website and here you find SPOTIFY_TOKEN just remove or delete and refresh the web page then try to login now this issue fixed.

Sorry but i cannot explain the whole project in this post but you can ping me on linkedin or directly on Dev community by sending a message.

Demo Video

sorry you may found some noise in demo video.

Please give a ⭐️ to repo if You Like This

📙~Only supports Spotify Premium Accounts.

Create a URL shortener using NodeJS & MongoDB.

sumit kumar bighaniya — Sat, 31 Jul 2021 17:06:09 +0000

In this post i will show you how to build a simple url shortener service like bit.ly below is the final product.

Getting Started

This is the list of npm packages we need to use to make this url shortener in this tutorial:

Express
A web application framework for the Nodejs applications.
mongoose
Used to model the objects for Nodejs for the Mongodatabase.
shortid
Unique short id generator package for nodejs.
cors
CORS is a node.js package for providing a Connect/Express
middleware that can be used to enable CORS with various
options.
valid-url
valid-url is used to check the is the entered url is an valid url or not.

Tutorial

Before starting the tutorial you must have on mongodb cloud account.because i'm not showing here how to create a mongodb cloud account You just visitMongodb.

Let's Begin🚀

Make a project directory to anywhere where you easily excess it anytime.

$mkdir url_shortner
$cd url_shortner

Intialize a node project by npm

$npm init -y

Install required packages

$npm i express mongoose cors shortid  valid-url

Create a index.js file

const express = require('express');
const mongoose = require('mongoose');
const shortid = require('shortid');
const cors = require('cors');
const URL = require('./models/URL');
const bp = require('body-parser');
var validUrl = require('valid-url');



const app = express();

/*SET APP VIEW ENGINE TO EJS*/
app.set('view engine','ejs')
app.use(cors());
//set app static file directory to public
app.use(express.static('public'))
app.use(bp.json())
app.use(express.urlencoded({extended: true}));




    mongoose.connect('<Mongodb cloud url>/URLSHORTNER',{useNewUrlParser:true,useUnifiedTopology:true},()=>{
        console.log("Database connected!");
    });

// Database connection



// Routes

app.get('/',async (req,res) => {
    res.render('index',{title:'URLY-url shortner'});
})

app.get('/:uid',async (req,res) => {
    const url = await URL.findOne({shorten_id:req.params.uid});
    if(!url){
        return res.status(500).json({error:"Invalid Shorten URL!"});
    }
    res.redirect(url.url);
})
app.post('/',async (req,res) => {
    const {url} = req.body;
/// first validate the url
const isValid = validUrl.isUri(url)
console.log(isValid);
if(!isValid) {
    return res.status(400).json({error: 'Invalid URL'});
}
//check is there is same url present in database if yes give the shorten id of the url
   const isExists = await URL.findOne({url:url});
   if(!isExists) {
       const newURL = new URL({
           url,
           shorten_id:shortid.generate()
       })
       const result = await newURL.save();
       return res.send({shorten_url:`https://easyurly.herokuapp.com/${result.shorten_id}`});
   }

})


const port = process.env.PORT || 3000;

app.listen(port,()=>{


        console.log(`Server listen at ${port} & DB is also connected!`);

})

Make a static public & views directory in root directory of the project

$mkdir public views

create a css file inside public folder for our view file.

also create a views directory and create a index.ejs file inside it which renders an webpage on index route of our node application

/views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/style.css">
    <title><%= title %> </title>
</head>
<body>
    <nav>
        <div class="contaier__nav">
            <div class="brand__name">
                <strong>URLY</strong>
            </div>
            <div class="links">
                <a href="https://dev.to/ammyy9908" class="btn-about" title="Feature not supported">About Devloper</a>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="container__left">
            <h1>Map Your Long Urls with URLY</h1>
            <p>A URL shortener/mapper built with NodeJS</p>
            <div class="input__div">
                <form><input type="text" name="url" placeholder="Shorten Your URL" autocomplete="off"><input type="submit" value="Shorten URL"></form>

            </div>
            <!-- <a href="#/" class="btn btn-primary">Explore</a> -->
        </div>
    </div>
    <div class="output">

        <a href="" class="shorten__url">Demo</a>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <script>
        const form = document.querySelector('form');
        form.addEventListener('submit', async (e)=>{
            e.preventDefault();
            const url =form.url.value;
            if(url){
               try {
                const r = await axios.post('http://localhost:5000/',{url:url});
            if (r.status === 200) {
                document.querySelector('.output').style.display = 'flex';

                   document.querySelector('.output').innerHTML = `<p href="#" class="shorten__url">${r.data.shorten_url}</p>`;

                   form.reset();
            }
        } catch (e) {
            if (e.response && e.response.data) {
                alert(e.response.data.error);
                const error = e.response.data.error;
                showError(error);

            }
        }
            }
        })
        // add event on output to copy the url
        document.querySelector('.output').addEventListener('click', function (e){
            navigator.clipboard.writeText(e.target.textContent).then(()=>{
                e.target.innerHTML = '<p>URI COPIED!</p>';
                setTimeout(function () {
                    document.querySelector('.output').style.display = 'none';
                },3000);
            })
        })
        const showError = (err)=>{
            document.querySelector('.output').innerHTML = `<p>${err}</p>`;
        }
    </script>
</body>
</html>

/public/style.css

:root{
    --primary-color:linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
}
body{
    margin: 0;
    padding: 0;
    background-color: #fafafa;
}

nav{
width: 100%;
height: 65px;
}
.contaier__nav{
    max-width: 1277px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    align-items: center;
    height: 100%;
}
.brand__name > strong{
    background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
    font-family: "ProximaNova ExtraBold","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 22px;
    margin-left: 10px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition:all 3s ease-in-out;
    background-size: 300%;
}
.links{
    display: flex;
    justify-content:space-around;
    flex: .3;
}
.links > a{
    text-decoration: none;
    font-family: "ProximaNova ExtraBold","Helvetica Neue",Helvetica,Arial,sans-serif;
    padding: 10px 32px;
    display: inline-flex;
    justify-content:flex-start;
    align-items:center;
    margin-right: 10px;
}
.btn-about{
    background: var(--primary-color);
    color: #fff;
    border-radius: 5px;
}
.disabled{
    cursor: not-allowed;
    background-color: #ccc;
}
.container{
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 35px;
    justify-content:center;
    margin-bottom: 35px;
    height: 75vh;

}
.container > div{
    max-width: 95%;
    padding-bottom: 35px;
}
.container__left{
    flex: 1;
    display:flex;
    flex-direction: column;
    justify-content:space-evenly;
    align-items: center;
}

.container__left > h1{
    font-family: "ProximaNova ExtraBold","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 55px;
    color: rgb(245, 14, 64);
    background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
    -webkit-background-clip: text;
    font-weight: 900;
    -webkit-text-fill-color: transparent;
    animation: gradients 10s infinite linear;
    background-size: 300%;
}
@keyframes gradients {
    0%{
       background-position: 0 50%;

    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0 50%;

    }
}
.container__left > p{
    color: #56575b;
    font-weight: 400;
    font-size: 24px;
    font-family: "ProximaNova Regular","Helvetica Neue",Helvetica,Arial,sans-serif;
    margin-top: 15px;
}
.btn{
    font-size: 20px;
    padding: 18px 30px;
    background: var(--primary-color);
    border-radius: 6px;
    font-size: inherit;
    color: #fff;
    text-decoration: none;
    outline: none !important;
    font-family: "ProximaNova Regular","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.input__div{
    width: 65%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    margin-top: 10px;
}
.input__div > form{
    flex: 1;
    display: flex;
    justify-content:space-evenly;
    align-items: center;
    width: 100%;
}
.input__div > form > input[type=text]{
flex: .5;
height: 45px;
padding-left: 10px;
border: 2px solid #84fab0;
outline: none;
border-radius: 4px;
}
.input__div > form > input[type=submit]{
flex:.4;
height: 50px;
padding-left: 10px;
background:linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
color: #fff;
border: 0;
outline: none;
border-radius: 5px;
text-transform: uppercase;
font-weight: 700;
transition:all 3s ease-in-out;
}
.input__div > form > input[type=submit]:hover{

    background:linear-gradient(60deg, #8fd3f4 0%, #84fab0 100%);


    }

.shorten__url{
    font-size: 12px;
    font-family: "ProximaNova Regular","Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #fff;
    text-decoration: none;
}
.output{
    width: 100%;
    display: none;
    background-color: #262626;
    margin: 0;
    height: 45px;
    justify-content:center;
    align-items: center;
    transition: all .5s ease-in-out;
    position: fixed;
    bottom:0;
    cursor: pointer;

}
.output > p{
    font-size: 12px;
    font-family: "ProximaNova Regular","Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #fff;
    text-decoration: none;
}

@media (max-width:768px){
    .links{
        display: none;
    }

Create a Mongoose Model

Using Schema class of mongoose package .to do this create a file called URL.js inside a model directory and create a schema using Schema class and pass to model function by giving collection name & schema

/models/URL.js

const {model,Schema} = require('mongoose');

const URLSchema = new Schema({
    url:{
        type: 'string',
        required: true,
    },
    shorten_id:{
        type: 'string',
        required: true,
    }
});


module.exports = model('url',URLSchema);

😇 Thanks for Reading....

Clone Github Repo

Creating a Spotify Web Clone with ReactJS+Spotify WEB API.

sumit kumar bighaniya — Tue, 20 Jul 2021 13:41:19 +0000

Pre View:View:

In this post i represent how i build a spotify clone web app using ReactJS+Redux using Spotify Web API...Read docs..

Note::

We cannot play audio of any song because this feature is not yet updated in spotify web api docs.

hence in this project user can view their spotify data in terms of application.

Actors of the Application:

Non-Premium Spotify Users:

* Check their latest played song
* Visit Spotify User profile.
* Check their saved & liked playlists.
* View which device playing current song in song player.

Premium Spotify Users:
* The above 4 features of Non Premium Users is also same for the Premium users
in addition with this premium users can control player i.e user can play Next, Previous song, stop or resume the current played song, user can also control device volume by sliding the user control in player.

Github Repo:Repo

Please 🌟 the repo if you like.

Create a Spotify HomePage with NextJs.

sumit kumar bighaniya — Mon, 19 Jul 2021 17:34:13 +0000

HomePage=>👁 View Now:

Github Repo

Repo Link:

Project Structure

--Components(Ui React Components)
--data:(Hardcoded Spotify Plans Data)
--styles(All css Styles)
--pages(All pages that can be navigate)

Note 📙 All components in the project is Functional React components and there is no fully interaction as in Real Spotify Website it's just a standalone not fully dynamic nor a fully static.

Components

1.Footer.jsx

This component represent the Footer UI of the Home Page.

2.HomeHero.jsx

HomeHero build the Top Hero Section of the Home Page.

3.InputGroup.jsx

A Custom React Component used for Login & SignUp form.

4.Layout.jsx

A Layout component which render some UI components based on page route.

5.Logo.jsx

A Custom component to render the Spotify Logo in Navbar Component.

6.Logo2.jsx

Another React Component which is used to render spotify black logo in svg format used in Login & Signup Page.

7.Navbar.jsx

A React functional component which use to render the Navbar UI of the Page.

8.PlanCard.jsx

A React Card Component use to Display a Single Plan Card for the Spotify subscription plan.

9.Plans.jsx

A React component which contains a wrapper in which we iterate through the list of plans imported from the data directory by using Array.map() method.

10.Sidenav.jsx

Last React Component use to build the Sidenav for the Pages which we can toggle by clicking on hamburger menu button from top right.

Show Your Support

~by giving ⭐️ to this Project

Forem: sumit kumar bighaniya

Spotify HomePage Clone

Github Repo

Project Structure

Author

Show Your Support

Create a Spotify Clone with Song Playing Feature.

Demo Video

Create a URL shortener using NodeJS & MongoDB.

Getting Started

Tutorial

Let's Begin🚀

Install required packages

Create a index.js file

Make a static public & views directory in root directory of the project

/views/index.ejs

/public/style.css

Create a Mongoose Model

/models/URL.js

😇 Thanks for Reading....

Creating a Spotify Web Clone with ReactJS+Spotify WEB API.

Note::

Actors of the Application:

Create a Spotify HomePage with NextJs.

Github Repo

Project Structure

Note 📙 All components in the project is Functional React components and there is no fully interaction as in Real Spotify Website it's just a standalone not fully dynamic nor a fully static.

Components

3.InputGroup.jsx

4.Layout.jsx

5.Logo.jsx

6.Logo2.jsx

7.Navbar.jsx

8.PlanCard.jsx

9.Plans.jsx

10.Sidenav.jsx

Pages

1.index.js

2.login.js

3.register.js

4.premium.js

5.support.js

6.download

Author

Show Your Support