🎡 The frontend of Oud, an online music streaming service that is a high quality clone of Spotify with all its functionalities built using ReactJS, React-Router, Bootstrap.

Overview

Oud Front-End

Table of Contents

About The Project

Oud is an online music streaming service which is a high quality clone of Spotify with all its functionalities

Build with

Getting Started

This is an list of needed instructions to set up your project locally, to get a local copy up and running follow these instructuins.

Installation

  1. Clone the repository
$ git clone https://github.com/AbdallahHemdan/oudFrontend.git
  1. Navigate to repository directory
$ cd oudFrontend
  1. Install dependencies
$ npm install

Running

  1. Running on development mode
$ npm run json:server
$ npm run dev
  1. Running on production mode
$ npm run prod

Screenshots

image


25


chrome_1JjJ8yfh7A


image


image


image


62


55


52


59


102


94604376_255790072229844_6882535695697575936_n


94707053_226074958669096_6818316481399357440_n


94688968_251064116040980_741229785270714368_n 101


71

Videos

File Structure

Oud-Frontend
β”œβ”€β”€ README.md
β”œβ”€β”€ LICENSE
β”œβ”€β”€ CONTRIBUTING.md	
└── oudfrontend	
    β”œβ”€β”€ node_modules
    β”œβ”€β”€ package.json
    β”œβ”€β”€ jsdoc.conf.json	
    β”œβ”€β”€ .env-cmdrc.json	
    β”œβ”€β”€ .gitignore
    β”œβ”€β”€ build
    β”œβ”€β”€ public
    β”‚   β”œβ”€β”€ favicon.ico	
    β”‚   └── index.html	
    └── src
        β”œβ”€β”€ assets
        β”‚   β”œβ”€β”€ images
        β”‚   └── fonts
        β”œβ”€β”€ api	
        |   β”œβ”€β”€ db.json	
        |   └── routes.json	
        β”œβ”€β”€ components	
        |   β”œβ”€β”€ Account
        |   β”œβ”€β”€ CategoryHeader	
        |   β”œβ”€β”€ likedSongs	
        |   β”œβ”€β”€ Navbar	
        |   β”œβ”€β”€ Sidebar	
        |   β”œβ”€β”€ album	
        |   β”œβ”€β”€ commonComponents	
        |   β”œβ”€β”€ MainContent	
        |   β”œβ”€β”€ Playlist	
        |   β”œβ”€β”€ Subheader	
        |   β”œβ”€β”€ Card	
        |   β”œβ”€β”€ CreatePlaylist	
        |   β”œβ”€β”€ MusicCard	
        |   β”œβ”€β”€ Profile	
        |   β”œβ”€β”€ WebPlayer	
        |   β”œβ”€β”€ CategoryBody	
        |   β”œβ”€β”€ GenreCard	
        |   β”œβ”€β”€ MusicItem
        |   └── SeeAll
        β”œβ”€β”€ config
        |   └── environment.js	
        β”œβ”€β”€ pages	
        |   β”œβ”€β”€ Account	
        |   β”œβ”€β”€ Home	
        |   β”œβ”€β”€ Profile	
        |   └── Search	
        β”œβ”€β”€ routes	
        β”œβ”€β”€ utils	
        |   └── index.js	
        β”œβ”€β”€ App.css	
        β”œβ”€β”€ App.js	
        β”œβ”€β”€ index.css	
        β”œβ”€β”€ index.js		
        └── setupTests.js

Unit testing

Each component in our project has its own unit test file separately eg. MusicCard.test.js

Running Unit tests

Run the following command.

npm run test

Generating Coverage Report

After running the following command an html version will be generated and located at coverage\index.html.

npm run test:coverage

Functional Documentation

Run the following command to generate the functional documentation report in docs/index.html

npm run docs

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.

Check out our contributing guidelines for ways to contribute.

Contributors

Thanks goes to these wonderful people in the frontend team.

abdallah hemdan
Abdallah Hemdan
🎯 πŸ’» πŸ‘€
Abdallah Sbu Sedo
Abdallah Abu Sedo
πŸ’»
ahmed walid
Ahmed Walid
πŸ’»

