{"id":14957070,"url":"https://github.com/abdallahhemdan/oud","last_synced_at":"2026-03-09T11:33:25.444Z","repository":{"id":49676077,"uuid":"243637397","full_name":"AbdallahHemdan/Oud","owner":"AbdallahHemdan","description":"🎵   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.","archived":false,"fork":false,"pushed_at":"2022-05-30T22:39:34.000Z","size":268371,"stargazers_count":57,"open_issues_count":0,"forks_count":23,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-11-12T16:02:22.052Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AbdallahHemdan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-27T23:26:26.000Z","updated_at":"2024-06-17T20:34:40.000Z","dependencies_parsed_at":"2022-07-31T17:49:00.227Z","dependency_job_id":null,"html_url":"https://github.com/AbdallahHemdan/Oud","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbdallahHemdan%2FOud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbdallahHemdan%2FOud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbdallahHemdan%2FOud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbdallahHemdan%2FOud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AbdallahHemdan","download_url":"https://codeload.github.com/AbdallahHemdan/Oud/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224305847,"owners_count":17289446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-09-24T13:14:02.579Z","updated_at":"2026-03-09T11:33:25.366Z","avatar_url":"https://github.com/AbdallahHemdan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://github.com/AbdallahHemdan/oudFrontend\" rel=\"noopener\"\u003e\n  \n  \u003cimg width=\"700\" alt=\"Logo With Title (7)\" src=\"https://user-images.githubusercontent.com/40190772/80605635-9ec69100-8a33-11ea-8dff-5453762373ea.png\"\u003e\n\n\n\n\n\u003c/div\u003e\n\n\u003ch3 align=\"center\"\u003eOud Front-End\u003c/h3\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![GitHub contributors](https://img.shields.io/github/contributors/AbdallahHemdan/oudFrontend)](https://github.com/AbdallahHemdan/oudFrontend/contributors)\n[![GitHub issues](https://img.shields.io/github/issues/AbdallahHemdan/oudFrontend)](https://github.com/AbdallahHemdan/oudFrontend/issues)\n[![GitHub forks](https://img.shields.io/github/forks/AbdallahHemdan/oudFrontend)](https://github.com/AbdallahHemdan/oudFrontend/network)\n[![GitHub stars](https://img.shields.io/github/stars/AbdallahHemdan/oudFrontend)](https://github.com/AbdallahHemdan/oudFrontend/stargazers)\n[![GitHub license](https://img.shields.io/github/license/AbdallahHemdan/oudFrontend)](https://github.com/AbdallahHemdan/oudFrontend/blob/master/LICENSE)\n\u003cimg src=\"https://img.shields.io/github/languages/count/abdallahHemdan/oudFrontend\" /\u003e\n\u003cimg src=\"https://img.shields.io/github/languages/top/AbdallahHemdan/oudFrontend\" /\u003e\n\u003cimg src=\"https://img.shields.io/github/languages/code-size/AbdallahHemdan/oudFrontend\" /\u003e\n\u003cimg src=\"https://img.shields.io/github/issues-pr-raw/AbdallahHemdan/oudFrontend\" /\u003e\n\n\u003c/div\u003e\n\n## Table of Contents\n\n- [About the Project](#about-the-project)\n  - [Build with](#build-with)\n- [Getting Started](#getting-started)\n  - [Installation](#installation)\n  - [Running](#running)\n- [Screenshots](#screenshots)\n- [Videos](#videos)\n- [File Structure](#file-structure)\n- [Unit Testing](#unit-testing)\n  - [Running Unit tests](#running-unit-tests)\n  - [Generating Coverage Report](#generating-coverage-report)\n- [Functional Documentation](#functional-documentation)\n- [Contributing](#contributing)\n- [Contributors](#contributors)\n- [License](#license)\n\n\n## About The Project\n\u003e **Oud** is an online music streaming service which is a mimic of [Spotify](https://open.spotify.com/) with all its functionalities\n\n### Build with\n- [React JS](https://reactjs.org/)\n- [React Router](https://reacttraining.com/react-router/web/guides/quick-start)\n- [HowlerJS](https://github.com/goldfire/howler.js/)\n- [Bootstrap](https://getbootstrap.com/)\n- [Jest](https://jestjs.io/)\n- [Enzyme](https://enzymejs.github.io/enzyme/)\n- [JSDOC](https://jsdoc.app/)\n- [Json-Server](https://github.com/typicode/json-server)\n- [Axios](https://github.com/axios/axios)\n\n## Getting Started\n\u003e This is an list of needed instructions to set up your project locally, to get a local copy up and running follow these instructuins.\n\n### Installation\n\n1. **_Clone the repository_**\n\n```sh\n$ git clone https://github.com/AbdallahHemdan/oudFrontend.git\n```\n2. **_Navigate to repository directory_**\n```sh\n$ cd oudFrontend\n```\n\n3. **_Install dependencies_**\n\n```sh\n$ npm install\n```\n\n### Running\n\n1. **_Running on development mode_**\n```sh\n$ npm run json:server\n$ npm run dev\n```\n\n2. **_Running on production mode_**\n```sh\n$ npm run prod\n```\n\n### Screenshots\n\n\u003cdiv align=\"center\"\u003e\n \n![image](https://user-images.githubusercontent.com/40190772/79008135-01c3b700-7b5d-11ea-85c9-9f1e166e299b.png)\n\n\u003chr /\u003e\n\n![25](https://user-images.githubusercontent.com/40190772/80294151-aa316800-8766-11ea-89dd-07cfc32b27f6.png)\n\n\u003chr /\u003e\n\n![chrome_1JjJ8yfh7A](https://user-images.githubusercontent.com/40190772/84220765-e54be880-aad3-11ea-8b58-6e1d32654290.png)\n\n\u003chr /\u003e\n\n![image](https://user-images.githubusercontent.com/40190772/84220506-40311000-aad3-11ea-866e-06e33a1adbf3.png)\n\n\u003chr /\u003e\n\n![image](https://user-images.githubusercontent.com/40190772/79008263-418a9e80-7b5d-11ea-9433-c8d7791a9b81.png)\n\n\u003chr /\u003e\n\n![image](https://user-images.githubusercontent.com/40190772/84220551-563ed080-aad3-11ea-8e68-e85759a8f596.png)\n\n\u003chr /\u003e\n\n![62](https://user-images.githubusercontent.com/40190772/80294147-a6054a80-8766-11ea-95c5-187fb180b2b8.png)\n\n\u003chr /\u003e\n\n![55](https://user-images.githubusercontent.com/40190772/80294153-ae5d8580-8766-11ea-82a2-bab3d5e43f2b.png)\n\n\u003chr /\u003e\n\n![52](https://user-images.githubusercontent.com/40190772/80294154-b0bfdf80-8766-11ea-837f-05e2d94cbe2e.png)\n\n\u003chr /\u003e\n\n![59](https://user-images.githubusercontent.com/40190772/80294155-b1587600-8766-11ea-87df-ee84c2612d3a.png)\n\n\u003chr /\u003e\n\n![102](https://user-images.githubusercontent.com/40190772/80294334-bb7b7400-8768-11ea-8132-a46f1579769a.png)\n\n\u003chr /\u003e\n\n![94604376_255790072229844_6882535695697575936_n](https://user-images.githubusercontent.com/40190772/80294339-bf0efb00-8768-11ea-96de-0e69c7fcd342.png)\n\n\u003chr /\u003e\n\n![94707053_226074958669096_6818316481399357440_n](https://user-images.githubusercontent.com/40190772/80294340-c0402800-8768-11ea-86ac-684f4ec55b6a.png)\n\n\u003chr /\u003e\n\n![94688968_251064116040980_741229785270714368_n](https://user-images.githubusercontent.com/40190772/80294341-c0d8be80-8768-11ea-8f5f-7c64283ada45.png)\n![101](https://user-images.githubusercontent.com/40190772/80294342-c1715500-8768-11ea-8d5a-f65901cde402.png)\n\n\u003chr /\u003e\n\n![71](https://user-images.githubusercontent.com/40190772/80294566-735d5100-876a-11ea-98e8-fd1990850aa5.png)\n\n\n\u003c/div\u003e\n\n### Videos\n- [Player](https://drive.google.com/file/d/1KOHOJDGaLeumGqQenzCeeShPqIudCJBX/preview)\n\n## File Structure\n                                    \n    Oud-Frontend\n    ├── README.md\n    ├── LICENSE\n    ├── CONTRIBUTING.md\t\n    └── oudfrontend\t\n        ├── node_modules\n        ├── package.json\n        ├── jsdoc.conf.json\t\n        ├── .env-cmdrc.json\t\n        ├── .gitignore\n        ├── build\n        ├── public\n        │   ├── favicon.ico\t\n        │   └── index.html\t\n        └── src\n            ├── assets\n            │   ├── images\n            │   └── fonts\n            ├── api\t\n            |   ├── db.json\t\n            |   └── routes.json\t\n            ├── components\t\n            |   ├── Account\n            |   ├── CategoryHeader\t\n            |   ├── likedSongs\t\n            |   ├── Navbar\t\n            |   ├── Sidebar\t\n            |   ├── album\t\n            |   ├── commonComponents\t\n            |   ├── MainContent\t\n            |   ├── Playlist\t\n            |   ├── Subheader\t\n            |   ├── Card\t\n            |   ├── CreatePlaylist\t\n            |   ├── MusicCard\t\n            |   ├── Profile\t\n            |   ├── WebPlayer\t\n            |   ├── CategoryBody\t\n            |   ├── GenreCard\t\n            |   ├── MusicItem\n            |   └── SeeAll\n            ├── config\n            |   └── environment.js\t\n            ├── pages\t\n            |   ├── Account\t\n            |   ├── Home\t\n            |   ├── Profile\t\n            |   └── Search\t\n            ├── routes\t\n            ├── utils\t\n            |   └── index.js\t\n            ├── App.css\t\n            ├── App.js\t\n            ├── index.css\t\n            ├── index.js\t\t\n            └── setupTests.js\n\n\n## Unit testing\n\u003e Each component in our project has its own unit test file separately eg. MusicCard.test.js\n\n### Running Unit tests\n\u003e Run the following command.\n```sh\nnpm run test\n```\n\n### Generating Coverage Report\n\u003e After running the following command an html version will be generated and located at coverage\\index.html.\n```sh\nnpm run test:coverage\n```\n\n## Functional Documentation\n\u003e Run the following command to generate the functional documentation report in docs/index.html\n```sh\nnpm run docs\n```\n\n## Contributing\n\n\u003e 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**.\n\nCheck out our [contributing guidelines](https://github.com/AbdallahHemdan/oudFrontend/blob/master/CONTRIBUTING.md) for ways to contribute.\n\n## Contributors\n\u003e Thanks goes to these wonderful people in the frontend team.\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n    \u003ca href=\"https://github.com/AbdallahHemdan\" target=\"_black\"\u003e\n    \u003cimg src=\"https://avatars1.githubusercontent.com/u/40190772?s=460\u0026v=4\" width=\"150px;\" alt=\"abdallah hemdan\"/\u003e\n    \u003cbr /\u003e\n    \u003csub\u003e\u003cb\u003eAbdallah Hemdan\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003ca href=\"https://github.com/AbdallahHemdan/oudFrontend/commits/master?author=AbdallahHemdan\" title=\"Leader\"\u003e🎯\u003c/a\u003e\u003ca href=\"https://github.com/AbdallahHemdan/oudFrontend/commits/master?author=AbdallahHemdan\" title=\"Code\"\u003e💻\u003c/a\u003e\u003ca href=\"https://github.com/AbdallahHemdan/oudFrontend/pulls?q=is%3Apr+author%3AAbdallahHemdan\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003cbr /\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/abdallahabusedo\" target=\"_black\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/42722816?s=400\u0026u=10a6db683dfe129001b5be9abbed7b7aa03b873c\u0026v=4\" width=\"150px;\" alt=\"Abdallah Sbu Sedo\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAbdallah Abu Sedo\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003ca href=\"https://github.com/AbdallahHemdan/oudFrontend/commits/master?author=abdallahabusedo\" title=\"Code\"\u003e💻\u003c/a\u003e\u003cbr /\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/lido22\"  target=\"_black\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/42592954?s=400\u0026u=db45870abcf338db379d987cf20a97df3918f740\u0026v=4\" width=\"150px;\" alt=\"ahmed walid\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAhmed Walid\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003ca href=\"https://github.com/AbdallahHemdan/oudFrontend/commits/master?author=lido22\" title=\"Code\"\u003e💻\u003c/a\u003e\u003cbr /\u003e\u003c/td\u003e\n     \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/aashrafh\" target=\"_black\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/40968967?s=460\u0026v=4\" width=\"150px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAhmed Ashraf\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003ca href=\"https://github.com/AbdallahHemdan/oudFrontend/commits/master?author=aashrafh\" title=\"Code\"\u003e💻\u003c/a\u003e\u003cbr /\u003e\u003c/td\u003e\n     \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Mahboub99\" target=\"_black\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/43186742?s=460\u0026v=4\" width=\"150px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAhmed Mahboub\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003ca href=\"https://github.com/AbdallahHemdan/oudFrontend/commits/master?author=Mahboub99\" title=\"Code\"\u003e💻\u003c/a\u003e\u003cbr /\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n \u003c/table\u003e\n \n## License\n\n\u003e This software is licensed under MIT License, See [License](https://github.com/AbdallahHemdan/oudFrontend/blob/master/LICENSE) for more information ©AbdallahHemdan.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdallahhemdan%2Foud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabdallahhemdan%2Foud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdallahhemdan%2Foud/lists"}