Forem: Walid Adebayo

Nexus Digital: A Stunning Intranet Homepage Built with React, Tailwind, and TypeScript

Walid Adebayo — Sun, 20 Jul 2025 11:32:21 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

For this challenge, I created Nexus Digital Intranet, a modern interactive homepage designed to serve as a central hub for any team or organization. My goal was to build a vibrant and engaging interface that boosts productivity, celebrates team culture, and makes internal tools easily accessible.

The layout includes:

A dynamic hero section with a typewriter animation and background effects to grab attention immediately.
An Upcoming Events carousel to keep everyone informed.
A Team Spotlight to celebrate team members and foster connection.
A Quick Access area for important tools/resources.
A News & Announcements section with interactive cards.
A Productivity Snapshot using real-time data charts.
A responsive Contact Form with smooth animations.

This intranet is fully responsive, theme-toggle ready (dark/light), and adaptable for any modern workplace.

Demo

🔗 Live Website: nexus-digital-henna.vercel.app
💻 GitHub Repository: github.com/Walidadebayo/nexus-digital

Screenshots

Hero Section

Upcoming Events

Team Spotlight

Productivity Snapshot

Journey

This was a solo build and an exciting chance to explore how thoughtful design and interactivity can improve internal communication and morale.

Key things I learned and enjoyed:

Framer Motion + GSAP: I used both to layer animations, making the UI feel polished and intuitive.
TypeScript with React: Ensured type safety and structure in managing component logic.
Chart.js: Great for the live productivity snapshot feature showing how data can be visually compelling.
Component Composition: I leaned on modular components for scalability and easy maintenance.
Design Thinking: I considered user roles - employees, HR, team leads and what matters most to them when they log into a company intranet.

I’m especially proud of the cohesive visual style, smooth scroll effects, and how all sections contribute to a holistic digital workplace experience.

Thanks again to DEV and Axero for the opportunity.

Made with ❤️ for the Nexus Digital team and the Dev community.

DEV Username: @Walidadebayo

MedRecord – Secure Medical Records with Fine-Grained Access Control

Walid Adebayo — Sun, 04 May 2025 20:52:24 +0000

This is a submission for the Permit.io Authorization Challenge: Permissions Redefined

What We Built

MedRecord is a modern, privacy-first medical records management system that empowers doctors and patients with secure access to health data while giving administrators full oversight. We tackled the problem of data access control in healthcare - ensuring that only authorised users can read, update, or manage sensitive medical records.

With Permit.io, we implemented Attribute-Based Access Control (ABAC) and Role-Based Access Control (RBAC), allowing

Admins to manage the entire system
Doctors can view all records but update only their assigned patients
Patients to view only their personal records

By decoupling permissions logic from our codebase, we built a scalable and maintainable system that’s easy to audit and extend.

Demo

🔗 Live Demo: Live Demo https://medrecord.vercel.app

Project Repo

🔗 GitHub – Walidadebayo/medrecord

Walidadebayo / medrecord

A full-stack medical records management application built with Next.js, MongoDB, and Permit.io for role-based access control.

Medical Records Management Application

A full-stack medical records management application built with Next.js, MongoDB, and Permit.io for role-based access control.

Features

Role-Based Access Control: Admin, doctor, and patient roles with different permissions
MongoDB Integration: Persistent data storage with MongoDB
File Uploads: Upload and manage medical documents using Vercel Blob
Advanced Search: Filter records by date, doctor, patient, and more
Responsive Design: Works on desktop and mobile devices
Modern UI: Clean interface with gradient styling

Setup Instructions

Prerequisites

Node.js 18+ and npm
MongoDB database (local or Atlas)
Vercel account (for Blob storage)
Permit.io account

Environment Variables

Create a .env.local file in the root directory with the following variables:

# MongoDB
MONGODB_URI=your_mongodb_connection_string

# Authentication
JWT_SECRET=your_jwt_secret_key

# Permit.io
PERMIT_API_KEY=your_permit_api_key

# Vercel Blob
BLOB_READ_WRITE_TOKEN=your_vercel_blob_token

Installation

Clone the repository
Install dependencies:

npm install

Run the development server:

npm run dev

Open http://localhost:2500 in your browser

Testing Different Roles

The…

View on GitHub

Tech Stack: Next.js, TailwindCSS, MongoDB (Mongoose), Permit.io, Docker, Render, Vercel Blob (for files storage)

