DEV Community: Bleart Hyseni

✨ Final Thoughts on Building DareMe – My First Full React Native App

Bleart Hyseni — Sun, 22 Jun 2025 19:48:08 +0000

✨ Final Thoughts on Building DareMe – My First Full React Native App
After weeks of learning, coding, testing, and designing, I'm proud to share my completed project: DareMe – a mobile app where users can create, accept, and complete dares 🏆.

🧠 What is DareMe?
DareMe is a gamified social app built with React Native and Firebase, where users challenge each other with creative tasks. You can log in, create a dare, set a reward, and prove you completed it by uploading photo/video evidence. There's even a leaderboard to make it competitive!

🧩 Features:
📱 Beautiful entry animation with DareMe logo

🔐 Login & Sign Up (with email or Google)

🔄 Forgot Password flow via email

📝 Post Dare (with reward, criteria & category)

🎯 View & accept/decline challenges

🔔 Notifications system

📸 Upload proof (video or image)

🧑‍💼 User Profile + My Dares (Accepted/Declined)

💬 Comments system

☰ Hamburger menu for clean navigation

🏆 Leaderboard

🤝 Built in collaboration with my team via Google Meet

📹 See it in action:
👉 Watch the full video demo on YouTube
🔧 Tech Stack:
React Native (Expo)

Firebase (Auth, Firestore)

Cloudinary (for media uploads)

Google Sign-In

💬 What I learned:
Managing state in React Native

Working with Firebase Authentication

Structuring a full mobile app project

Animations, navigation, and UI best practices

Collaborating in a team remotely

🤝 Team Collaboration via Google Meet

Bleart Hyseni — Sun, 22 Jun 2025 19:37:14 +0000

The project was a true team effort — we collaborated daily through Google Meet calls. Regular meetings helped us coordinate tasks, solve problems quickly, and keep the momentum going. This experience reinforced the importance of communication and teamwork in software development. #TeamWork #Collaboration #RemoteWork

💬 Comments on a Dare

Bleart Hyseni — Sun, 22 Jun 2025 19:36:40 +0000

Adding comments to each dare allows users to communicate, motivate, and share feedback. Implementing this social feature was exciting — I set up realtime data syncing so comments appear instantly. It improved the community feel of DareMe and added a layer of interaction beyond just completing challenges. #Comments #Realtime #Community

✔️ My Accepted and Declined Dares

Bleart Hyseni — Sun, 22 Jun 2025 19:30:57 +0000

Users can track all the dares they have accepted and those they have declined, keeping their challenge history organized. Building this feature involved creating dynamic lists and managing state efficiently so the data updates in real-time. It also taught me how to handle edge cases, like re-accepting or revisiting old dares. #StateManagement #ReactNative #UserExperience

👤 My Profile Screen

Bleart Hyseni — Sun, 22 Jun 2025 19:29:52 +0000

The profile screen lets users view their personal info, stats, and activity history. I focused on presenting data in a clear and visually appealing way, while planning for future features like profile editing and avatar uploads. This screen personalizes the experience and encourages users to engage more with the app. #UserProfile #UI #AppDesign

📱 Hamburger Menu for Navigation

Bleart Hyseni — Sun, 22 Jun 2025 19:22:21 +0000

To keep the interface clean and navigation intuitive, I added a hamburger menu accessible from most screens. It allows users to easily jump to Profile, Leaderboard, Challenges, and other sections without cluttering the main UI. Designing this menu involved balancing accessibility with minimalism, especially on smaller mobile screens. #Navigation #UI #ReactNative

🔔 Notifications System

Bleart Hyseni — Sun, 22 Jun 2025 19:20:51 +0000

DareMe includes a notification system to keep users informed when they receive new dares, rewards, or comments. Implementing notifications involved setting up real-time listeners and push notifications to enhance user engagement. This feature was critical for keeping the app lively and making sure no dare gets missed. #Notifications #UserEngagement #Realtime

➕ Posting a New Dare

Bleart Hyseni — Sun, 22 Jun 2025 19:14:59 +0000

Creating a new dare is easy: users enter the dare description, set a reward, and define the criteria for success. They can also select a category to organize dares better (e.g., Fitness, Fun, Creativity). This screen challenged me to design forms that are flexible yet clear, and I integrated validation to prevent incomplete submissions. It was rewarding to see users create and share their own dares seamlessly. #CreateDare #Forms #ReactNative

🎯 Challenges Screen & Video Demo

Bleart Hyseni — Sun, 22 Jun 2025 19:13:31 +0000

https://youtu.be/dKCzeeQyUZg
The Challenges screen is the heart of DareMe. Users can view ongoing dares, accept or decline challenges, and track their progress. I recorded a demo video showcasing the entire flow — from browsing challenges to interacting with them — to give a full picture of the app’s capabilities. This video highlights the smooth animations, real-time updates, and engaging UX I aimed for. Check it out to see DareMe in action! #Challenges #DemoVideo #AppShowcase

📝 Sign Up Screen with Validations

Bleart Hyseni — Sun, 22 Jun 2025 18:55:34 +0000

The sign-up form requires full name, email, password, and password confirmation fields, alongside a checkbox for accepting Terms and Conditions. I worked hard on input validation to ensure passwords match and emails are valid, while keeping the process as simple as possible. Making users agree to terms was a good reminder about legal compliance, and designing this screen taught me a lot about balancing form complexity with usability. #Signup #Validation #UXDesign

🔄 Forgot Password Flow

Bleart Hyseni — Sun, 22 Jun 2025 18:55:06 +0000

I implemented a secure “Forgot Password” screen where users can input their email to receive password reset instructions. The flow allows users to safely reset their password either via a link sent to their email or by entering a new password directly in the app. This feature is essential for user trust and retention, and building it made me appreciate the importance of robust backend integration and email workflows. #PasswordReset #Security #UserExperience

🔐 Login Screen with Multiple Options

Bleart Hyseni — Sun, 22 Jun 2025 18:49:39 +0000

The login screen is clean and straightforward, offering users the ability to sign in with their email and password. It also includes helpful features like a “Forgot Password” link, a “Sign Up” button for new users, and even a “Sign Up with Google” option for faster authentication. Handling different authentication flows was a key challenge — I focused on making the UI intuitive and responsive for a smooth user experience. #Authentication #Login #ReactNative