Ahmed Ashraf
πŸ’»

Ahmed Mahboub
πŸ’»

License

This software is licensed under MIT License, See License for more information Β©AbdallahHemdan.

You might also like...
Simple react js web that consume data from Spotify WEB API and use Spotify Playback SDK for playing a tracks
Simple react js web that consume data from Spotify WEB API and use Spotify Playback SDK for playing a tracks

React JS Spotify Clone Simple react js web that consume data from Spotify WEB API and use Spotify Playback SDK for playing a tracks How to run First y

Amazon Clone Application using React JS, Context API, Firebase and Stripe with full E-Commerce Functionalities like adding to cart feature, user authorization, payment and many more.
Amazon Clone Application using React JS, Context API, Firebase and Stripe with full E-Commerce Functionalities like adding to cart feature, user authorization, payment and many more.

Amazon Clone is the Fully functional Real custom made Web application that covers and entire E-commerece functionality from designing, User Authentication till Payments build using React JS, Firebase and Stripe.

Foot Locker is an online store specialized in selling shoes of all kinds, where you can find all the shoes you want
Foot Locker is an online store specialized in selling shoes of all kinds, where you can find all the shoes you want

Foot Locker Links πŸ–‡ Heroku link Adobe XD link Description Foot Locker is an online store specialized in selling shoes of all kinds, where you can fin

Online Marketplace Built with MERN stack (MongoDB, Express, React and Node)Online Marketplace Built with MERN stack (MongoDB, Express, React and Node)

πŸ›’ Shopping App πŸ›’ Online Marketplace Built with MERN stack (MongoDB, Express, React and Node). ⚑️ ⚑️ ⚑️ Kiwi Shop ⚑️ ⚑️ ⚑️ πŸ“œ Table of contents Main

Minimalist and lightweight UI library, even with its own markup language and a CSS-In-JS library built into the template, Router and a powerful template reactivity system.
Minimalist and lightweight UI library, even with its own markup language and a CSS-In-JS library built into the template, Router and a powerful template reactivity system.

