This repo contains a collection of SwiftUI projects I've made!
A Pokemon Pokedex that fetches data from a CSV file to display a list of 720+ Pokemons. Each Pokemon has its own profile that shows their types, stats, and an image.
ContentView: a List is used inside a NavigationView, where each NavigationLink links to a PokemonDetailView of the titled Pokemon. The colored type tags are reusable PokemonTypeViews that are also used in PokemonDetailView. The pokedex array of Pokemon passed in is from the loadCSVData() function in CSVManager (called in PokedexApp). Added a search bar: used a @State searchText property to pass in .searchable(), keeping track of what the user inputs. If a Pokemon's name contains the characters they input, it gets added to a new filteredPokemon computed array of Pokemon objects that return the list of Pokemon shown when searched.
PokemonTypeView: small colored tags that show the Pokemon's type. The Pokemon's type as a string is passed in --> this is used for 1) the text and 2) the different colored backgrounds, which match the appropriately-named colors in Assets (eg. .background(Color(pokemonType))).
PokemonDetailView: view that shows up when a Pokemon in the list is clicked. It displays the Pokemon's properties through HStacks/VStacks in the appropriate Sections.
PokemonImageView: called in PokemonDetailView to display the Pokemon's image. Important fetchImage() used to fetch the image from PokeAPI (only the image URLs they provide are used, didn't get the JSON data back and decode it). It uses a URLSession where the data is passed into a UIImage.
pokemon.csv: contains list of 720+ Pokemons. First 3 lines:
#,Name,Type 1,Type 2,Total,HP,Attack,Defense,Sp. Atk,Sp. Def,Speed,Generation,Legendary
1,Bulbasaur,Grass,Poison,318,45,49,49,65,65,45,1,False
2,Ivysaur,Grass,Poison,405,60,62,63,80,80,60,1,False
Pokemon: the Pokemon object struct, conforming to Identifiable protocol. A Pokemon is an array of Strings, with each String representing 1 attribute (eg. Pokemon = one row in the CSV).
CSVManager: the function loadCSVData() returns an array of Pokemon objects (eg. [["Bulbasaur", "1"], ["Charmander", "2"], ["Squirtle", "3"]]). It takes the file path of the CSV file, turns its content into one giant string, cleans up the rows, separates data into an array of rows (strings), separates each row so each of its properties are a string, then creates a Pokemon and adds it to the array that'll be returned.
- I originally used
Data(contentsOf: )but that was synchronous URL loading of the images, which can crash the app / lead to UI unresponsiveness - Where I learned to add the images: Stack Overflow
- Tutorial I followed: Oliver Baumeister
Weather App that uses CoreLocation to fetch a user's location and the OpenWeather API to fetch the live weather data. Background changes depending on the weather!
Hacker News uses the HN Algolia API (hn.algolia.com/api) to fetch a list of front-page articles on Hacker News. The results are returned in a list ordered by the number of points they received.
ContentView: creates an instance of NetworkManager() for fetching API data. At .onAppear, fetchData() is called. The body view uses a NavigationView to go back/forth from article links. Each row in the List is a NavigationLink with a destination set to a DetailView, and text showing the points + article title.
DetailView: the view that pops up when someone clicks an article title. It shows the WebView by instantiating WebView(urlString: url) and passing in the article's URL.
WebView: conforms to UIViewRepresentable protocol in order to use WKWebView. The protocol requires 1) makeUIView which makes the WebKit WebView and turns it to a SwiftUI-compatible WebView, and 2) updateUIView which updates the view with new info from SwiftUI.
NetworkManager: conforms to ObservableObject since UI properties in ContentView are dependent on posts from this class. fetchData() function creates URL() and URLSession() instances, and makes async network request with dataTask() to fetch the API data. JSON data is then decoded and posts is updated with retrieved data.
PostData: a Results struct that imitates the JSON data from the API. Conforms to Decodable since we want to go from JSON --> struct. Results holds a single property hits, an array of Post objects that defines the properties of an article (eg. points, title, etc.).
The frontend of a ecommerce sweater store.
Matching cards memory game.
Simple digital business card app that displays 3 contact info buttons. Created a ButtonLinkView struct for the contact info buttons to improve code reusability.
