Dropify

An audio and video assets selling marketplace

The mini amazon for audio/video creators :)

· Report Bug · Request Feature ·

Table of Contents

1. About The Project
   • Built With
   • Features
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact

About The Project:

• This is a marketplace for selling audio/video assets online. By default, it's configured to use Indian(INR) currency but you can customize it for your country as well. The main goal of this project is to combine all JavaScript and TypeScript tooling and other system design to create a scalable product from scratch. Also, this project will be a solid base for all my future products. In future this will be production ready product, currently it's in development mode and will be improved soon :)
• However a lot of major features are implemented and a list can be found in the Features section.

Product preview :)

Built With

Architecture

• Microservice + Async Communication

OS

• Linux Based (Personal choice and for ease of development)

FrontEnd

• NextJS
• TailwindCSS
• React-Dropzone
• React-Hook-Form
• WebRTC MediaStreamAPI
• Plyr

BackEnd

• NodeJS
• Express
• TypeScript
• MongoDB
• Mongoose
• RabbitMQ
• Argon2
• Cors
• express-rate-limit
• Nodemailer

features:

️🤝 Implemented / Ongoing (PR welcome) 🤝

Feature	🔰 Done
Independent Microservices	✔️
Async Microservices communication (RabbitMQ)	✔️
Kubernetes Cluster	✔️
Docker Images	✔️
ES6+ and TypeScript	✔️
Mongoose and CRUD	✔️
WebRTC Audio/Video Recorder	✔️
Live Audio/Video Previwer	✔️
Stripe Onboarding (By default INR currency)	✔️
Stripe Checkouts	✔️
Stripe Balance	✔️
Scalable Database Schema	✔️
Role Based Authentication (if needed)	✔️
SignUp + SignIn (JWT)	✔️
Forgot Password	✔️
Reset Password	✔️
Mail Send (mailtrap currently)	✔️
Global Error Catch	✔️
Sorting (if needed)	✔️
Limit fields	✔️
Pagination (both front and back)	✔️
File Upload (using cloudinary)	✔️
Streaming of audio/video (Plyr)	✔️
NextJS Routing + SSR	✔️
NextJS Demo Cloud function	✔️
TailwindCSS (Responsive)	✔️
Streaming of audio/video (Plyr)	✔️
Global Search (like elastic/algolia search)	❌
Kubernetes Cloud Hosting Guide	❌
Reports	❌
Analytics of platform	❌
Sharding + ReplicaSets Mongo	❌
RabbitMQ with persitence storage(Currently using in-memory store)	❌

Getting Started

• Project is not deployed live yet, because currently it's in alpha version and once production ready version out, live URL will be added.

Prerequisites

• Before you proceed, Above tech stack is used to build this platform, basic understanding of each tech is required.

Installation

1. Clone the repo

git clone --recursive https://github.com/mpmeetpatel/dropify.git

2. Configure and prepare your local environment (I'm on linux), follow command and guide (Some setup you've to google it based on your Operating System)

• 2.1 (for windows/mac follow minikube installation guide from docs)

  • 2.1.1 Install KVM (If not present) https://computingforgeeks.com/install-kvm-centos-rhel-ubuntu-debian-sles-arch/

  sudo apt-get -y install qemu-kvm libvirt-bin virt-top  libguestfs-tools virtinst bridge-utils

  sudo modprobe vhost_net

  sudo lsmod | grep vhost

  echo "vhost_net" | sudo tee -a /etc/modules

    sudo apt-get update

    sudo apt-get install apt-transport-https

    sudo apt-get upgrade

  • 2.1.2 Install minikube (If not present) https://minikube.sigs.k8s.io/docs/start/

  Debian based (ubuntu/mint)

    curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube_latest_amd64.deb

    sudo dpkg -i minikube_latest_amd64.deb

    minikube version

    minikube config set driver kvm2

  (minimum 2 cpu, recommended 4)

    minikube config set cpus 4

  (minimum 4096 memory, recommended 8192)

    minikube config set memory 8192

2.2 Configure minikube(kuberneted cluster) with NFS

