Code Monkey home page Code Monkey logo

spotify-imersao-alura's Introduction

๐ŸŽง Purple Spotify

Spotify landing page clone

Website

This project was developed during a 5-day immersion event organized by Alura. It involved recreating the landing page of Spotify, providing an oportunity for learning and practice in various Front-end technologies.
I have taken the initiative to customize according to my favorite artists and playlists ๐Ÿ’œ

Website Behavior

๐Ÿ”ง Technologies Used

  • HTML: Structured the web content.
  • CSS: Styled the web page.
  • JavaScript: Added interactivity and allowed fetching information from the API.
  • React.js: Built the user interface with reusable components and allows using JSX to write HTML inside React.
  • Node.js: Provided the environment to work with JS and to developed a local mock API from a JSON file.
  • Json: Structure the fake database.

โœ… Tasks Completed

โœ” Recreated the Spotify landing page.
โœ” Added responsiveness to the project using Media Queries.
โœ” Developed a mock API for local testing.

Website Responsiveness

๐Ÿš€ New Features

After the Alura Immersion, I've enhanced the project with new functionalities.

The data for the fake API, previously kept localy, has been migrated to a JSON Server hosted on Vercel. The application now communicates with two different endpoints of the Spotify fake API to fetch the required data for artists and playlists.

The data is fetched using hooks in React, simplifying the reuse of stateful logic between components without altering the component hierarchy.

๐Ÿ”บ JSON Server

๐Ÿšฉ Next Steps

One of the primary goals for this project is to replace the current fake API with the official Spotify API. This will allow the application to interact with real Spotify data, enhancing the overall functionality and user experience.

Stay tuned for updates on this project as I continue to work towards this goal!

๐ŸŒ Spotify API Documentation

๐Ÿ”— Links

Note

Please note that this project is a work in progress and may require further development to fully replicate the functionality of the original Spotify landing page.

spotify-imersao-alura's People

Contributors

gabriellabueno avatar

Stargazers

Guilherme da Silva avatar Leonardo Boeira Maciel avatar Levi Medeiros Magny avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.