An application that helps pet owners find and enter dog competitions for both Android & iOS
·
Report Bug
·
Request Feature
- About the Project
- Getting Started
- Features and Functionality
- Concept Process
- Development Process
- Final Outcome
- Conclusion
- License
- Contact
- Acknowledgements
Topdog is an innovative competition app designed specifically for dog owners and enthusiasts. This user-friendly application allows individuals to discover and participate in various dog competitions, providing a platform for their beloved pets to showcase their skills and talents. Whether it's agility, obedience, conformation, or other dog-related activities, Topdog offers a comprehensive directory of events and competitions tailored to different breeds and disciplines.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
For development, the latest version of Android Studio is required. The latest version can be downloaded from Android Studio
- Clone the repo
git clone https://github.com/wiaandev/Topdog.git- Open the project
Locate and drag file into Visual studio code.
- Install Packages
npm install- Run Project
npm start- Download Expo Go on Android or iOS
5.1 You can also run the iOS simulator or Android emulator. NOTE: Android studio is required for the Android emulator
- For Android Emulator
expo run:android - For iOS simulator
expo run:ios 
Users can create their account by entering their information
The initial idea was that users can view competitions based on their phone location. But users can view locations that are open or closed.
Users can add their pets to the application by uploading a picture of them with their necessary credentials, like their weight, height and whether they are vaccinated as some competitions require to know the information.
Once tapping on a competition, users can view more information about the competition, like the requirements, the description, when it ends as well as the dogs that have entered as well.
Users that have signed up as judges to the application, would be able to judge the entries by adding a score from 1 - 100.
![image7][image7] Once the judges have entered the scores for all the pets, they can view the leaderboard of each competition
I am a very huge fan of dark theme applications and using colors that contrast extremely well, so in conclusion I thought it was a no-brainer to use in black, white and red in conjunction with each other to create the most eye-catching application. By looking at my wireframes you would notice that my answering method differs from the final application outcome. I have come to realise how intricate and dense Kotlin can be so decided to go with a more simpler, yet effective answering method.
The Development Process is the technical implementations and functionality done for the app.
For the entirety of the project, I have used Expo CLI and the entire project was built in JSX. For my front-end I have utilised React Native Elements, UI Toolkit for cross-platform development. All the UI elements seen on my application was built and implemented using React Native Elements
-
I installed my necessary fonts and created a fonts folder inside of my assets folder, where I then put my fonts. Next in my
App.jsI created auseFontshook which would load my fonts onto the application. -
Using a
<FlatList/>I was able to map my data from my Cloud Firestore database to my front-end. -
I used a
<SafeAreaView>to prevent my front-end from going above the screen and into the status bar.
- I have made use of a Stack and Tab Navigation during the development of my application.
- In my
App.jsI created my stack navigation with thecreateNativeStackNavigator()method. - I created a seperate
Stacksfolder where I then created aHomeTab.jsxfile where I then implemeted my Tab Navigation
- I created a
firebaseAuth.js,firebaseDb.js&firebaseStorage.jswhich held all the back-end functionality and API calls I made with my application. - In my
firebaseAuth.jsI handled all my data in regards with signing up and logging in a user and getting the currently logged in user. - In my
firebaseDb.jsI handled all my data in regards with the CRUD functionality of the application, like getting all the competitions, getting a single competition, getting the user's current pets, getting the leaderboard of a competition, adding a pet to a user profile and much more. - In my
firebaseStorage.jsI handled my image uploading functionality which made it possible for users to upload a picture of their pets to the database. - Using
createContext()anduseContext()hooks in conjunction with wrapping myAppwith a<Provider>element from React I was able to pass state down to any component and then just calling the firestore functions inside of the context files.
- A highlight of this project was definitely learning cross-platform development with React Native
- It was also a high point for me to load my app onto my mobile device and interacting with it
- Fixing all of the bugs I struggled with was also a big plus for me
- Seeing the data being pulled from my Cloud Firestore as well as images from my storage bucket.
- Fixing my context. I had to re-load to re-save my context file and the current file of the screen that I am on in order for the context to re-render and display my data. I unfortunately, could not get it fixed in time.
- Adding onboarding screens
- Fixing my context bugs
- Adding animations
- Adding proper validation to all my screens
- Adding a map to visualise where the competitions are being held.
- Adding user profile pictures and adding more information on the user profile screen
- Adding badges if a dog has won a competition
- Adding voting functionality.
- Wiaan Duvenhage - Github
Distributed under the MIT License. See LICENSE for more information.\
- Wiaan Duvenhage - wiaanduvenhage.dev@gmail.com - @wiaan.dev
- Project Link - https://github.com/wiaandev/Topdog