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:

https://sufyanism.com/

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:

https://zeba.academy

Coding resources:

https://code.zeba.academy

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 ❤️