Awesome
<div align="center"> <a href="https://github.com/AbdallahHemdan/oudFrontend" rel="noopener"> <img width="700" alt="Logo With Title (7)" src="https://user-images.githubusercontent.com/40190772/80605635-9ec69100-8a33-11ea-8dff-5453762373ea.png"> </div> <h3 align="center">Oud Front-End</h3> <div align="center"><img src="https://img.shields.io/github/languages/count/abdallahHemdan/oudFrontend" /> <img src="https://img.shields.io/github/languages/top/AbdallahHemdan/oudFrontend" /> <img src="https://img.shields.io/github/languages/code-size/AbdallahHemdan/oudFrontend" /> <img src="https://img.shields.io/github/issues-pr-raw/AbdallahHemdan/oudFrontend" />
</div>Table of Contents
- About the Project
- Getting Started
- Screenshots
- Videos
- File Structure
- Unit Testing
- Functional Documentation
- Contributing
- Contributors
- License
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
- Clone the repository
$ git clone https://github.com/AbdallahHemdan/oudFrontend.git
- Navigate to repository directory
$ cd oudFrontend
- Install dependencies
$ npm install
Running
- Running on development mode
$ npm run json:server
$ npm run dev
- Running on production mode
$ npm run prod
Screenshots
<div align="center"> <hr /> <hr /> <hr /> <hr /> <hr /> <hr /> <hr /> <hr /> <hr /> <hr /> <hr /> <hr /> <hr /><hr /> </div>
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
<table> <tr> <td align="center"> <a href="https://github.com/AbdallahHemdan" target="_black"> <img src="https://avatars1.githubusercontent.com/u/40190772?s=460&v=4" width="150px;" alt="abdallah hemdan"/> <br /> <sub><b>Abdallah Hemdan</b></sub></a><a href="https://github.com/AbdallahHemdan/oudFrontend/commits/master?author=AbdallahHemdan" title="Leader">🎯</a><a href="https://github.com/AbdallahHemdan/oudFrontend/commits/master?author=AbdallahHemdan" title="Code">💻</a><a href="https://github.com/AbdallahHemdan/oudFrontend/pulls?q=is%3Apr+author%3AAbdallahHemdan" title="Reviewed Pull Requests">👀</a><br /> </td> <td align="center"><a href="https://github.com/abdallahabusedo" target="_black"><img src="https://avatars3.githubusercontent.com/u/42722816?s=400&u=10a6db683dfe129001b5be9abbed7b7aa03b873c&v=4" width="150px;" alt="Abdallah Sbu Sedo"/><br /><sub><b>Abdallah Abu Sedo</b></sub></a><a href="https://github.com/AbdallahHemdan/oudFrontend/commits/master?author=abdallahabusedo" title="Code">💻</a><br /></td> <td align="center"><a href="https://github.com/lido22" target="_black"><img src="https://avatars1.githubusercontent.com/u/42592954?s=400&u=db45870abcf338db379d987cf20a97df3918f740&v=4" width="150px;" alt="ahmed walid"/><br /><sub><b>Ahmed Walid</b></sub></a><a href="https://github.com/AbdallahHemdan/oudFrontend/commits/master?author=lido22" title="Code">💻</a><br /></td> <td align="center"><a href="https://github.com/aashrafh" target="_black"><img src="https://avatars0.githubusercontent.com/u/40968967?s=460&v=4" width="150px;" alt=""/><br /><sub><b>Ahmed Ashraf</b></sub></a><a href="https://github.com/AbdallahHemdan/oudFrontend/commits/master?author=aashrafh" title="Code">💻</a><br /></td> <td align="center"><a href="https://github.com/Mahboub99" target="_black"><img src="https://avatars3.githubusercontent.com/u/43186742?s=460&v=4" width="150px;" alt=""/><br /><sub><b>Ahmed Mahboub</b></sub></a><a href="https://github.com/AbdallahHemdan/oudFrontend/commits/master?author=Mahboub99" title="Code">💻</a><br /></td> </tr> </table>Thanks goes to these wonderful people in the frontend team.
License
This software is licensed under MIT License, See License for more information ©AbdallahHemdan.