Welcome to my YouTube channel! 🎉 In this channel, I share exciting content related to web development. Whether you're interested in Angular, Javascript, or Productivity tips, you'll find something valuable here. YouTube Channel
I'm Sam, and I'm passionate about product engineering and web development. I create videos that will help you learn web development.
- [ Angular ]: [Learn the fundamentals. I explained everything you need to get started with this JavaScript framework written in TypeScript. It is the web development framework for building the future. works at any scale. Loved by millions. Build for everyone. open-source framework for building single-page client applications using HTML and TypeScript.]
- [ Javascript ]: [JavaScript is a powerful programming language that can add interactivity to a website. JavaScript is easy to learn. It's the foundation of frontend web development.]
- [ Career Tips ]: [self-assessment, goal setting, action planning, implementation, and refinement. By following these steps, you can develop a road map for achieving your career goals. Tips to improve your career development. Cultivating a beginner's mindset is a critical part of career growth. critical part of your professional growth.]
- [ Common Errors ]: [Mistakes to Avoid in Software Development Projects.]
- [ Development Tools ]: [Top Software Development Tools List.]
- [ Typescript ]: [TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors. TypeScript can help enhance and improve your web development projects.]
- [ Git & GitHub ]: [GitHub is where over 100 million developers shape the future of software together. Contribute to the open-source community and manage Git repositories. This practical guide gets you to jump right into using GitHub, learning the basics of Git. Git and GitHub are two of the most essential tools in the world of software development.]
- [ Video Conferencing Tool ]: [Unlock the potential of video conferencing software development. Dive into our guide for insights on key features and cost factors. If you're looking to integrate video communication into your app or planning to build a video streaming/conference app from scratch, create a fully customized audio & video conferencing app.]
Welcome to Stream Studio, a sleek and powerful music discovery platform powered by the Spotify Web API! 🚀
Search for your favorite songs, artists, and albums, and stream previews right from your browser. This project is designed to give you a seamless experience in exploring the world of music.
Whether you're a developer eager to contribute during Hacktoberfest or just a music lover, there’s something here for everyone!
Let’s build something amazing together!
- Search by Song: Type in the name of any song, and we'll provide a list of results along with previews and details.
- Search by Artist: Explore an artist's entire discography, from their most popular songs to all their albums.
- Search by Album: Dive deep into any album and browse through all the songs in it.
- Stream Previews: Get a sneak peek by listening to a short audio clip from the song.
- Visually Stunning Interface: A polished, user-friendly UI that makes exploring music enjoyable.
- Pagination: Display results properly with a neat, interactive design to avoid clutter.
-
Spotify Web API: The backbone of this project, fetching all song details, including:
- Song: Name, URL, and preview link.
- Artist: Discover all albums and songs from your favorite musicians.
- Album: Check out album details and all tracks within it.
- Cover Image: Beautiful artwork for each track or album.
-
Design: A visually appealing, responsive layout.
-
Music Player: A simple music player to preview songs directly from the app.
-
Pagination: Ensure easy navigation through results.
-
Documentation: Detailed instructions for setting up and contributing.
- JavaScript / TypeScript: For handling API calls and functionality.
- React.js: To build a seamless, interactive UI.
- HTML/CSS: For designing a clean and engaging user interface.
- Spotify Web API: To fetch all the music data.
- Git/GitHub: For version control and collaboration.
- Spotify Developer Account: You’ll need to sign up for a Spotify Developer account to get access to the Spotify Web API.
- API Key: Once registered, you’ll be able to create an app and get your Client ID and Secret for authentication.
- Node.js: Ensure you have Node.js installed to run the project.
I'm thrilled to invite you to contribute to Stream Studio, especially during Hacktoberfest! Follow the steps below to get started:
-
Fork the Repository
Click the "Fork" button at the top right of this page to create a copy of this repository under your own GitHub account. -
Clone Your Fork
Once you've forked the repo, clone it to your local machine:git clone https://github.com/YourUsername/stream-studio.git
-
Create a Branch Before making changes, create a new branch to keep your changes organized:
git checkout -b feature-branch-name-
Make Changes Make the necessary changes to the codebase.
-
Commit and Push Changes After making your changes, stage and commit them:
git add .
git commit -m "Descriptive Commit Message"Push your changes to your fork:
git push origin feature-branch-name- Submit a Pull Request Once you've pushed your changes, go to the original repository and click "New Pull Request." Make sure to select your feature branch, provide a clear description of the changes, and submit the pull request. If you're contributing during Hacktoberfest, add Hacktoberfest in the description and I'll label it accordingly.
Don't miss out on new videos! Subscribe to my channel and hit the notification bell 🔔 to receive updates whenever I upload fresh content. Let's learn, laugh, and explore together!
- YouTube: YouTube Channel Link
- Facebook: Facebook Page Link
- Instagram: Instagram Page Link
Feel free to reach out, comment on videos, and share your thoughts. I appreciate your support! 🙌
This project is licensed under the MIT License.
If you have any questions or need further assistance, feel free to ask! 🚀
clone the forked repository to your system. Go to your GitHub account, open the forked repository, click on the code button and then clone the repository. If you want to use the terminal, use the following commands after you fork the repository, open the terminal type the given command
git clone repo url
create a branch on your local repository to solve a problem.
Terminal commands
git checkout -b your_new_branch_name
add your changes(folder) to that branch. Make necessary changes and commit those changes. Terminal commands
git add .
git commit -m "your-commit-message"
finally, push your local repository to the remote repository compare & submit a pull request
terminal commands
git push origin
Go to your repository on GitHub, you'll see a compare & pull request button. Click on that button.
Now submit the pull request.
For quick approval of the pull request, reach out to me on the mentioned social media channels.
_____ _ _ __ __
|_ _| | | | \ \ / /
| | | |__ __ _ _ __ | | __ \ V /___ _ _
| | | '_ \ / _` | '_ \| |/ / \ // _ \| | | |
| | | | | | (_| | | | | < | | (_) | |_| |
\_/ |_| |_|\__,_|_| |_|_|\_\ \_/\___/ \__,_|
______
| ___|
| |_ ___ _ __
| _/ _ \| '__|
| || (_) | |
\_| \___/|_|
______ _ _ _ _
| ___ \ (_) | | | | | |
| |_/ / ___ _ _ __ __ _ | |_| | ___ _ __ ___| |
| ___ \/ _ \ | '_ \ / _` | | _ |/ _ \ '__/ _ \ |
| |_/ / __/ | | | | (_| | | | | | __/ | | __/_|
\____/ \___|_|_| |_|\__, | \_| |_/\___|_| \___(_)
__/ |
|___/
if (youEnjoyed) {
// (star ⭐ & fork 🍽️) this repository.
// - Fork this repository by clicking on the fork button at the top of this page. This will create a copy of this repository in your account.
starThisRepository();
}