Music world aims to provide easy access to finding similar music to your favorite songs. We have a large database of songs and artist that you can search through to find similar music to your favorite songs. we also have a database of artist that you can search through to find similar music to your favorite artist.
- 🌟 React - A JavaScript library for building user interfaces.
- 🔀 React Router - Declarative routing for React apps at any scale.
- 💜 TypeScript - A superset of JavaScript.
- ⚡ Vite - Next generation frontend tooling.
- ⚙️ Babel with preset-env - The compiler for next generation JavaScript.
- 🎨 Tailwind - A utility-first CSS framework.
- 🎨 SCSS - A popular CSS preprocessor.
- 🔺 Vercel - Deploy your application on Vercel.
- ⚙️ MongoDB - Database
- 🎞 Barba.js - A library for smooth transitions between pages in web applications.
- 🎞 Gsap - A popular animation library for the web.
- 🦥 Gitmoji - A library for adding emojis to Git commit messages.
- 💅 Prettier - Opinionated Code Formatter.
- 🔍 ESLint - Tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
- 📦 Simple Import Sort - Easy autofixable import sorting.
- 📦 Import Plugin - Rules that help validate proper imports.
- 📦 Tailwind Plugin - Plugin for Tailwind CSS usage. And a few other ES2015+ related rules.
- 🐶 Husky - Git hooks made easy.
- Commit-msg - A git hook for validating commit messages.
- Pre-commit - A git hook that runs before making a commit.
- 🚫 Lint Staged - Run linters on git staged files.
- ✍️ Conventional Commits with 🎉 Gitmoji - A specification for adding human and machine readable meaning to commit messages.
- 🚦 GitHub Actions - Automate your workflow on GitHub.
- 👽️ Spline runtime - runtime allows you to run Spline scenes in Javascript.
- 💄 Radix , ui.shadcn.com, Lucide React - component library.
- 💄 Clerk - User management
- SoundCloud Developers - SoundCloud's official documentation for developers, specifically the section on authentication.
- Spotify Developers - Spotify's official documentation for developers, specifically the section on authentication.
There is still a long way to go. I still have a lot of design choices ahead of me, such as the mobile responsiveness of the site among many other changes.
Validation and filtering: Verifying that the incoming data conforms to the expected format and meets certain criteria. This can involve checking data types, length limits, or specific patterns. For instance, ensuring that an email address follows a valid format or that a numeric value is within an acceptable range.
Sanitize the data: To sanitize incoming data means to clean and validate the data before processing or storing it in a system. The process of sanitizing data aims to prevent or mitigate potential security risks, such as injection attacks, cross-site scripting (XSS), or other forms of malicious activities that exploit vulnerabilities in the system.
Exporting: Allow the user to automatically export the artist list into a spotify playlist in their account
3D assets: Migrate from spline to Three.js for the 3d scenes as they will reduce the blocking time by a large margin. Will most likely be using react 3 fiber for the most smooth transition
DB: Migrate the current database to SQL
I have deepened my understanding of authentication and Typescript most of all. I started out by fully typing out the routes for authentication manually without Clerk. This let me fully appreciate all that clerk does to ease the process of auth.