Login

Create Record

Dashbaord

Record Details

Viewing Record Attachments

Edit Record

Our Journey

This project was built by a small but dedicated team of developers: @walidadebayo (frontend/backend), @volde (frontend/backend). Our main challenge was integrating Permit.io’s PDP (Policy Decision Point) in a production-like environment.

Challenges We Faced

PDP Hosting: Initially, we ran Permit’s PDP locally, but this didn’t scale. We learned how to containerise it using Docker and deploy it to Render.
Error 422 from Permit: We encountered recurring authorization errors from Permit (especially code 422) due to missing resources and users. We resolved this by programmatically registering all users, resources, and attributes during app setup.
Fine-Grained ABAC Logic: We built a fallback RBAC+ABAC function in Node.js to complement Permit’s decisions when no matching usersets were found.

Key Learnings

How to containerise a Node-less PDP using only Permit’s Docker image
How to define and manage resource types, actions, roles, and relations in Permit
How to write and test policies for both RBAC and ABAC scenarios
How to log and debug authorization failures using Permit’s SDK and API responses

Using Permit.io for Authorization

Here’s how we integrated Permit.io into MedRecord:

User Provisioning: Upon signup, users are registered in Permit with attributes like role, name, and email. Roles like doctor, patient, and admin are assigned using Permit’s SDK.

    await permit.api.createUser({
      key: user.id.toString(),
      email: user.email,
      first_name: user.name.split(" ")[0],
      last_name: user.name.split(" ").slice(1).join(" "),
      attributes: {
        role,
      },
      role_assignments: [
        {
          role: user.role,
          resource_instance: "medical_record",
          tenant: "default",
        },
      ],
    });

Resource Registration: When a new medical record is created, it is registered as a Permit resource instance with attributes like doctor_name and patient_name, so ABAC policies can reference them.

const resourceDefinition = {
  key: "medical_record",
  name: "Medical Record",
  description: "A patient’s medical record",
  actions: {
    read: { name: "Read", description: "Read the record" },
    update: { name: "Update", description: "Update the record" },
    delete: { name: "Delete", description: "Delete the record" },
    create: { name: "Create", description: "Create a new record" },
  },
  attributes: {
    doctor_id: { type: "string", description: "ID of the assigned doctor" },
    patient_id: { type: "string", description: "ID of the patient" },
  },
  roles: {
    admin: {
      permissions: ["read", "update", "delete", "create"],
    },
    doctor: {
      permissions: ["read", "update"],
    },
    patient: {
      permissions: ["read"],
    },
  },
};

const response = await permit.api.createResource(resourceDefinition);

 await permit.api.resourceInstances.create({
          key: record._id.toString(),
          resource: "medical_record",
          attributes: {
            patient_name: record.patient_name,
            doctor_name: record.doctor_name,
          },
        });

Authorization Check:
- Before showing or updating a record, we make a call to permit.check(...)
- If Permit allows, access proceeds.
- If no userset matches (e.g., newly created users), we fall back to a local RBAC+ABAC check to prevent access while still showing meaningful logs.
Policy Hosting: The PDP is containerised via Docker and deployed to Render, exposing it via a secure endpoint that our app uses.

// Example Permit Check
const allowed = await permit.check({
  user: currentUserId,
  action: "update",
  resource: {
    type: "medical_record",
    key: recordId,
    attributes: {
      doctor_name: "Dr. Sarah Johnson",
      patient_name: "Emily Davis"
    }
  },
})

Permit’s CLI and dashboard helped us manage roles, write policies, and test everything without needing a custom permission system.

Team Members

This project was built by a team of two:

Walid Adebayo - @walidadebayo
Edun Yusuf - @volde

We truly enjoyed building this project and learned a lot about modern access control systems. Thanks to the Permit.io team for providing powerful tools and excellent documentation!

RoboRush is an engaging browser-based arcade game with AI Assist and Boost Mode

Walid Adebayo — Sun, 27 Apr 2025 16:41:08 +0000

This is a submission for the Alibaba Cloud Challenge: Build a Web Game.

🚀 What I Built

RoboRush is a fast-paced, robot-themed browser arcade game where players navigate a robot through a futuristic maze, collect energy orbs, and avoid rotating hazards - all while racing against the clock.

