Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abdallahhemdan/oud
🎵 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.
https://github.com/abdallahhemdan/oud
clone-spotify cufe-2022 front-end-development frontend hemdan home mimic music music-card music-player music-player-application oud react-js react-router reactjs software-engineering spotify
Last synced: 7 days ago
JSON representation
🎵 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.
- Host: GitHub
- URL: https://github.com/abdallahhemdan/oud
- Owner: AbdallahHemdan
- License: mit
- Created: 2020-02-27T23:26:26.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-05-30T22:39:34.000Z (over 2 years ago)
- Last Synced: 2024-09-24T02:19:27.490Z (9 days ago)
- Topics: clone-spotify, cufe-2022, front-end-development, frontend, hemdan, home, mimic, music, music-card, music-player, music-player-application, oud, react-js, react-router, reactjs, software-engineering, spotify
- Language: JavaScript
- Homepage:
- Size: 256 MB
- Stars: 57
- Watchers: 10
- Forks: 22
- 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)
- [HowlerJS](https://github.com/goldfire/howler.js/)
- [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
└── 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.