Fullstack Spotify clone app using NextJS and many other libraries.

Overview

Spotify Clone

Spotify clone made with NextJS on both the client and server sides. For the database, I utilized Postgresql and Prisma ORM. I used ChakraUI to create the components for the style.

Live Demo

Setup ⚙️

First of all, you should have the Postgresql database. If you don't have one running locally then you can use Heroku create the Postgresql database.

  • Start with cloning this repo.
 git clone https://github.com/mithatercan/nextjs-spotify-clone.git
  • You should install the dependencies.
 npm install
 #or
 npm install --force
  • You should create the .env file to set the JWT secret and database URL variables.
  touch .env
  • The .env file should look like this.
  DATABASE_URL=
  SHADOW_DATABASE_URL=
  JWT_SECRET =

Prisma ORM

You must have the prisma orm downloaded on your local machine. To download the prisma, check the guide here.

  • Then you should run migrate the schemas to database
  npx prisma migrate deploy
  • And finally you should seed the data.
  npx prisma db seed

Final Step

After all these setup above. The app is ready to run.

 npm run dev

Default port is 3000. App will be running at localhost:3000

Contribution 🙏

Pull requests are welcome, you can simply create an issue and contributing the app.

License

MIT

You might also like...

Quick and easy spring animation. Works with other animation libraries (gsap, animejs, framer motion, motion one, @okikio/animate, etc...) or the Web Animation API (WAAPI).

Quick and easy spring animation. Works with other animation libraries (gsap, animejs, framer motion, motion one, @okikio/animate, etc...)  or the Web Animation API (WAAPI).

spring-easing NPM | Github | Docs | Licence Quick and easy spring animations. Works with other animation libraries (gsap, animejs, @okikio/animate, mo

Dec 14, 2022

This is my portfolio GitHub clone website. The frontend is build using NextJS and TailwindCSS.

This is my portfolio GitHub clone website. The frontend is build using NextJS and TailwindCSS.

Github Clone Portfolio Website Tech Stack used: NextJS Tailwind CSS The contact form in this website is connected to Notion. If you want to integrate

Oct 5, 2022

Twitter clone using Nextjs, Tailwind CSS and Firebase

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Aug 16, 2022

Windows 11 clone made with 💛 using NextJS and TailwindCSS by Vishwa Gaurav.

Windows 11 clone made with 💛 using NextJS and TailwindCSS by Vishwa Gaurav.

Windows 11 Windows 11 made with 💛 using NextJS and TailwindCSS by Vishwa Gaurav. ScreenShots *In Development Mode Our Social Links PageSpeed Insights

Nov 9, 2022

💡 A FullStack Quiz web app using TypeScript and Next.js!

A FullStack Quiz app using TypeScript and Next.js! This projects is in portuguese! Self Hosting npm i && npm run build && npm run start # or yarn && y

Aug 13, 2022

LinkedIn-Clone - a LinkedIn clone with firebase, redux and styled components

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Jan 3, 2022

This is a clone of Instagram built with NextJS, TailwindCSS, NextAuthJS and Firebase

This is a clone of Instagram built with NextJS, TailwindCSS, NextAuthJS and Firebase

Instagram This is a clone of instagram built with: This application is completely functional and responsive. Users can Sign in straightaway with Googl

Sep 2, 2022

a chatt app build using node , express and socket IO , it has many rooms

RealTime-chatt-app you can view the app here : https://bit.ly/3zce4ON a chatt app build using node , express and socket IO . used to public chatt room

Aug 31, 2022

A Hulu Clone which created with NextJS. It fetches the data from TMDB (The Movie Database) API.

A Hulu Clone which created with NextJS. It fetches the data from TMDB (The Movie Database) API. Click demo to try it by yourself! Hulu Clone Demo Link

Aug 17, 2022
Owner
Mithat Ercan
A selft taught developer who enjoys working with JavaScript.
Mithat Ercan
A fullstack TikTok clone with Nextjs, Prisma, trpc

TikTok Clone A fullstack TikTok clone with Nextjs, Prisma, trpc Live demo Official website: https://toptop-clone.vercel.app/ Main technology used The

Phong Nguyen 115 Dec 19, 2022
A fast and powerful http toolkit that take a list of domains to find active domains and other information such as status-code, title, response-time , server, content-type and many other

HTTPFY curently in beta so you may see problems. Please open a Issue on GitHub and report them! A Incredible fast and Powerful HTTP toolkit Report Bug

DevXprite 44 Dec 22, 2022
example app that creates a new player in Spotify Connect to play music from in the browse using Spotify Web Playback SDK.

Spotify Web Playback SDK Demo Requirements User must have Spotify Premium, DRM & EME supported and JavaScript enabled Web Browser. License Copyright 2

Sijey 8 Jul 20, 2022
a stack-separated way to bringing together common AWS services useful in a fullstack application that uses AWS Amplify libraries

Fullstack CDK Helpers This project helps developers create common AWS services that are useful in creating fullstack applications. Backend services ar

Focus Otter 14 Nov 26, 2022
A Fullstack Food Ordering App which created with NextJS.

A Fullstack Food Ordering App which created with NextJS. Click demo to try it by yourself! Food Ordering App Demo Link You can view the site here Clic

Özge Coşkun Gürsucu 7 Aug 17, 2022
Fullstack twitter clone developed with GraphQL and Relay

Fullstack twitter clone developed with GraphQL and Relay

null 31 Dec 1, 2022
Fullstack Turborepo starter. Typescript, Nestjs, Nextjs, Tailwind, Prisma, Github Actions, Docker, And Reverse proxy configured

Turborepo (NestJS + Prisma + NextJS + Tailwind + Typescript + Jest) Starter This is fullstack turborepo starter. It comes with the following features.

Ejaz Ahmed 132 Jan 9, 2023
A clone of spotify🎶

Contribution Guidelines ?? 1. Make sure to make UI consistency while adding new features to musicify 2. Use the packages which are compatible with our

Developer Student Club DDU 8 Nov 2, 2022
This project is used to extract media from various posting platfroms like Twitter, Reddit, Pixiv, Youtube and many other

Social-Picker-API This project is used to extract media from various posting platfroms like Twitter, Reddit, Pixiv, Youtube and many others. It's writ

Serge 11 Nov 29, 2022