The game features an AI Assist Mode, Speed Boost, Overdrive Combo Mode, global Leaderboards, and full Offline Play support.

Players can experience smooth gameplay across desktop and mobile, with intuitive controls and dynamic strategy through special abilities.

Built with Next.js, Phaser.js, TailwindCSS, TypeScript, MySQL, and MappifySQL (ORM)

🎮 Demo

Live Game: Play RoboRush

GitHub Source: View RoboRush Repository

📷 Screenshots

📽️ Gameplay Videos

🖥️ Desktop Gameplay

📱 Mobile Gameplay

☁️ Alibaba Cloud Services Implementation

While I fully planned to deploy RoboRush using Alibaba Cloud services, I encountered verification challenges and could not complete the deployment before the submission deadline.

Here’s a full breakdown of my planned Alibaba Cloud integration:

Elastic Compute Service (ECS)

Why use it?

ECS would host the Dockerized Next.js app inside a scalable, secure containerized environment.

Integration Plan:

Package RoboRush using Docker.
Deploy the container to an ECS instance.
Enable auto-scaling and backup scheduling for server robustness.

ApsaraDB for RDS (MySQL)

Why use it?

ApsaraDB would provide high-availability, secure, and maintenance-free management of player data (scores, names, attempts).

Integration Plan:

Store leaderboard scores, player attempts, and historical game data.
Optimize query performance for leaderboard fetching.

Object Storage Service (OSS)

Why use it?

OSS would serve static game assets (sprites, background music, sounds) globally with efficient delivery.

Integration Plan:

Upload assets like robot images, orbs, sounds, and icons.
Reference OSS URLs inside RoboRush frontend instead of bundling heavy files.

Content Delivery Network (CDN)

Why use it?

CDN would cache and deliver static assets closer to players worldwide, improving game loading speeds and reducing latency.

Integration Plan:

Distribute OSS-hosted assets globally.
Ensure quick loading of game assets on both mobile and desktop players.

⚠️ Verification Challenges

I am currently based in the UK. Due to recent changes, the UK has moved to fully digital immigration permits.

I attempted to upload PDF-based digital documentation alongside my passport during the Alibaba Cloud verification process, but my request was repeatedly rejected.

Despite contacting Alibaba Cloud Support for assistance, the issue was not resolved in time for deployment.

However, RoboRush remains fully cloud-ready, container-ready, and designed to scale on Alibaba Cloud services.

I look forward to completing full deployment once my verification is successfully completed!

🎮 Game Development Highlights

🤖 AI Assist Mode:

Automatically navigate and collect orbs for 10 seconds. While active, orb collection awards 50 points instead of 100 - balancing gameplay.
⚡Speed Boost Mode:

Temporarily increases movement speed. Boosted orb collection awards 70 points per orb.
🔥Overdrive Mode (Boost + AI Assist):

Combining Boost and AI Assist reduces orb collection points to 35, maintaining fair challenge and strategic depth.
📱Mobile and Desktop Responsive Controls:

Keyboard controls on desktop (WASD or Arrow Keys), virtual joystick on mobile - all tuned for a smooth, satisfying experience.
🎵 Dynamic Soundtrack:

A custom soundtrack that adapts to gameplay, enhancing the immersive experience. background music and sound effects are included for every action.
📦Offline Play and PWA support:

Full PWA support lets players install RoboRush on devices and play without internet access.
🚀 Docker-Ready Architecture:

RoboRush is fully containerized for deployment across any cloud service (Alibaba ECS).
🏆 Global Leaderboards:

Players can compete for high scores and track their performance against others worldwide.
🎯 Sync Across Devices:

Players can sync their progress and scores across devices with their name, ensuring a seamless experience.

If you enjoyed this project, please consider giving it a star on GitHub! and comment below with your thoughts.

This project was built with ❤️ and inspired by Alibaba Cloud.

🚀 Introducing React Video & Audio Player: A Customisable Media Component for Modern Web Apps

Walid Adebayo — Tue, 08 Apr 2025 16:33:09 +0000

If you're building a video platform, podcast app, or just need flexible media components - meet your new favourite tool:

React Video & Audio Player

A lightweight, open-source video & audio player component built with React and styled with TailwindCSS.

It also works in plain HTML via CDN, with full control over styles and functionality.

✅ Features

