https://github.com/mahboub99/oud-front-end
🎵 The frontend of Oud, an online music streaming service which is a mimic of Spotify with all its functionalities built using ReactJS, React-Router, Bootstrap.
https://github.com/mahboub99/oud-front-end
Last synced: 11 months ago
JSON representation
🎵 The frontend of Oud, an online music streaming service which is a mimic of Spotify with all its functionalities built using ReactJS, React-Router, Bootstrap.
- Host: GitHub
- URL: https://github.com/mahboub99/oud-front-end
- Owner: Mahboub99
- License: mit
- Created: 2020-05-07T14:49:11.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-09-19T12:49:47.000Z (over 5 years ago)
- Last Synced: 2025-03-31T09:41:13.046Z (12 months ago)
- Language: JavaScript
- Homepage:
- Size: 254 MB
- Stars: 13
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Oud Front-End
[](https://github.com/AbdallahHemdan/oudFrontend/contributors)
[](https://github.com/AbdallahHemdan/oudFrontend/issues)
[](https://github.com/AbdallahHemdan/oudFrontend/network)
[](https://github.com/AbdallahHemdan/oudFrontend/stargazers)
[](https://github.com/AbdallahHemdan/oudFrontend/blob/master/LICENSE)
## Table of Contents
- [About the Project](#about-the-project)
- [Build with](#build-with)
- [Getting Started](#getting-started)
- [Installation](#installation)
- [Running](#running)
- [Screenshots](#screenshots)
- [Videos](#videos)
- [File Structure](#file-structure)
- [Unit Testing](#unit-testing)
- [Running Unit tests](#running-unit-tests)
- [Generating Coverage Report](#generating-coverage-report)
- [Functional Documentation](#functional-documentation)
- [Contributing](#contributing)
- [Contributors](#contributors)
- [License](#license)
## About The Project
> **Oud** is an online music streaming service which is a mimic of [Spotify](https://open.spotify.com/) with all its functionalities
### Build with
- [React JS](https://reactjs.org/)
- [React Router](https://reacttraining.com/react-router/web/guides/quick-start)
- [Bootstrap](https://getbootstrap.com/)
- [Jest](https://jestjs.io/)
- [Enzyme](https://enzymejs.github.io/enzyme/)
- [JSDOC](https://jsdoc.app/)
- [Json-Server](https://github.com/typicode/json-server)
- [Axios](https://github.com/axios/axios)
## 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_**
```sh
$ git clone https://github.com/AbdallahHemdan/oudFrontend.git
```
2. **_Navigate to repository directory_**
```sh
$ cd oudFrontend
```
3. **_Install dependencies_**
```sh
$ npm install
```
### Running
1. **_Running on development mode_**
```sh
$ npm run json:server
$ npm run dev
```
2. **_Running on production mode_**
```sh
$ npm run prod
```
### Screenshots
### Videos
- [Player](https://drive.google.com/file/d/1KOHOJDGaLeumGqQenzCeeShPqIudCJBX/preview)
## 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
│ └── manifest.json
└── 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.
```sh
npm run test
```
### Generating Coverage Report
> After running the following command an html version will be generated and located at coverage\index.html.
```sh
npm run test:coverage
```
## Functional Documentation
> Run the following command to generate the functional documentation report in docs/index.html
```sh
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](https://github.com/AbdallahHemdan/oudFrontend/blob/master/CONTRIBUTING.md) for ways to contribute.
## Contributors
> Thanks goes to these wonderful people in the frontend team.
Abdallah Hemdan💻
Abdallah Abu Sedo💻
Ahmed Walid💻
Ahmed Ashraf💻
Ahmed Mahboub💻
## License
> This software is licensed under MIT License, See [License](https://github.com/AbdallahHemdan/oudFrontend/blob/master/LICENSE) for more information ©AbdallahHemdan.