Implemented Spotify Clone UI

README.md

@@ -1,72 +1,10 @@
-# Spotify Clone Assignment
-Welcome to the Spotify Clone assignment! In this assignment, you'll be tasked with creating a Spotify clone using React, Vite for project setup, and Tailwind CSS for styling. Your application will consist of two main pages: the homepage and the search page. Additionally, you have the option to include a third page for search results.
+# Spotify Landing Clone
 
-## Instructions
-Fork this Repository: Start by forking this repository to your GitHub account. This will allow you to work on your own copy of the project without affecting the original repository.
+## Live Demo - https://musicallday.netlify.app/
 
-Clone the Repository: Once you've forked the repository, clone it to your local machine using the following command:
+![image](https://github.com/Saurabh-Singh-Negi/spotify-clone-assignment/assets/42130886/6063a463-f81f-4e4c-9516-92bf2b535589)
 
-```bash
-git clone https://github.com/practicehealth/spotify-clone-assignment.git
-```
+![image](https://github.com/Saurabh-Singh-Negi/spotify-clone-assignment/assets/42130886/c327372a-a7f1-43e1-bb4c-e9167b4f7434)
 
-Set Up Environment: Make sure you have Node.js installed on your machine. Then navigate to the project directory and install the dependencies using npm or yarn:
 
-```bash
-cd spotify-clone
-npm install
-```
-<!-- ####  Project Structure: 
-Familiarize yourself with the project structure. You'll find directories for components, pages, assets, and other necessary files. -->
 
-#### Implement the UI Components: 
-Your task is to implement the UI components for the homepage, search page, and optionally the search results page. Use Tailwind CSS for styling and ensure that all UI components read data from a JSON file. Avoid hardcoding any artist names or other data directly into the components.
-
-#### Mock Data from JSON: 
-Populate the data.json file with mock data for your application. This data will be used to populate the UI components.
-
-#### Create Pages:
-Implement the logic for routing and create the necessary React components for the homepage, search page, and search results page (if you choose to include it). Ensure that the pages display the correct content and styles.
-The design should be responsive on all devices including smartphones, tablets, and desktops.
-
-#### Screenshots
-Here are the screenshots of the pages you need to create:
-
-Homepage: ![Homepage](images/homepage.png)
-
-Search Page: ![SearchPage](images/search.png)
-
-(Optional) Search Results Page:![SearchResults](images/search-result2.png)
-
-#### Testing: Test your application locally to ensure that all features work as expected. Use the Vite development server to run your application:
-
-```bash
-npm run dev
-```
-#### Commit Changes:
-Once you're satisfied with your changes, commit them to your local repository:
-
-```bash
-git add .
-git commit -m "Implemented Spotify Clone UI"
-```
-
-#### Push Changes: 
-Push your commits to your forked repository on GitHub:
-
-```bash
-git push origin main
-```
-#### Make a Pull Request:
-Finally, navigate to your forked repository on GitHub and create a pull request to submit your changes. Provide a descriptive title and details about the changes you've made. and your internshala name and email along with the PR.
-
-Resources
-[React Documentation](https://react.dev/)
-
-[Vite Documentation](https://vitejs.dev/guide/)
-
-[Tailwind CSS Documentation](https://tailwindcss.com/docs)
-
-[Spotify UI For Reference](https://open.spotify.com/)
-
-If you have any questions or need clarification on any aspect of the assignment, don't hesitate to reach out. Good luck!