Supports multiple media formats: MP4, MP3, OGG, WEBM, WAV, and more
Customisable controls: Play, pause, skip, download, fullscreen, and volume
Keyboard shortcuts: For accessible and intuitive playback
Visual waveform rendering: For audio files
Responsive and theme-aware: Styled with TailwindCSS
Plug-and-play: Works in React, Next.js, or standalone HTML/JS projects

📦 Installation

npm install react-video-audio-player

or use CDN:

<script src="https://cdn.jsdelivr.net/npm/react-video-audio-player/dist/index.umd.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/react-video-audio-player/dist/video-audio-player.min.css"
/>

⚡ Quick Usage (React Example)

import { VideoPlayer, AudioPlayer } from 'react-video-audio-player';

function App() {

  return (
    <VideoPlayer
      src="video.mp4"
    />
     <AudioPlayer
       src="audio.mp3"
    />
  );

}

🧩 Or in plain HTML

<head>
<!-- UMD -->
<script src="https://cdn.jsdelivr.net/npm/react-video-audio-player/dist/index.umd.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/react-video-audio-player/dist/video-audio-player.min.css"
/>
</head>
<body>
    <div id="video-player-container"></div>
    <div id="audio-player-container"></div>

    <script>
      // Initialise the VideoPlayer
      const videoPlayerContainer = document.getElementById('video-player-container');
      const videoPlayer = VideoPlayer({
        src: 'video.mp4',
      });
      videoPlayerContainer.appendChild(videoPlayer);

      // Initialise the AudioPlayer
      const audioPlayerContainer = document.getElementById('audio-player-container');
      const audioPlayer = AudioPlayer({
        src: 'audio.mp3',
      });
      audioPlayerContainer.appendChild(audioPlayer);
    </script>
</body>

🌐 Useful Links

🔗 Live Demo: react-video-audio-player.vercel.app
📦 NPM: npmjs.com/package/react-video-audio-player
⭐ GitHub Repo: github.com/Walidadebayo/react-video-audio-player
🌐 CDN: jsDelivr Package

🙌 Contribution

I’d love feedback, contributions, or suggestions!

If this component helps your project, a star on GitHub would mean a lot.

Thanks for reading - happy coding!

#ReactJS #WebDev #OpenSource #JavaScript #Frontend #MediaPlayer #AudioPlayer #VideoPlayer #nextjs #react #html

Estate Management System

Walid Adebayo — Sun, 23 Mar 2025 01:40:35 +0000

Smart Estate Management Platform

Walid Adebayo ・ Mar 23

#devchallenge #kendoreactchallenge #react #webdev

Smart Estate Management Platform

Walid Adebayo — Sun, 23 Mar 2025 01:40:17 +0000

🎯 Submission for the KendoReact Free Components Challenge.

🏡 What We Built:

EstateLuxe - Smart Estate Management Platform

EstateLuxe is a modern, intuitive, and AI-powered estate management platform that streamlines property management for both users and administrators.

Built using Next.js, KendoReact, and a customised Bootstrap theme generated with Kendo ThemeBuilder, it offers a seamless user experience with powerful features, including:

✅ User Dashboard: Quick stats, favourite properties, payments, and viewings.

✅ AI Assistant: Uses Gemini API to provide intelligent property recommendations, morgage calculations and assistance. 🤖

✅ Property Management for Admins: CRUD functionality for properties, tenants, and payments, with automated reminders.

✅ Custom Theme Switching: Dynamic theme switching between Default, Bootstrap, Custom Bootstrap, and Dark Mode using KendoReact’s ThemeBuilder-generated CSS.

🎥 Demo:

