Zeba Academy UI Challenge
A Flutter package for creating, managing, and displaying UI/UX design challenges.
Flutter Package ⢠GPL-3.0 License ⢠Version 1.0.0
Overview
Zeba Academy UI Challenge is a reusable Flutter package designed for learning platforms, UI/UX communities, coding academies, and design practice applications.
It provides ready-to-use components for creating interactive design challenge experiences.
Features
⨠Daily UI Challenges šØ Design Prompts š¼ Submission Gallery ā Ratings š¬ Feedback System š Progress Tracking
Features
Daily UI Challenges
Create structured daily UI tasks for learners.
Example:
UIChallenge(
id: "1",
title: "Login Screen",
description: "Create a modern login UI",
difficulty: "Easy",
day: 1,
);
Supports:
- Challenge title
- Description
- Difficulty level
- Day tracking
- Completion status
Design Prompts
Provide creative prompts to help learners practice UI design.
Example:
PromptCard(
prompt: "Design a modern finance dashboard",
);
Use cases:
- UI practice tasks
- Design exercises
- Creative challenges
Submission Gallery
Display learner design submissions.
Example:
SubmissionGallery(
submissions: submissions,
);
Includes:
- User name
- Submission image
- Description
- Submission date
Ratings
Allow users and mentors to rate submissions.
Example:
RatingWidget(
rating: 4.5,
);
Supports:
- Star ratings
- Review systems
- Community scoring
Feedback
Display mentor and community feedback.
Example:
FeedbackCard(
feedback: feedback,
);
Useful for:
- Design reviews
- Learning improvement
- Mentor feedback
Progress Tracking
Track learner challenge completion.
Example:
ProgressTracker(
completed: 10,
total: 30,
);
Shows:
- Completed challenges
- Total challenges
- Progress percentage
Installation
Add dependency:
dependencies:
zeba_academy_ui_challenge:
path: ../zeba_academy_ui_challenge
Run:
flutter pub get
Usage
Import package:
import 'package:zeba_academy_ui_challenge/zeba_academy_ui_challenge.dart';
Use:
MaterialApp(
home: ChallengeDashboard(),
);
Project Structure
lib/
āāā models/
ā āāā challenge_model.dart
ā āāā submission_model.dart
ā āāā rating_model.dart
ā āāā feedback_model.dart
āāā widgets/
ā āāā challenge_card.dart
ā āāā prompt_card.dart
ā āāā submission_gallery.dart
ā āāā rating_widget.dart
ā āāā feedback_card.dart
ā āāā progress_tracker.dart
āāā screens/
ā āāā challenge_dashboard.dart
āāā zeba_academy_ui_challenge.dart
Use Cases
Perfect for:
- Coding academies
- UI/UX courses
- Design communities
- Hackathon platforms
- Student portfolios
- Learning management systems
Roadmap
Future improvements:
- Challenge categories
- Leaderboard
- Achievement badges
- Animations
- Dark mode
- Firebase integration
- Offline support
- Cloud submissions
Contributing
Contributions are welcome.
Steps:
Create branch:
git checkout -b feature/new-feature
Commit:
git commit -m "Add new feature"
Push:
git push origin feature/new-feature
Create Pull Request.
About Me
⨠Iām Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.
Website:
LinkedIn:
https://www.linkedin.com/in/sufyanism
Zeba Academy
Your all-in-one learning hub!
š Explore courses and resources in coding, technology, and development.
Main platform:
Coding resources:
YouTube:
https://www.youtube.com/@zeba.academy
Instagram:
https://www.instagram.com/zeba.academy/
Thank you for visiting!
License
This project is licensed under the:
GNU General Public License v3.0
You are free to:
- Use this software
- Modify this software
- Share this software
Any distributed modifications must remain open-source under GPL-3.0.
Full license:
https://www.gnu.org/licenses/gpl-3.0.html
Support
If this package helps you, consider giving it a ā on GitHub.
Thank you for using Zeba Academy UI Challenge ā¤ļø