Skip to content

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

License

Notifications You must be signed in to change notification settings

AbdallahHemdan/Oud

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Oud Front-End

GitHub contributors GitHub issues GitHub forks GitHub stars GitHub license

Table of Contents

About The Project

Oud is an online music streaming service which is a mimic 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.