🔗 Live Demo Link (https://estateluxe.vercel.app/)

🔗 GitHub Repository (https://github.com/Walidadebayo/EstateLuxe)

📸 Screenshots: (Not showing all pages here)

Admin Management Screens

AI Assistant Interface

User

Custom Theme Demonstration
🎥 Video Demo

⚡️ KendoReact Experience:

We used KendoReact’s free components extensively across different pages. Here’s a detailed breakdown:

🎨 Components Used:

Buttons: For quick actions and form submission.
Grid: To display property lists, payments, and tenants with filtering and sorting.
Charts: To visualise property viewings in the dashboard.
DatePicker: To pick dates for tenants, payments, and other events.
DateInput: For date selection in multiple forms.
DropDowns: For theme toggle, filtering, and user dropdowns.
Inputs: For search, filtering options, and other features.
Dialogs: To handle confirmations and modals.
Conversational UI: Powers the AI Assistant chat.
Indicators: For loading states and progress bars.
SVG Icons and Common: For UI font icons.
Form & FormField: To accept inputs for login/register and CRUD operations.
ScrollView: For carousels showcasing property images and customer reviews.
Notifications: For success/error messages on login/registration and other actions.
Upload: For file uploads when adding property details.
Card: For displaying properties, charts, and other elements.
AppBar: For the navbar (top navigation) displaying different navigation for admin and user.
Drawer: For sidebar navigation in the admin layout.
Data Query: For querying data in Grid (table).
Map: To display the location of properties and contact maps.
Popover: For AI assistant popover.
TextArea: For contact messages and property descriptions.
Slider: For filtering price ranges in property search.
Checkbox: For accepting terms and “remember me” options in login/register.
TabStrip and TabStripTab: To create tabs on login pages for admin and user.

These components were leveraged across different sections, ensuring an efficient and polished user experience.

🧠 AIm to Impress:

We went beyond the ordinary by integrating cutting-edge AI technology powered by Gemini API to elevate the user experience to a whole new level! 🚀

💡 Why It's Impressive:

🔹 AI Assistant: Provides personalised property recommendations, mortgage calculations, property advice, and real-time assistance to users.

🔹 Contextual AI Learning: Learns user preferences over time to refine search results and suggest relevant properties automatically.

🔹 Intelligent Automation: AI-assisted property management for both users and administrators, reducing workload and improving efficiency.

This integration sets EstateLuxe apart by combining human-like conversational abilities with seamless property management. 💥

🎨 Delightfully Designed:

We customised the theme extensively using the Kendo ThemeBuilder to create a visually appealing and dynamic design.

🎨 Custom Theme Setup:

Bootstrap Theme: Used ThemeBuilder to generate a custom Bootstrap theme (custom-theme-bootstrap.css).
Dark Theme: Created an alternative dark theme (dark-theme-bootstrap.css) for a sleek night mode.
Theme Switching Logic: Dynamically switched themes based on user preference, supporting 4 themes:
- Default
- Bootstrap
- Custom Bootstrap
- Dark Mode Bootstrap

📸 In-Progress Screenshots:

🎥 Custom Theme Demo:

A video demo showing how the custom themes and dark mode switch dynamically.

💡 Ideal For:

🏢 Real Estate Agencies: To manage listings, payments, and tenants efficiently.

🏡 Property Owners: To track payments, viewings, and property analytics.

📊 Property Managers: To automate tenant communication, reminders, and property viewings.

👩‍💻 Developers: Looking to integrate AI and powerful UI components into their projects.

EstatLuxe is ideal for any organisation that wants to digitally transform property management while enhancing user engagement with AI-driven features.

📚 Pages & Features:

👤 User-Focused Pages:

Dashboard: Quick stats, favourites, payments, and property viewings.
Favourite Properties: List, view, and manage favourite properties.
Property Search: Search by type, price, and bedrooms, with grid/list view.
Property Details: Detailed property information and contact options.
Upcoming Payments: List payments with a “Pay Now” functionality.
AI Assistant: Smart assistant providing recommendations and assistance.

🔥 Admin-Focused Pages:

Admin Dashboard: Overview of key metrics and quick actions.
Manage Properties: Add, edit, and delete properties.
Manage Tenants: Add, edit, and delete tenant profiles.
Manage Payments: Track payments, send reminders, and perform CRUD operations.

🔒 Additional Pages:

Home Page: Displays featured properties and an introduction.
Contact Page: Enables communication with property owners/admins.
Privacy Policy Page: Outlines user privacy and platform terms.
Terms of Service: Outlines terms and conditions for using our services.

👥 Team Members:

This project was built by a team of two:

Walid Adebayo - @walidadebayo
Edun Yusuf - @volde

🏆 Why This Project Stands Out:

✅ Leverages KendoReact’s powerful components effectively.

✅ AI-Powered Assistant gives the project an innovative edge.

✅ Custom Themes with ThemeBuilder showcase design flexibility.

✅ Comprehensive features with both user and admin management.

✅ Ideal for real-world estate management solutions with AI enhancements.

🎉 We’re excited to share our work and look forward to showcasing the power of KendoReact! 🚀

💬 We would love your feedback. Drop a comment below. Thank you!