• 

  welcome to the pineappl

Inspiration loading: In many educational institutions across my country, the reward for hard work is often negligible, which leads to a lack of motivation among lecturers and students alike. Lecturers sometimes fail to take their duties seriously, while students become complacent either due to ineffective teaching or the absence of proper monitoring and feedback.

This inspired me to build a system where both student and lecturer performance are tracked, evaluated, and visualized in real time. By implementing measurable metrics and progress tracking, the platform encourages accountability and promotes continuous improvement.

Just like in competitive games such as Call of Duty Mobile and Chess, where players push themselves to climb the leaderboard by improving their performance every season — this system takes a similar approach but applies it to the academic semester. Students and lecturers can now see clearly:

-What makes them perform better

-Where they stand

-What areas they need to improve

This gamified, data-driven approach aims to reinforce motivation, accountability, and excellence in the educational environment.

What it does: This platform is a comprehensive academic performance monitoring system designed to enhance transparency, accountability, and excellence in higher education for both students and lecturers.

Key Features

1. Real-Time Performance Tracking: Students and lecturers can view their academic or teaching performance metrics in real time, from GPA trends to attendance and course completion rates.

2. Role-Based Dashboards: Tailored dashboards for Students, Lecturers, and Admins provide relevant metrics and tools for each role:

-Students: GPA, course performance, attendance, assignment feedback, and progress tracking.

-Lecturers: Class averages, grade distributions, student reports, syllabus tracking, and feedback submission rates.

-Admins: Institution-wide analytics, department comparisons, staff activity, and performance summaries.

1. Course Scheduling & Academic Calendar: Admins and lecturers can create and manage detailed course schedules. Students view a unified calendar showing all current and upcoming classes.

2. Syllabus & Course Completion Checker: Students can check off completed topics, while lecturers get real-time updates on syllabus coverage and class delivery.

3. Historical & Semester-Based Reports: Every student has performance data saved from 100 level 1st semester up to the current level, displayed in a clean descending timeline.

4. Lecturer & Student Monitoring: Lecturers only see reports for students they teach. Admins have access to the entire institution’s records and semester history.

5. News, Announcements & Leaderboards: A dynamic feed of school updates, hall of fame listings for top-performing students and lecturers, and gamified leaderboards to motivate performance.

6. Intelligent Filtering & Management Tools: Smart filters auto-fit content, reflect real-time enrollment, and adapt based on level, semester, and department structure.

How I built it: The project was primarily built using Bolt.new

1. AI-Assisted Planning: I used ChatGPT to help generate the initial skeletal prompt that defined the structure, components, and features of the application. This helped me clarify the system’s core logic and ensured that all key roles (Student, Lecturer, Admin) were covered from the start.

2. Visual Guidance with Figma: To refine the user interface and layout, I consulted UI templates and design inspirations on Figma. This helped me visualize:

-Tab arrangements

-Dashboard component spacing

-Semantic groupings for performance metrics

-Overall user experience across roles

Challenges I ran into:

Building this project came with a number of significant challenges:

1. Unstable Power Supply

In my location, there's no constant electricity. On average, I only get about 2–3 hours of power per day, and on some days, there's no light at all. This drastically slowed down development progress and introduced a lot of frustration, especially during long or focused work sessions.

2. Limitations on Bolt

While Bolt.new is a powerful tool, it sometimes only resolves one issue out of several submitted, which leads to inefficiency. In many cases, this meant repeating the same requests or manually editing things Bolt failed to generate correctly. Sometimes the progress of one part is undone when a prompt to resolve another issue is submitted, repitition of already solved problems too.

3. High Token Consumption

Due to the complexity and size of the project, building and updating the interface often required large numbers of tokens. This made development more costly and resource-intensive, especially when iterations were needed for fine-tuning or troubleshooting.

Accomplishments that I'm proud of

One of the key accomplishments during this project was resolving a critical POST issue when integrating with Supabase. Initially, I struggled to get the correct response due to communication and request formatting issues. However, through careful debugging, referencing documentation, and persistent testing, I was able to identify and resolve the problem.

This breakthrough helped me better understand how Supabase handles API requests and gave me more confidence in handling backend-related issues within a no-code/low-code environment.

What I learned

1. The Power of Iteration Building this system taught me that no solution is perfect from the beginning. Each feature went through several iterations, and feedback (even from myself) was crucial to refining the design and logic.

2. Token Efficiency & Prompt Engineering I learned how to write better, more efficient prompts when working with AI tools like ChatGPT and Bolt. This helped reduce token waste and got me closer to the results I needed faster.

3. Working with Supabase Through trial and error, I developed a better understanding of Supabase, especially handling POST requests and how backend communication works in a no-code/low-code environment.

4. UI/UX Structure and Design Awareness Using Figma templates gave me more visual clarity on layout planning, user flows, and responsive structure. I started thinking more like a UI/UX designer.

5. Resilience in Harsh Conditions Limited electricity and slow progress tested my patience. This project taught me how to remain focused and manage my time even when external conditions were far from ideal.

6. Real-Time Performance Tracking Logic Designing features like real-time progress updates for students and lecturers gave me deeper insight into how performance tracking systems work in real-world applications.

What's next for Pineappl:

I know that this project can can be expanded further and improved on i hope to also get it tested with real time data from Universities, while Pineappl already provides real-time performance tracking and accountability for students and lecturers, there are several exciting directions to take the project further:

1. Expanded Leaderboards Introduce gamified elements such as weekly leaderboards for students based on quizzes, debates, entrepreneural activities and other in school competitions among students and lecturers to foster healthy competition and engagement.

2. Analytics-Based Recommendations Add AI-driven insights to recommend study resources for students or teaching adjustments for lecturers based on performance trends.

3. Mobile App Integration Proper extension of Pineappl’s functionality to mobile platforms for improved accessibility, allowing users to track performance on the go.

4. Push Notifications & Alerts Enable push alerts for missed deadlines, low attendance, or major academic milestones.

5. Institutional Customization Allow universities or departments to configure Pineappl to their unique academic calendars, grading systems, and faculty structures.

6. Feedback & Evaluation Tools Add anonymous feedback tools for students to evaluate lecturers and vice versa, with the goal of continuous improvement.

7. Role-Based Permissions Expansion Introduce more granular roles beyond Student, Lecturer, and Admin—for example, Faculty Heads, Academic Advisors, or External Reviewers.

Built With

• bolt
• chatgpt
• netlify
• react
• supabase