huss3n/practiceui

This repository contains a collection of popular app UIs built using SwiftUI. The purpose of this project is to practice and perfect SwiftUI skills by recreating the user interfaces of well-known apps.

Practice UI

Popular Apps UI Showcase using SwiftUI

This repository contains a collection of popular app UIs built using SwiftUI. The purpose of this project is to practice and perfect SwiftUI skills by recreating the user interfaces of well-known apps.

Completed Apps:

Spotify

• A replica of the Spotify app interface, showcasing various UI components and interactions commonly found in music streaming applications.
• Data is fetched from DummyJSON to use as placeholder content during development and prototyping.

Features:

• Dynamic Content: Utilize DummyJSON to generate mock data for realistic UI representation.
• Reusable Components: Implement SwiftUI components in a modular manner to ensure reusability and maintainability.
• Interactive UI: Emphasize user interactions through animations and gestures to enhance the user experience.

Future Plans:

• Expand the collection by adding more popular apps UIs.
• Integrate real data sources to create fully functional prototypes.
• Optimize code structure and architecture for scalability.

Getting Started:

1. Clone the repository

   https://github.com/Huss3n/PracticeUI/tree/main/PracticeUI
   

2. Navigate to the project directory:

   cd PracticeUI
   

3. Run the project in Xcode:

practiceui's Issues

Add stretchy header

Modify the header in the Playlist View to have a stretchy animation like event when pulled down

Move scoll view and hstack to a sub view

Move the scroll view and header view to a private func some view as demonstrated below

private func header: some View {
  HStack(spacing: 16) {
                ZStack {
                    if let currentUser {
                        ImageLoader(url: currentUser.image)
                            .background(.spotifyWhite)
                            .clipShape(Circle())
                            .onTapGesture {
                                
                            }
                    }
                }
                .frame(width: 35, height: 35)
                
                ScrollView(.horizontal) {
                    HStack(spacing: 8) {
                        ForEach(Category.allCases, id: \.self) { category in
                            SpotifyCategoryCell(
                                title: category.rawValue.capitalized,
                                isSelected: category == selectedCategory
                            )
                            .onTapGesture {
                                selectedCategory = category
                            }
                        }
                    }
                    .padding(.horizontal, 16)
                }
                .scrollIndicators(.hidden)
            }
}

Mock data

Use this mock data for the product view in the cell.

Update product model with this:

// MARK: - Product
struct Product: Codable, Identifiable {
    let id: Int
    let title, description: String
    let price: Int
    let discountPercentage, rating: Double
    let stock: Int
    let brand, category: String
    let thumbnail: String
    let images: [String]
    
    var firstImage: String {
        images.first ?? Constants.url
    }
    
    static var mock: Product {
        Product(
            id: 124,
            title: "Mock Product",
            description: "This is a mock product",
            price: 100,
            discountPercentage: 20,
            rating: 4.5,
            stock: 400,
            brand: "Apple",
            category: "Laptops",
            thumbnail: "thumbnail image",
            images: ["image1", "image2", "image3"]
        )
    }
}

Lazy Loading

Fix the loading of the scroll view using a lazyHstack to limit the number of rows and optimize the application.

Add clickable Rows

Add as button on the row components from the swiftUI package.