Genius Educational Academy

The Genius Educational Academy platform is a full-stack web system developed to manage and showcase the academy’s activities, results, gallery, and student feedback in a dynamic and organized way. The system consists of two main parts: a public-facing website where students, parents, and visitors can explore the academy’s information and media content, and a secure admin panel where administrators can manage all the website content without modifying code. Both applications are connected to a PostgreSQL database hosted on Neon and support media uploads using Vercel Blob Storage, allowing images and other media files to be stored and served efficiently.

The admin panel provides a secure interface with authentication that allows administrators to log in and manage the website’s dynamic content. A centralized upload API endpoint enables uploading media files to Vercel Blob and returns public URLs that are used across different modules such as activities, gallery, results, quick needs, and student feedback. The Activities Management module allows admins to create, edit, and delete activities and attach media such as uploaded images or YouTube video links. Activities and their media can be reordered using arrow controls, ensuring they appear in the correct sequence on the website.

The Gallery Management system enables administrators to upload images or add YouTube videos to the gallery, delete items, and reorder them to control how they appear to users. Similarly, the Results Management module allows the academy to highlight student achievements by uploading topper or result images, deleting specific images, and reordering them to prioritize important results. Another feature, Quick Needs Management, allows administrators to create promotional or informational highlights that include a tagline, image, or YouTube video. These items also support activation controls and scheduling based on stored dates so they can automatically appear or disappear when required.

The platform also includes a Student Feedback Management module, where administrators can add testimonials from students by entering the student’s name, feedback text, and optionally attaching an image or YouTube video. Feedback items can be reordered and deleted as needed, and this feature is integrated into the admin navigation for both desktop and mobile interfaces. The admin panel is designed to be mobile responsive, with a hamburger menu, side navigation drawer, and improved layout adjustments so administrators can manage content easily from mobile devices.

The public website dynamically fetches all data from the database through API endpoints and displays it across multiple pages. The Gallery page shows images and videos uploaded by administrators, while the Activities page displays academic or extracurricular activities along with their associated media in the defined order. The Results page highlights student achievements by displaying result images uploaded through the admin panel. Additionally, the platform includes a Students Feedback page, where each feedback item is presented with media on the left and the student’s name and testimonial text on the right, creating a structured and visually appealing layout.

The website is optimized for different screen sizes. Even on mobile devices, the feedback layout maintains a left-right structure while adjusting image sizing to maintain visual balance with longer feedback text. For long testimonials, the system improves readability by showing “View More / View Less” toggles on mobile and tablet devices, while the full feedback text is displayed directly on desktop screens. When feedback includes YouTube videos, a custom themed play button overlay is used to enhance the user experience. Clicking the video opens it in a large modal viewer with a close button and outside-click support, providing a clean and immersive viewing experience.

Overall, the Genius Educational Academy platform provides a fully dynamic content management system that allows administrators to easily manage media, activities, and testimonials while ensuring a smooth and engaging experience for website visitors. The system is built using Next.js, React, Tailwind CSS, Next.js API routes, PostgreSQL (Neon), and Vercel Blob Storage, and it is deployed on Vercel, ensuring scalability, performance, and ease of maintenance.