Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rajesh-royal/wynk-music-app-clone

Frontend Clone of WYNK music streaming APP using ReactJS.
https://github.com/rajesh-royal/wynk-music-app-clone

jest music-player react reactjs storybook tailwindcss typescript website

Last synced: 3 months ago
JSON representation

Frontend Clone of WYNK music streaming APP using ReactJS.

Host: GitHub
URL: https://github.com/rajesh-royal/wynk-music-app-clone
Owner: Rajesh-Royal
License: other
Created: 2021-05-14T03:52:51.000Z (almost 4 years ago)
Default Branch: develop
Last Pushed: 2022-05-23T02:07:29.000Z (over 2 years ago)
Last Synced: 2024-04-24T10:29:18.429Z (10 months ago)
Topics: jest, music-player, react, reactjs, storybook, tailwindcss, typescript, website
Language: TypeScript
Homepage: https://wynk-clone.vercel.app/
Size: 1.28 MB
Stars: 5
Watchers: 2
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # 
WYNK Clone :wink:




Frontend Clone of WYNK music streaming APP using **[ReactJS](https://reactjs.org/)** and **[tailwind.css](https://tailwindcss.com/)**





![Vercel Status](https://therealsujitk-vercel-badge.vercel.app/?app=wynk-clone)





![W3C Validation](https://img.shields.io/w3c-validation/html?targetUrl=https%3A%2F%2Fwynk-clone.netlify.app%2F)

![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/Rajesh-Royal/WYNK-Music-App-Clone)

![GitHub commits since tagged version](https://img.shields.io/github/commits-since/Rajesh-Royal/WYNK-Music-App-Clone/1.0.0/master?color=green&logoColor=green)

![Twitter URL](https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fgithub.com%2FRajesh-Royal%2FWYNK-Music-App-Clone)






## Getting Started with This Project

This project is bootstrapped with [Create React App](https://github.com/facebook/create-react-app) with typescript template and using **tailwind.css** as UI library. For Components documentation using **Storybook** and Jest & **@testing-library/react** for unit testing.

**Code formatting:** This project usages `eslint` with `prettier`, you can define you own set of rules in `.eslintrc.json` and `.prettierrc` files. This project is configured to work  eslint with prettier

Your code will be preetify and linted before pushing to repo with **husky-hooks**.

This project is using typescript, you may need to install seprate @types library for your need.

Instead of **`react-scripts`** this project usages **[craco](https://bit.ly/2Rvfotf)** to override *Create React App Configurations* without eject.

If your build fails because of postcss [check-this](https://bit.ly/3widWsO).

I use VSCode editor and having these extension enabled while having development of this project.

- [ESLint](https://bit.ly/3v75lsG)

- [markdownlint](https://bit.ly/3wnW4Na)

- [ES7/React/Redux snippets](https://bit.ly/3ub5ESb)

- [Tailwind CSS IntelliSense](https://bit.ly/3wtUgSD)

:warning: You must read the contribution.md file before you actually start contributing to this repo.

## 
Available Scripts :helicopter:


This project usages Yarn as package manager and in the project directory, you can run:

| Script             | Description                   |

|--------------------|-------------------------------|

| `start:dev`        | Starts the development server |

| `build`            | Production build              |

|  `test`            | Runs unit tests               |

|  `eject`           | [React Eject](https://create-react-app.dev/docs/available-scripts/#npm-run-eject) |

| `lint`             | Shows all the linting errors in codebase  |

| `lint:fix`         | Fix all the liting errors |

| `pretty:code`      | Preetyfiy your codebase content  |

| `storybook`        | Starts storybook development & Builds tailwind.css for storybook  |

| `build:storybook`  | Builds the storybook docs  |

:warning: You can ignore rest of the commands.

## 🧐 What's inside?

A quick look at the top-level files and directories you'll see in this project.

    .

    ├── .github

    ├── .storybook

    ├── .vscode

    ├── node_modules

    ├── public

    ├── src

        ├── assets

        ├── components

        ├── containers

        ├── context

        ├── pages

        ├── routes

        ├── stories

        ├── utils

    ├── _redirects

    ├── .env

    ├── .eslintrc.json

    ├── .gitignore

    ├── .markdownlint.json

    ├── .prettierignore

    ├── .prettierrc

    ├── contribution.md

    ├── craco.config.js

    ├── errors.md

    ├── LICENSE

    ├── package.json

    ├── package.info.md

    ├── postcss.config.js

    ├── README.md

    ├── tailwind.config.js

    ├── ToDo.md

    ├── tsconfig.json

    └── yarn.lock

1. **`.vscode/`**: This directory contains all of the workspace setting for vscode.

2. **`.github/`**: This directory contains ISSUES, feature request, Pull request and workflow templates of this repository.

## 💫 Deploy

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/Rajesh-Royal/WYNK-Music-App-Clone)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/Rajesh-Royal/WYNK-Music-App-Clone)