SLC S23W3 - Real-Time Accessibility Feedback App – Issue Tracking, Admin Dashboard & Comment System
Hello everyone!
I warmly welcome you to the third week of the Steemit Learning Challenge and especially I invite you in the Technology and Development Club where you can share and learn tech.
I am working on a real-time accessibility feedback application. Last week we developed the issue submission page by using Cloudinary, OpenStreetMap, and Firebase. I made the complete design of the screen while allowing the user to choose the current location or search in the map. And in the first week we developed login and sign up screens with splash screen. I setup the complete user authentication of the application for the login and sign up using firebase. Today I will continue to develop the next big part of this application.
The major focus of this application is on the issue reporting and tracking. Today I will build the major functionality to track the reports submitted by the user as well as tracking for the reports by the admin dashboard. The user tracking reports page will have following attributes:
- Title
- List of the reports
- Issue title
- Image
- Status of issue
 |  |
|---|
I have built this reports or issues tracking page with the consistency of the UI design with the previous screens. I have used gradient colours as I have used in the previous screens. In the above picture you can see the simple layout and interface of the reports tracking screen. The left side image shows the image with no reports submitted yet and on the right side the page shows the submitted issue. Currently the relevant student has only submitted one issue if the student with the same id submits more issues then they will appear in this screen in a list.
This is the firebase logic to fetch the details of the submitted issue. First of all in this screen I have created the instance of the firebase. Then I am accessing the issue from the firebase from the collections of the issues by accessing the specific issue based on the logged in user.
It checks if the collection of issues does not have data then it returns no reports found and if there is data then it returns the issues submitted by the user based on the id.
Similarly there will a page dedicated to the admin to have all the reports. It will have the following attributes:
- Title
- List of the issues
- Issue title
- Issue status
- View details function
- Status update function
 |  |
|---|
This is the admin dashboard where the admin can see all the submitted issues by the students or the users. The admin have the ability to update the status of the issue. Moreover the admin can view the details of the issue by clicking on the view details. For the ease of the admin to see the picture more keenly I have enabled clicking and zooming to the picture of the issue. The admin can click on the image to see it separately and the admin can also zoom it.
Another important feature for the facility of the admin is to update the status. The admin can update the status of the issue to inform the user that the team is working for the solution of the issue. The updated status is shown to the student or user as well.
This is the functionality for updating the status of the issue. I have used AlertDialog widget which aids to admin to update the status easily on the screen without opening any other screen. The admin can update the status of the issue through this AlertDialog and after the updation the alert pop up will be closed. After getting value for the updated status of the issue the previous status of the issue is updated with the news status on the screen and it is updated in the firebase as well.
Here you can see I have logged in as an admin and I have updated the status of the issue from open to in progress. So the issue updating functionality is working correctly.
Here you can see I have logged in as a student and I can see the updated the status of the issue from open to in progress. In this way the student can get the information that the administration is working on their issue.
Then there is a shared page which is shared by both admin and the user. This is the issue details page with the following attributes:
- Complete details of the issue
- Title
- Description
- Image
- Issue Status
- Comment option with user role tag
This is the complete interface of the issue details page which includes all the details of the issue submitted by the user along with the feature to make comments with the role tag. I will try to explain the code of adding comment here in this screen because the remaining things are the same as I explained previously.
This function to add comment to the page checks if the comment input field is empty or not. If the input field to add the comment is not empty then it creates the firebase instance of the logged in user and accepts the value of the comment. This function adds the comment to the relevant issue on the basis of the IssueId with the comment text, author of the comment and time of the comment. After adding the comment to the firebase it shows the comment on the user interface and clears the input field.
 |  |
