My goal was to learn React and automatically build, test, and deploy the project (CI/CD).
- I built this project based on Levani's ART design on Dribbble.
- The first thing I did was replicating the design by only using HTML and CSS: Preview.
- I needed backend to fetch music tracks and images. So I made this backend project
- I added some interactivity and statefulness using React.
- I added some tests for individual components.
- Setup CI/CD: The workflow
- Custom audio player: Example code for mobile and desktop
- This app fetches data before ReactDOM.render even called: Example for the dispatch call and data transformation
- Main view: Example code
- Unit tests: Example test
- I used Redux as a state management library since many React developers default to Redux for state management.
- Material UI is a great library that provides you with solid pre-styled components that will get the job done faster. However, I still needed to customize some of the components to make this app look unique.
- Testing is an essential part of production applications. This app uses React Testing Library and Jest to unit test its essential features.
- Continuous Integration and Deployment (CI/CD) is one of the reasons I built this project. GitHub Actions makes it easy to automate software workflows, it's easy to set up since i'm hosting this repository in Github and I can test the workflow locally using nektos/act.
- Use React Context as my state management solution instead of Redux.
- Refactor some of the code. Especially this Footer.tsx file and this MobilePlayer.tsx
- Test using Enzyme.
- Add end-to-end tests with Cypress.
- Web App design by Levani's ART design on Dribbble.
- Music tracks by mixkit.co
- Images from freepik