Musicat

Musicat is a collaborative web application designed for music enthusiasts to share, rate, and review music. This project was developed using the MERN stack (MongoDB, Express.js, React, Node.js) and incorporates modern web development practices.

Figma file: https://www.figma.com/design/7VAL53tEfU0iyFlVQhyHbe/musik-view-only?node-id=8-96&node-type=canvas&t=ZjVFnM6HKC5JOzGr-0

Core Fundamentals

Tech Stack

• Frontend: Next.js (React framework)
• Backend: Express.js
• Database: MongoDB
• Styling: Tailwind CSS
• Authentication: Clerk
• API Integration: Spotify API

Key Features

1. User authentication and profiles

• Music search functionality (artists, albums, tracks)
• Rating and review system
• Responsive design with custom UI components

Project Structure

The project is divided into two main parts:

• Frontend (/frontend): Next.js application
• Backend (/backend): Express.js server

Frontend Components

• Nav: Navigation component
• SearchBar: Search functionality
• MusicCard: Displays music information
• Ratings: Shows user ratings
• SearchResult: Displays search results

Styling

• Custom Tailwind CSS configuration
• Responsive design
• Custom color palette and shadows

API Integration

• Spotify API for music data
• Custom backend routes for handling Spotify API requests