PlayChain - Linked List Playlist Manager

A modern, responsive music playlist management system built with Next.js and TypeScript, implementing a Singly Linked List data structure for efficient playlist operations. This project demonstrates practical application of data structures and algorithms in web development with real-time database integration and a stunning purple/pink gradient UI.

🎯 Project Overview

PlayChain is a web-based playlist management system that leverages the power of Linked List data structures to provide efficient song management operations. The project combines front-end web technologies with back-end database integration to create a fully functional music playlist manager. Users can add, edit, delete, and reorder songs while the system maintains data using a singly linked list implementation, providing both educational insight into data structures and practical utility.

📋 Features

• Linked List Operations: Implementation of core data structure operations
  • insert() - Add songs at the end of the playlist
  • insertAtFront() - Add songs at the beginning
  • insertAt(index) - Insert songs at specific positions
  • remove() - Remove the last song
  • removeAtFront() - Remove the first song
  • print() - Display the linked list structure
• Dynamic Playlist Management: Add, edit, delete, and reorder songs with intuitive UI
• Real-time Search: Filter songs by title or artist instantly
• Statistics Dashboard: View total songs, duration, and unique artists count
• Database Integration: MySQL database with XAMPP for persistent data storage
• Live Status Indicator: Real-time database connection monitoring
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Visual Data Structure: Interactive visualization of the linked list structure
• Touch-Optimized UI: Large tap targets and mobile-friendly interactions

🏗️ Project Structure

playchain/
├── app/
│   ├── api/                    # API routes
│   │   ├── db-status/         # Database connection status endpoint
│   │   ├── songs/             # CRUD operations for songs
│   │   │   └── [id]/          # Individual song operations
│   │   └── stats/             # Playlist statistics endpoint
│   ├── components/            # React components
│   │   ├── DatabaseStatus.tsx # Database connection indicator
│   │   ├── Player.tsx         # Music player UI component
│   │   └── Playlist.tsx       # Playlist management component
│   ├── globals.css            # Global styles and responsive design
│   ├── layout.tsx             # Root layout component
│   └── page.tsx               # Home page
├── database/
│   └── playchain.sql          # Database schema and sample data
├── lib/
│   ├── backend.ts             # Backend API utility functions
│   ├── db.ts                  # MySQL connection pool configuration
│   ├── dbStatus.ts            # Database status checker
│   └── linkedList.ts          # Singly Linked List implementation
├── public/
│   └── uploads/               # Upload directory
├── package.json               # Project dependencies
└── README.md                  # Project documentation

🛠️ Technologies Used

Frontend

• Next.js 16: React-based framework for server-side rendering and routing
• React 19: Component-based UI library
• TypeScript: Static typing for JavaScript
• Tailwind CSS v4: Utility-first CSS framework
• Lucide React: Icon library for modern UI elements

Backend

• MySQL: Relational database for data persistence
• mysql2: MySQL client for Node.js
• Next.js API Routes: Serverless API endpoints

Development Tools

• ESLint: Code linting and quality assurance
• XAMPP: Local development server (Apache + MySQL)

🚀 Getting Started

Prerequisites

1. Node.js (v18 or later) and npm
2. XAMPP or similar MySQL server
3. Web browser (Chrome, Firefox, Safari, or Edge)

Quick Start

1. Clone the repository and navigate to the project directory
2. Install dependencies: npm install
3. Start XAMPP and enable MySQL service
4. Import the database schema from database/playchain.sql into phpMyAdmin
5. Configure database credentials in lib/db.ts if needed
6. Run the development server: npm run dev
7. Open http://localhost:3000 in your browser

📊 Data Structure Implementation

The project implements a Singly Linked List with the following structure:

• Node: Contains song data and a pointer to the next node
• LinkedList Class: Manages the chain of nodes with methods for insertion, deletion, and traversal
• Type-Safe Implementation: Written in TypeScript for type safety and better development experience

Key Operations

Operation	Time Complexity	Description
insert()	O(n)	Add to end of list
insertAtFront()	O(1)	Add to beginning
insertAt(index)	O(n)	Add at specific position
remove()	O(n)	Remove from end
removeAtFront()	O(1)	Remove from beginning
print()	O(n)	Display all elements

🎨 Design Features

