WYNK Clone 😉

Frontend Clone of WYNK music streaming APP using ReactJS and tailwind.css

Getting Started with This Project

This project is bootstrapped with 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 to override Create React App Configurations without eject.

If your build fails because of postcss check-this.

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

• ESLint
• markdownlint
• ES7/React/Redux snippets
• Tailwind CSS IntelliSense

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

Available Scripts 🚁

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
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

⚠️ 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