shubham0812/habittracker_ui

Habits and Goal Tracker application using the SwiftUI Framework

Hi there 👋🏻

I'm an extremely passionate iOS Developer

About Me 😁

• 📱 iOS Developer / Freelancer

• ✨ UI / UX Enthusiast

• 📖 Open-Source Contributor

• 💻 One line of code at a time

• ♥️ Exploring new places

• ✍🏻 I write blogs on iOS development in Medium

• 💁🏻I share Insights, Apps, and Tips on iOS development in my Instagram.

Reach me via 👇🏻

habittracker_ui's Issues

Create a Progress Stepper VIew

Requirement

Create a Progress Stepper View, that progress as the user goes through the input Views.

You need to create a UI that starts from the initial state, and you have to increase the step based on user Input.

Proposed Solution

• Create an Observable Object that contains the number of steps and the current step.
• Create Views and pass the Observable Object to it.
• The Stepper view should take the number of steps from the Observable object class and populate the steps.

Bonus Points

• Add animations to the color and style change of the steps as it progress.
• You can create simple next and previous buttons that increases the current step.

Create onboarding views

Requirements

The onboarding flow exists on Figma, the UI will need to be created for this at a later stage. However, before the UI can be created the contributor should create three new views.

The contributor will not need to style the views. But, rather set up the views so that content and additional elements can be added.

The UI consists of three views:

• Welcome onboarding view - this consists of information regarding the app
• Configure notification onboarding View - allows user to set up notifications
• Goal setting onboarding View - lets a user create a new goal

The functionality of the onboarding such as notifications and creating a new goal will be added once the UI has been created.

Solution

Please use the Figma file to create the onboarding views using SwiftUI.

Requirements

• Onboarding view could contain three-tab views for the user to scroll through
• Create two binding properties for the tab selection and whether to show the onboarding

Project not participating in Hacktoberfest

hacktoberfest label missing from the project

Create Custom Image View

Requirement

We need an Image View struct that takes in an image, is scalable based on the frame provided by the Parent View.
Display a circular image with a border around the image.

Proposed solution

Create a generic Image View Struct under Code > Support Views.

Add variables that takes in an imageName, lineWidth and borderColor.

The View that you should create should look something similar to this-

Once you're done raise a PR. Good luck :)

Create a Color Palette

Requirement

Create a Color Palette struct/enum that returns the color based on the type provided. The Type should take the current theme of user device into consideration.

Proposed Solution

Create a struct/enum name ColorPalette inside utils and define the colors for

• Primary -

  Light Theme - #6237FF | Dark Theme - #6971D3

• Secondary-

  Light Theme - #F86C28 | Dark Theme - #FFBA8F

• Accent -

  Light Theme - #1FB9FC | Dark Theme - #50C7F3

• Warning -

  Light Theme - #F7456D | Dark Theme - #D79AB8

• Background -

  Light Theme - #ffffff | Dark Theme - 000000

Make sure that you take the device's theme in consideration, so you'll need to check the value of the ColorScheme variable.

Alternate Solution

You can also define named colors in the Assets folder, give Light and Dark appearance and then wrap it in an enum or struct.

Add onboarding images to project

Requirements

The onboarding flow exists on Figma, the UI will need to be created for this. In order for someone to create the onboarding UI, the two images will need to be added to the project.

Solution

Please use the Figma file to export the image. The contributor will need image editing software to crop the images based on the design files.

Project is not building - Command PhaseScriptExecution failed with a nonzero exit code

Bug Description
After forking the project and cloning, I am creating a branch. And then it's not building and throwing an error : "Command PhaseScriptExecution failed with a nonzero exit code". The same error is throwing after just cloning the main project without forking it.

Things I have tried

• I did cleaned build
• I did restart the mac
• I re-forked and re-cloned, but still

Mac :- Big Sur 11.4 - Non-M1
Xcode :- 13

I don't think it's only happening on my device??

Create a Contributors.md file

Requirements

Add a new markdown (.md) file to the documentation folder that lists all contributors within the project. Consider the optimum style, ideally, the page should contain:

• Information about the project
• List the user's name (linking to their Github - use placeholders for now)
• Contain information about how users can get involved in the project

An existing template exists for this, though a table might be better suited.

Contributor	Position	Social links
Name one	✨	Twitter Instagram
Name two	📖	Twitter
Name three	💻	Twitter Instagram

Solution

1. Create file
2. Create sections
3. Populate sections

Architecture.md documentation file

Is your feature request related to a problem? Please describe.
Documentation is required to provide contributors with additional details surrounding the app. An architecture.md file is required to have all the necessary details.

You can find the Architecture file here - https://github.com/Shubham0812/HabitTracker_UI/blob/main/docs/Architecture.md

It has half of the basic information, you have to complete the rest.

Describe the solution you'd like
Here are some highlights worth covering:

• MVVM design pattern
• Any other logic worth highlighting

The file should be used as a reference point to new developers joining the project.

Describe alternatives you've considered
The contributor will need to go through the current Xcode file and take note of the structure. Where possible please use screenshots or diagrams. The contributor should understand how MVVM works, but also be able to explain it.

Update contributing.md

Requirements

The current contributing.md file is only half completed.

The Code Structuring section needs to be populated.

Solution

Download the project and review the file structure. Afterward, populate the following sections within Coding Structuring using best practices:

1. Constants & Extensions
2. Comments (functional & explanatory)

You can leave out the code styling section - as I will tackle this at a later stage. Please use code examples where necessary.

Create onboarding button

Requirement

The onboarding UI contains a button. The button is square and has an outer ring to inform users of how far they are within the onboarding flow. This button will need to be created as a reusable view so that it can be used across all three onboarding views.

Please refer to the Figma file for additional details.

Proposed Solution

SwiftUI does not contain a built-in square. Nonetheless, a rounded rectangle could be used instead and the frame height and width could be modified.

• Create shape using a ZStack
• Create three rectangles - middle, and two outer
• The Second rectangle should be gray
• The third rectangle should be black
• Create two variables of type CGFloat for the position from and to - these will be used to update the black outer ring
• Add system image for the Chevron - which can be found in SFSymbols titled chevron.right

Create Haptic feedback class

Is your feature request related to a problem? Please describe.
Haptics engages people’s sense of touch to enhance the experience of interacting with onscreen interfaces. This provides feedback when a user taps on a button or an action has been successfully completed.

Describe the solution you'd like
Create a class to handle haptic feedback, a singleton object can be used. This will be later used across the app.

A few cases worth handling:

• Heavy
• Light
• Medium
• Rigid
• Error
• Success
• Warning

Please test this, a follow-up issue will be to add feedback to various buttons and actions - though this has not been scoped.

Additional context

• Haptic feedback

Create onboarding UI

This issue is blocked by #8 #3.
There is an outstanding issue #9 for the onboarding button - though a placeholder button can be used

Requirements

The UI will need to be created for the onboarding views. This will involve using the Figma design files to layout the images, text, and buttons.

The UI consists of three views:

• Welcome onboarding view - this consists of information regarding the app
• Configure notification onboarding View - allows user to set up notifications
• Goal setting onboarding View - lets a user create a new goal

The functionality of the onboarding such as notifications and creating new goals/habits will be added once the UI has been completed.

Solution

• Welcome onboarding view - image, text & button
• Configure notification onboarding View - image, text & buttons
• Goal setting onboarding View - image, grid, buttons & text

Consider using adaptive columns - https://www.hackingwithswift.com/quick-start/swiftui/how-to-position-views-in-a-grid-using-lazyvgrid-and-lazyhgrid