|---|---|
Comment added by the user as a student role. | Comment added by the administration as an admin role. |
This is comment section works like a chat where the student can add comment regarding the issue as well as the admin can add comment to the issue. This is aids the issue tracking and reporting more suitable and efficient.
These are the two documents with unique IDs which are saving the comments with respect to the role of the author.
This is how the data is stored in the firebase database under the issues collection. The addition of the comment creates a new collection document comments and then it adds the comment using a unique id on the basis of the role of the commentator. In this way all the data of the comments along with the issue is stored in the firebase database.
S by continuing my previous project I have built 3 more screens with smooth working where the user who has submitted the issue can see the progress of the issue and the admin can see all the submitted reports and the admin can update the status of the issue and it can also interact with the user via the comment section under the issue.
I am working on this project and It will have a lot of more features but so far I have shared the login and sign up screens with complete user authentication in week 1, issue page and location picker screens with their user interface as well as with the Firebase Authentication, Cloudinary Storage and Firestore Database in week 2 and in this current week I have designed reports tracking page, admin dashboard, issue details page with comment section and made all the pages working.
GitHub Repository
In this GitHub repository I have shared login_screen.dart, signup_screen.dart, splash_screen.dart, issue_page.dart, and location_picker_page.dart and other screens for the learning purpose only and as I will progress I will share the other files as well.
What I have learnt
I have learnt these things while working on the project:
Firebase authentication and Firestore integration
Handling user inputs and validation
State management in Flutter while managing the user session and controlling the user inputs through controllers.
Enhanced user experience and UI design with the implementation of the multi-step sign up process. The use of the gradient in the layout to make it look more attractive.
Error handling and debugging. I managed the error handling of the duplicate accounts, invalid credentials and empty fields.
Image uploading and accessing it via Cloudinary.
Storing the data in firestore database.
Implementation of
OpenStreetMapand Nominatim API.Tracking of the reports.
Handling comment section on the basis of the user
role.
What can you share in the club?
Our club is all about technology and development including:
- Web & Mobile Development
- AI & Machine Learning
- DevOps & Cloud Technologies
- Blockchain & Decentralized Applications
- Open-source Contributions
- Graphic Design & UI/UX
Any posts related to technology, reviews, information, tips, and practical experience must include original pictures, real-life reviews of the product, the changes it has brought to you, and a demonstration of practical experience
The club is open to everyone. Even if you're not interested in development, you can still share ideas for projects, and maybe someone will take the initiative to work on them and collaborate with you. Don’t worry if you don’t have much IT knowledge , just share your great ideas with us and provide feedback on the development projects. For example, if I create an extension, you can give your feedback as a user, test the specific project, and that will make you an important part of our club. We encourage people to talk and share posts and ideas related to Steemit.
For more information about the #techclub you can go through A New Era of Learning on Steemit: Join the Technology and Development Club. It has all the details about posting in the #techclub and if you have any doubts or needs clarification you can ask.
Our Club Rules
To ensure a fair and valuable experience, we have a few rules:
- No AI generated content. We want real human creativity and effort.
- Respect each other. This is a learning and collaborative space.
- No simple open source projects. If you submit an open source project, ensure you add significant modifications or improvements and share the source of the open source.
- Project code must be hosted in a Git repository (GitHub/GitLab preferred). If privacy is a concern, provide limited access to our mentors.
- Any post in our club that is published with the main tag #techclub please mention the mentors @kafio @mohammadfaisal @alejos7ven
- Use the tag #techclub, #techclub-s23w3, #country, other specific tags relevant to your post.
- In this first week's #techclub you can participate from Monday, March 03, 2025, 00:00 UTC to Sunday, March 09, 2025, 23:59 UTC.
- Post the link to your entry in the comments section of this contest post. (Must)
- Invite at least 3 friends to participate.
- Try to leave valuable feedback on other people's entries.
- Share your post on Twitter and drop the link as a comment on your post.
Each post will be reviewed according to the working schedule as a major review which will have all the information about the post such as AI, Plagiarism, Creativity, Originality and suggestions for the improvements.
Other team members will also try to provide their suggestions just like a simple user but the major review will be one which will have all the details.
Rewards System
Sc01 and Sc02 will be visiting the posts of the users and participating teaching teams and learning clubs and upvoting outstanding content. Upvote is not guaranteed for all articles. Kindly take note.
Each week we will select Top 4 posts which has outperformed from others while maintaining the quality of their entry, interaction with other users, unique ideas, and creativity. These top 4 posts will receive additional winning rewards from SC01/SC02.
Note: If we find any valuable and outstanding comment than the post then we can select that comment as well instead of the post.
Technology and Development Club Team