• Color Scheme: Purple (#8b5cf6) to Pink (#ec4899) gradients
• Glass Morphism: Translucent cards with backdrop blur effects
• Smooth Animations: Transitions, hover effects, and loading states
• Responsive Grid: Adapts from 5-column table to mobile cards
• Dark Theme: Space-themed gradient background

🔐 Database Schema

The songs table structure:

• id: Primary key (auto-increment)
• title: Song title (VARCHAR)
• artist: Artist name (VARCHAR)
• duration: Song duration (VARCHAR)
• position: Position in playlist (INT)
• created_at: Record creation timestamp
• updated_at: Last update timestamp

🤝 Contributing

This is an academic project for HNDSE - Programming Data Structures and Algorithms coursework.

📄 License

This project is created for educational purposes as part of the NIBM HNDSE program.

👥 Authors

• Shehan Ranasinghe
• Thiloka Indhuwari
• Thurya Nikethani

📞 Support

For questions or issues related to this project, please refer to the course materials or contact your instructor.

🙏 Acknowledgments

• NIBM for providing the coursework framework
• Next.js team for excellent documentation
• Lucide for beautiful icon set
• Open-source community for inspiration and support

---

Project Course: Programming Data Structures and Algorithms - 1
Institution: NIBM (National Institute of Business Management)
Program: Higher National Diploma in Software Engineering (HNDSE)
Course Code: GAHDSE251F-001 - Click "Import" tab - Choose file: database/playchain.sql - Click "Go" to execute

• Verify the playchain database and songs table are created

4. Configure database connection

   • Open lib/db.ts
   • Update MySQL credentials if needed (default: root/no password)

   host: 'localhost',
   user: 'root',
   password: '',  // Add your MySQL password if set
   database: 'playchain',

5. Run the development server

   npm run dev
   # or
   yarn dev

6. Open in browser

   • Navigate to http://localhost:3000
   • You should see the PlayChain interface with sample songs

📖 Usage

Adding Songs

1. Click "Add Song" button
2. Select insertion position:
   • End (insert) - Adds to the end of playlist
   • Front (insertAtFront) - Adds to the beginning
   • At Index (insertAt) - Adds at specific position
3. Fill in song title, artist, and duration (e.g., 3:45)
4. Click "Add Song" to confirm

Managing Playlist

• Play Song: Click on any song in the list
• Edit Song: Click the edit icon (pencil)
• Delete Song: Click the delete icon (trash)
• Reorder: Use up/down arrows to change position
• Search: Type in the search bar to filter songs

Linked List Operations

• Remove First: Removes the first song (removeAtFront)
• Remove Last: Removes the last song (remove)
• Print List: Displays linked list structure in console format

🎨 Design Features

• Color Scheme: Purple (#8b5cf6) to Pink (#ec4899) gradients
• Glass Morphism: Translucent cards with backdrop blur
• Animations: Smooth transitions, hover effects, loading states
• Responsive Grid: Adapts from 5-column table to mobile cards
• Dark Theme: Space-themed gradient background

🔧 API Endpoints

Endpoint	Method	Description
/api/songs	GET	Fetch all songs
/api/songs	POST	Add new song
/api/songs/[id]	PUT	Update song
/api/songs/[id]	DELETE	Delete song
/api/stats	GET	Get playlist statistics
/api/db-status	GET	Check database connection

🧪 Data Structure Implementation

The PlaylistLinkedList class (lib/linkedList.ts) implements:

• Node-based structure with data and next pointers
• Core operations: insert, remove, search, print
• Helper methods: getSize, isEmpty, toArray
• Type-safe TypeScript implementation

🐛 Troubleshooting

Database not connecting?

• Ensure XAMPP MySQL is running
• Check credentials in lib/db.ts
• Verify database exists: SHOW DATABASES; in phpMyAdmin

Ports conflict?

• Change Next.js port: npm run dev -- -p 3001
• Change MySQL port in XAMPP config if needed

Build errors?

• Clear cache: rm -rf .next
• Reinstall dependencies: rm -rf node_modules && npm install

🙏 Acknowledgments

• Built with Next.js
• Icons by Lucide
• Inspired by modern music streaming platforms

---

⭐ Star this repo if you find it helpful!