• 2.2.1 Check and configure minikube

    minikube config view

    minikube version

  
  
  

    minikube addons enable registry

    minikube addons enable ingress

    minikube addons enable ingress-dns

    minikube addons enable storage-provisioner

    minikube addon list

  
  
  

    minikube start

  
  
  

    kubectl version --short

  

• 2.2.2 configure storage for kubernetes( We will use NFS locally :- )
  

    sudo apt install nfs-kernel-server

    sudo systemctl enable nfs-server

    sudo systemctl status nfs-server

    cd ~

    sudo mkdir /nfs

    sudo chmod 777 /nfs

    sudo nano /etc/exports

  add below line and save the file

    /nfs    *(rw,sync,no_root_squash,no_subtree_check,insecure)

    sudo exportfs -rav

    sudo exportfs -rav

    sudo showmount -e

  
  
  

• 2.2.3 configure NFS folder

    cd ~

    cd /nfs

    mkdir auth

    mkdir dropin

    mkdir order

    mkdir payment

    ls

  
  
  

• 2.2.4 Go to your cloned repo folder

    cd <your cloned repo folder path>

  

• 2.2.5 Prepare host with dns

    minikube ip

  (grab the minikube ip (kubernetes cluster ip))

  
  
  

    sudo nano /etc/hosts

  (add 192.168.39.144 (Your minikube ip) and map it dropify.dev -> see below image second line -> then save the file)

  
  
  

• 2.2.6 Prepare project with dependencies

    cd <your cloned repo folder>

    cd pv

    kubectl apply -f .

  (The above thing have to do one time)

  
  
  

    cd ..

  (go back to root of our project folder)

3. Setup Skaffold and Docker

• 3.1 Install Skaffold

  curl -Lo skaffold https://storage.googleapis.com/skaffold/releases/latest/skaffold-linux-amd64 && \
  sudo install skaffold /usr/local/bin/

  (For Linux AMD64 -> AMD, Intel)

  curl -Lo skaffold https://storage.googleapis.com/skaffold/releases/latest/skaffold-linux-arm64 && \
  sudo install skaffold /usr/local/bin/

  (For Linux ARM64 -> ChromeBook, New MacBooks (Apple M1 Chip))

• 3.2 Install Docker

    sudo apt-get update

    sudo apt-get install docker-ce docker-ce-cli containerd.io

    docker version

  (For Mac, Windows -> Please refer official docs)

4. Start Kubernetes cluster

  minikube start

  minikube status

  npm start

(In your root cloned repo folder)

5. Enter your env variables in .env of "dropify-client" folder

  cd dropify-client

• Add below env variables (Create .env file if don't exists)

 NEXT_PUBLIC_BASE_URL = https://dropify.dev

 NEXT_PUBLIC_CLOUDNARY_UPLOAD_URL = <your cloudnary upload url>

 NEXT_PUBLIC_CLOUDNARY_API_KEY = <your cloudnary api key>

 CLOUDNARY_SECERET_KEY = <your cloudnary client secret>

• Prepare frontend (Install front end dependencies)

  yarn

  yarn dev

6. Enter your env variables in .env of "dropify" folder

• Prepare backend

  go to file sendMain and change the SMTP server username, password and host

    cd /auth/common

  (sendMail file inside common folder) come back to root folder

    cd ../../

  Now go to file payment/controller/payment.ts, and change your stripe private key (mine will not work for you, by the time you're watching it's expired !)

    cd /payment/src/controller/payment.ts -> change stripe private key

  come back to root folder

    cd ../../..

  Now run below command and let if run in background

    skaffold dev --no-prune=false --cache-artifacts=false

7. Test in the browser

• 7.1

  Go to URL: https://dropify.dev Warning will come like this

  
  
  

• 7.2 Just click anywhere in browser and type

```thisisunsafe``` - 7.3 Close the browser and go to [http://localhost:3000](http://localhost:3000) - 7.4 Time to enjoy !! :)

Usage

Currently SetUp giude added, full docs will be added in stable beta version is released

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Meet Patel (Twitter) - @meetpatel
Email - [email protected]