Translations: PortuguΓͺs do Brasil Bemtv(Abbreviation of the bird's name Bem-te-vi) is a JavaScript library that brings a new approach to creating inte

A React & react-router-powered implementation of Hacker News using its Firebase API.
A React & react-router-powered implementation of Hacker News using its Firebase API.

react-hn A React & react-router-powered implementation of Hacker News using its Firebase API.

MERN Project: Ema John Online Shopping Service

#MERN Project Ema John Live site link- https://ema-john-app-web.netlify.app/ Used technologies React Javascript React Router Private Routing Context A

Spotify, Soundcloud, and YouTube all in one website!
Spotify, Soundcloud, and YouTube all in one website!

Kord App Kord: One place for all of your (Spotify | Soundcloud | Youtube) music. Chromium and Firefox browsers supported only. Built With React.js Gat

A real-time webchat made using React, NodeJs/Express and Typescript. I intend to update the project with new functionalities and bug-corrections.

web-chat-real-time A real-time webchat made using React, NodeJs/Express and Typescript. I intend to update the project with new functionalities and bu

Comments
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 16% πŸŽ‰

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /oudfrontend/src/assets/images/icons/H.png | 9.25kb | 3.00kb | 67.54% | | /oudfrontend/src/assets/images/icons/user.png | 7.08kb | 3.42kb | 51.72% | | /oudfrontend/src/assets/images/user.png | 7.08kb | 3.42kb | 51.72% | | /oudfrontend/src/assets/images/icons/placeholderdark.png | 4.12kb | 2.56kb | 37.85% | | /oudfrontend/src/assets/images/icons8-play-100.png | 3.22kb | 2.10kb | 34.64% | | /oudfrontend/src/assets/images/icons/icons8-play-100.png | 3.22kb | 2.10kb | 34.64% | | /oudfrontend/src/assets/images/Sidebar Icons/add o.png | 1.50kb | 1.00kb | 33.44% | | /oudfrontend/src/assets/images/icons/Sidebar Icons/add o.png | 1.50kb | 1.00kb | 33.44% | | /oudfrontend/src/assets/images/Sidebar Icons/home o.png | 1.15kb | 0.77kb | 32.40% | | /oudfrontend/src/assets/images/icons/Sidebar Icons/home o.png | 1.15kb | 0.77kb | 32.40% | | /oudfrontend/src/assets/images/icons/icons8-circled-play-96.png | 2.05kb | 1.39kb | 32.14% | | /oudfrontend/src/assets/images/icons8-circled-play-96.png | 2.05kb | 1.39kb | 32.14% | | /oudfrontend/src/assets/images/Sidebar Icons/heart o.png | 1.16kb | 0.83kb | 28.10% | | /oudfrontend/src/assets/images/icons/Sidebar Icons/heart o.png | 1.16kb | 0.83kb | 28.10% | | /oudfrontend/src/assets/images/icons/Logo.png | 29.28kb | 21.59kb | 26.27% | | /oudfrontend/src/assets/images/Logo.png | 29.28kb | 21.59kb | 26.27% | | /oudfrontend/src/assets/images/Sidebar Icons/add f.png | 1.00kb | 0.74kb | 26.18% | | /oudfrontend/src/assets/images/icons/Sidebar Icons/add f.png | 1.00kb | 0.74kb | 26.18% | | /oudfrontend/src/assets/images/icons8-pause-button-96.png | 1.85kb | 1.39kb | 25.12% | | /oudfrontend/src/assets/images/icons/icons8-pause-button-96.png | 1.85kb | 1.39kb | 25.12% | | /oudfrontend/src/assets/images/icons/Logo copy.png | 7.86kb | 5.88kb | 25.12% | | /oudfrontend/src/assets/images/icons/Logoc.png | 7.86kb | 5.88kb | 25.12% | | /oudfrontend/src/assets/images/Logoc.png | 7.86kb | 5.88kb | 25.12% | | /oudfrontend/src/assets/images/Logo copy.png | 7.86kb | 5.88kb | 25.12% | | /oudfrontend/src/assets/images/logo2.png | 7.97kb | 5.99kb | 24.86% | | /oudfrontend/src/assets/images/icons/logo2.png | 7.97kb | 5.99kb | 24.86% | | /oudfrontend/src/assets/images/Oud2.png | 3.45kb | 2.71kb | 21.43% | | /oudfrontend/src/assets/images/Oud2 copy.png | 3.45kb | 2.71kb | 21.43% | | /oudfrontend/src/assets/images/icons/Oud2 copy.png | 3.45kb | 2.71kb | 21.43% | | /oudfrontend/src/assets/images/icons/Oud2.png | 3.45kb | 2.71kb | 21.43% | | /oudfrontend/src/assets/images/Sidebar Icons/home f.png | 0.80kb | 0.64kb | 20.29% | | /oudfrontend/src/assets/images/icons/Sidebar Icons/home f.png | 0.80kb | 0.64kb | 20.29% | | /oudfrontend/src/assets/images/icons8-visit-80.png | 4.13kb | 3.31kb | 19.80% | | /oudfrontend/src/assets/images/icons/icons8-visit-80.png | 4.13kb | 3.31kb | 19.80% | | /oudfrontend/src/assets/images/Sidebar Icons/heart f.png | 0.87kb | 0.70kb | 19.66% | | /oudfrontend/src/assets/images/icons/Sidebar Icons/heart f.png | 0.87kb | 0.70kb | 19.66% | | /oudfrontend/src/components/Welcome/Footer/bg-img.jpg | 3,105.32kb | 2,499.88kb | 19.50% | | /oudfrontend/public/Oud.png | 35.69kb | 30.43kb | 14.72% | | /oudfrontend/src/assets/images/icons/oud.png | 35.69kb | 30.43kb | 14.72% | | /oudfrontend/src/assets/images/oud.png | 35.69kb | 30.43kb | 14.72% | | /oudfrontend/src/assets/images/icons8-play-100 (1).png | 0.97kb | 0.85kb | 12.41% | | /oudfrontend/src/assets/images/icons/icons8-play-100 (1).png | 0.97kb | 0.85kb | 12.41% | | /oudfrontend/docs/fonts/OpenSans-Light-webfont.svg | 114.52kb | 101.77kb | 11.13% | | /oudfrontend/docs/fonts/OpenSans-Bold-webfont.svg | 115.49kb | 102.74kb | 11.03% | | /oudfrontend/docs/fonts/OpenSans-Regular-webfont.svg | 116.60kb | 103.85kb | 10.94% | | /oudfrontend/docs/fonts/OpenSans-BoldItalic-webfont.svg | 118.27kb | 105.53kb | 10.78% | | /oudfrontend/docs/fonts/OpenSans-Italic-webfont.svg | 119.62kb | 106.88kb | 10.65% | | /oudfrontend/docs/fonts/OpenSans-LightItalic-webfont.svg | 120.09kb | 107.31kb | 10.64% | | /oudfrontend/src/assets/images/icons/2685063.jpg | 276.88kb | 249.77kb | 9.79% | | /oudfrontend/src/assets/images/2685063.jpg | 276.88kb | 249.77kb | 9.79% | | /oudfrontend/src/assets/images/mask.png | 0.98kb | 0.91kb | 7.67% | | /oudfrontend/src/assets/images/icons/mask.png | 0.98kb | 0.91kb | 7.67% | | /oudfrontend/src/assets/images/play-button.svg | 0.44kb | 0.41kb | 7.35% | | /oudfrontend/src/assets/images/icons/play-button.svg | 0.44kb | 0.41kb | 7.35% | | /oudfrontend/src/assets/images/icons/loved.png | 0.86kb | 0.84kb | 2.28% | | /oudfrontend/src/assets/images/icons/icons/loved.png | 0.86kb | 0.84kb | 2.28% | | /oudfrontend/src/components/Welcome/Footer/logo.svg | 9.85kb | 9.71kb | 1.36% | | /oudfrontend/src/assets/images/icons/volume.png | 0.80kb | 0.79kb | 1.22% | | /oudfrontend/src/assets/images/icons/icons/volume.png | 0.80kb | 0.79kb | 1.22% | | /oudfrontend/src/assets/images/icons/repeat-enable.png | 0.98kb | 0.97kb | 1.00% | | /oudfrontend/src/assets/images/icons/icons/repeat.png | 0.98kb | 0.97kb | 1.00% | | /oudfrontend/src/assets/images/icons/repeat.png | 0.98kb | 0.97kb | 1.00% | | /oudfrontend/src/assets/images/icons/icons/repeat-enable.png | 0.98kb | 0.97kb | 1.00% | | /oudfrontend/src/assets/images/icons/repeat (1).png | 0.71kb | 0.70kb | 0.96% | | /oudfrontend/src/assets/images/icons/icons/repeat (1).png | 0.71kb | 0.70kb | 0.96% | | /oudfrontend/src/assets/images/icons/repeat (3).png | 0.70kb | 0.70kb | 0.83% | | /oudfrontend/src/assets/images/icons/icons/repeat (3).png | 0.70kb | 0.70kb | 0.83% | | /oudfrontend/src/assets/images/icons/shuffle-enable.png | 0.89kb | 0.89kb | 0.55% | | /oudfrontend/src/assets/images/icons/icons/shuffle.png | 0.89kb | 0.89kb | 0.55% | | /oudfrontend/src/assets/images/icons/shuffle.png | 0.89kb | 0.89kb | 0.55% | | /oudfrontend/src/assets/images/icons/icons/shuffle-enable.png | 0.89kb | 0.89kb | 0.55% | | /oudfrontend/src/assets/images/icons/next.png | 0.75kb | 0.75kb | 0.52% | | /oudfrontend/src/assets/images/icons/icons/next.png | 0.75kb | 0.75kb | 0.52% | | /oudfrontend/src/assets/images/logo.svg | 29.01kb | 28.87kb | 0.48% | | /oudfrontend/src/assets/images/icons/logo.svg | 29.01kb | 28.87kb | 0.48% | | /oudfrontend/src/assets/images/Oud.svg | 3.39kb | 3.38kb | 0.40% | | /oudfrontend/src/assets/images/icons/Oud.svg | 3.39kb | 3.38kb | 0.40% | | /oudfrontend/src/assets/images/icons/icons/speaker (1).png | 0.63kb | 0.63kb | 0.31% | | /oudfrontend/src/assets/images/icons/speaker (1).png | 0.63kb | 0.63kb | 0.31% | | /oudfrontend/src/assets/images/icons/icons/previous.png | 0.71kb | 0.71kb | 0.28% | | /oudfrontend/src/assets/images/icons/previous.png | 0.71kb | 0.71kb | 0.28% | | /oudfrontend/src/assets/images/icons/default-Profile.svg | 1.84kb | 1.83kb | 0.27% | | /oudfrontend/src/assets/images/default-Profile.svg | 1.84kb | 1.83kb | 0.27% | | /oudfrontend/src/assets/images/icons/album.jpg | 96.59kb | 96.56kb | 0.03% | | /oudfrontend/src/assets/images/icons/icons/album.jpg | 96.59kb | 96.56kb | 0.03% | | | | | | | Total : | 4,947.55kb | 4,139.46kb | 16.33% |


    πŸ“docs | :octocat: repo | πŸ™‹issues | πŸ…swag | πŸͺmarketplace

    opened by imgbot[bot] 0
Owner
Ahmed Ashraf
Computer Engineering Student at Faculty of Engineering, Cairo University.
Ahmed Ashraf
Decentralized-Music-Ownership-System - A decentralized Music Ownership System developed on Truffle Suite and React Bootstrap to allow Music artists to upload their content to the blockchain

Decentralized-Music-Ownership-System - A decentralized Music Ownership System developed on Truffle Suite and React Bootstrap to allow Music artists to upload their content to the blockchain

M. Adil Fayyaz 10 Sep 5, 2022
A full-stack clone of the incredible Apple Music online streaming platform, with an aim to re-create it's core features, seamless design, and excellent user experience.

Appo Music About Appo Music is a full-stack clone of the incredible Apple Music online streaming platform, with an aim to re-create it's core features

Ori Ravid 82 Dec 3, 2022
A Spotify Clone which built with ReactJS. 3rd party API integration, user authentication, spotify API, responsive design, material-ui, react context api are used to built it.

Spotify Clone with ReactJS In this Spotify Clone application you can log in to the application with your spotify account and see your own playlist. Sp

Mert Γ‡ankaya 11 Jul 11, 2022
Spotify playlist Clone build with ReactJS + Spotify API + Material-UI

Spotify playlist Clone build with ReactJS + Spotify API + Material-UI

null 3 Jan 3, 2022
A "TURKEY'S AIR QUALITY" is an application that can give information about the air quality

TURKEY'S AIR QUALITY About A "TURKEY'S AIR QUALITY" is an application that can give information about the air quality, health recommended pieces of ad

null 20 Mar 29, 2022
Spotify UI Clone with React Native & Expo || web support => https://expo-spotify.vercel.app

Spotify: UI Clone with React Native / Expo web demo: Expo Spotify Table of Contents Install & Build Features Linting Expo Web Demo & Release Notes Ins

Caleb Nance 483 Jan 3, 2023
Clone do spotify usando react.js e consumindo api do spotify

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

GUILHERME ROCHA 0 Dec 28, 2021
An Anime Streaming Site with minimal UI and ad-free anime streaming experience

An Anime Streaming Site with minimal UI and ad-free anime streaming experience. Made with :blue_heart: and React

ShivamKun 101 Nov 19, 2022
Spotify Profile App - A web app for visualizing personalized Spotify data created using React and Node.js

Spotify Profile App A web app for visualizing personalized Spotify data Local Installation & Set Up Register a Spotify App in your Spotify Developer D

Manish Bhandari 1 May 24, 2022
X-Netflix is a streaming platform based on Netflix UI: built with ReactJS in frontend and nodeJS in backend.

X-Netflix X-Netflix is a streaming platform based on Netflix UI: built with ReactJS in frontend and nodeJS in backend. Built with FrontEnd: React.JS,

Mehdi BHA 52 Aug 19, 2022