✨ This workspace has been generated by Nx, a Smart, fast and extensible build system. ✨
This is a small project I developed in my spare time to explore and test the Spotify API. The application allows users to log in, view their playlists, and manage the order of songs through an interactive interface.
- User Authentication: Log in with your Spotify account to access your playlists.
- Playlist Viewing: View all the playlists you have created in your Spotify account.
- Playlist Details: Access a detailed view of each playlist, showing all the songs it contains.
- Song Reordering: Use the dnd-kit library to drag and drop songs within a table, easily adjusting their order.
- Nx: Used to manage both frontend and backend in a monorepo.
- React: Frontend implementation, including routing libraries and dnd-kit for drag-and-drop functionality.
- NodeJS: Backend implementation and handling of the Spotify API.
- Clone this repository.
- Install dependencies with npm install or yarn install.
- Configure your Spotify API credentials.
- To start the frontend, run
npm run start-front. Open your browser and navigate to http://localhost:3000/ - To start the backend, run
npm run start-back.
- Go to the Spotify Developer Dashboard.
- Log in and navigate to the dashboard.
- Click on the "Create App" button to create a new app.
- Configure the Redirect URIs by adding the following:
http://localhost:3000/callbackhttp://localhost:3000
- Once the app is created, note down the Client ID and Client Secret.
Create a .env file at the root level of the monorepo with the following content:
CLIENT_ID=<your_client_id>
API_BASE_URL=http://localhost:4000
BASE_URL=http://localhost:3000
CLIENT_SECRET=<your_client_secret>
PORT=4000
It's important that the API runs on port 4000. I couldn't manage to use the environment file (common/src/lib/api-client.ts).
If you happen to use Nx plugins, you can leverage code generators that might come with it.
Run nx list to get a list of available plugins and whether they have generators. Then run nx list <plugin-name> to see what generators are available.
Learn more about Nx generators on the docs.
To execute tasks with Nx use the following syntax:
nx <target> <project> <...options>
You can also run multiple targets:
nx run-many -t <target1> <target2>
..or add -p to filter specific projects
nx run-many -t <target1> <target2> -p <proj1> <proj2>
Targets can be defined in the package.json or projects.json. Learn more in the docs.
Have a look at the Nx Console extensions. It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.
Just run nx build demoapp to build the application. The build artifacts will be stored in the dist/ directory, ready to be deployed.
Nx comes with local caching already built-in (check your nx.json). On CI you might want to go a step further.