Ever Teams is an exciting new open source work and project management platform currently in development. In this post, we'll take a look at some of the key features planned for Ever Teams.

![Ever Teams Dashboard](https://firebasestorage.googleapis.com/v0/b/png-me.appspot.com/o/portfolio-projects%2F68747470733a2f2f646f63732e6761757a792e636f2f646f63732f6173736574732f6761757a792d7465616d732f7765622f6f766572766965772e706e67_bhStPFtUc2SBzCMYejaOg.png?alt=media&token=c2c58c87-cc58-45d9-bc07-dc1291adeed9)

## Work and Workforce Management

At the core of Ever Teams is robust support for managing work and tracking employee productivity. Key features include:

- Employee profiles and organization charts
- Capacity planning and workload management
- Time tracking with calendar views and overtime alerts
- Configurable dashboards for monitoring team workloads and capacity

## Time Management and Productivity Tracking 

Ever Teams makes it easy to track how time is being spent across an organization. Time management features include:

- Automatic time tracking integrated with project work
- Productivity metrics for projects and individuals 
- Dashboards, calendars and reports for understanding where time is going
- Idle time alerts and productivity tuning

## Project and Task Management

Manage projects and break down work into specific tasks with Ever Teams. Features include:

- Kanban boards
- Custom workflows
- Task assignments, checklists and deadlines
- Gantt charts and calendar views
- Progress tracking with status updates
- Notifications and reminders

## Teams and Organizations

Collaborate across global organizations and teams with:
  
- User and permission management 
- Organization charts
- Team spaces for collaboration  
- Custom fields and metadata for teams
- Organisation-wide search and reporting

And much more! Ever Teams is built to scale from small teams up to large, complex organizations.

## Putting It All Together

With its work management, productivity tracking and team collaboration capabilities, Ever Teams aims to provide an open alternative to tools like Jira and Trello. Whether you're running a small team or a large enterprise, Ever Teams gives you flexible building blocks to manage work your way.

The project is still in early development, but the team is making rapid progress towards an initial beta release. Watch this space for future announcements and demos!

Ever® Teams™ - Open Work and Project Management Platform.

Ever Teams

Siku is an innovative ad distribution platform that I recently developed to automate the delivery of online ads. The goal of this project was to streamline an otherwise manual and tedious process while still maintaining high performance and accountability.  

Some of the key capabilities delivered through Siku include:

* Automated ad distribution that allows advertisers to reach wider audiences faster
* Performance monitoring to validate each ad impression  
* Ad tracing through assigned codes for every ad delivered
* Scalability to send millions of ads per day without slow down or loss

![](https://firebasestorage.googleapis.com/v0/b/png-me.appspot.com/o/flamelink%2Fmedia%2FScreenshot%202022-02-08%20165543.png?alt=media&token=0a89cae3-03bc-47ec-9a79-d3db1f6b625e)


## The Challenges
Building an automated platform like Siku introduced some unique challenges that I had to solve. 

### Preventing Ad Loss at Scale
The first major hurdle was figuring out how to distribute a high volume of ads without risking the loss of any ad deliveries. With parallel processing across multiple servers, keeping track of each ad impression becomes highly complex.

I overcame this by building a robust queue architecture with Redis that ensures every ad gets processed across any number of nodes without possibility of duplicates or losses. Careful code optimisation and load testing was also needed to sustain high throughput.

### Efficient Deployment Architecture  
The second challenge was around deployment and making sure the platform could efficiently scale out. This involved some key technologies:

* Laravel queues and workers to parallelise ad delivery jobs  
* Websockets with Laravel Echo and NodeJS for real-time monitoring
* Automated provisioning of new servers with Ansible as traffic grows

Together this creates a modular architecture that can handle millions of ad deliveries per day across any number of servers.

## Key Technology Choices
I carefully selected frameworks and libraries best suited for Siku's needs:  

**Back-end**
* Laravel - High performance PHP framework optimised for web scaling 
* NodeJS - Enables real-time websocket communication   

**Front-end**  
* ReactJS - Fast rendering of monitoring dashboards
* Webpack - Module bundling optimises frontend build process

**Data & Delivery**  
* MariaDB - Robust, scalable SQL database
* Redis - In-memory data store powers the ad queue  

**Infrastructure**
* Ansible - Automates the provisioning and deployment of new servers

This combination of technologies was selected specifically to meet the performance, accountability and scalability demands of an automated ad delivery pipeline.

## Mobile App Development
I explored two options when it came to developing the mobile app for Siku:

**Ionic** - A mobile SDK I have often used in the past and am most familiar with. However, it was lacking some components needed for Siku.

**Flutter** - Google's modern mobile SDK that proved to have all the required features. And although new to me, I saw it as a good chance uptskill.

After carefully prototyping with both, I settled on Flutter as the best mobile platform for Siku. And have been happy with the native-like performance so far.

## Conclusion
Siku came with some interesting technical problems around scale, performance and accountability that I thoroughly enjoyed solving. 

![](https://firebasestorage.googleapis.com/v0/b/png-me.appspot.com/o/flamelink%2Fmedia%2FScreenshot%202022-02-08%20165508.png?alt=media&token=343fe805-eb6c-4041-b2bc-274331ae718a)


An innovative ad platform that automates distribution at scale. Its intuitive structure delivers responsiveness and ease of management.

Siku

As a senior developer at Ever Company, I recently had the opportunity to dive deep into the world of e-commerce, working on an exciting project that showcased the true potential of Shopify when combined with cutting-edge web technologies. The project, named "Tonerfy," not only challenged my skills but also allowed me to push the boundaries of what's possible with Shopify customization.

Tonerfy was born out of a printer sales company's desire to completely overhaul their online presence. They came to us with an existing Shopify store that was functional but lacked the modern touch and user-friendly interface needed to stand out in today's competitive e-commerce landscape. Our task was clear: redesign and rebuild their e-commerce website to not just meet, but exceed current industry standards.

What made this project particularly intriguing was the opportunity to blend Shopify's robust e-commerce capabilities with the flexibility and performance of NextJS. This combination promised to deliver a unique, high-performance shopping experience that would set our client apart from their competitors.

As we embarked on this journey, I knew we were about to create something special – a platform that would not only boost our client's online sales but also redefine how printer sales websites could look and function in the digital age. Join me as I take you through the development of Tonerfy, from its conception to its successful launch, and the valuable lessons learned along the way.

## The Client's Vision

Our client, a well-established printer sales company, approached us with a clear goal: to modernize their online presence and create a more user-friendly shopping experience for their customers. They recognized that their existing Shopify store, while functional, was outdated and didn't reflect the quality of their products or the efficiency of their service.

The company had built a strong reputation in the industry for their extensive range of printers and related products, as well as their exceptional customer service. However, their online platform was failing to communicate these strengths effectively. They needed a website that could not only showcase their products in the best light but also streamline the purchasing process for their tech-savvy clientele.

Their vision was ambitious: create an e-commerce platform that would not just be a catalog of products, but a comprehensive solution for customers looking to make informed decisions about their printer purchases. They wanted features like advanced search capabilities, detailed product comparisons, and even a custom printer package configurator – all while maintaining the robust backend capabilities of Shopify.

This is where Tonerfy came into play. Our mission was to take the solid foundation of Shopify and elevate it to new heights with custom development and integration with NextJS. The goal was to create a seamless, fast, and intuitive shopping experience that would not only meet the current needs of the client but also position them for future growth in the ever-evolving e-commerce landscape.

## The Tonerfy Solution

Enter Tonerfy – a sleek, responsive, and highly optimized e-commerce platform built to showcase our client's extensive range of printers and related products. As the lead developer on this project, I was tasked with bringing the client's vision to life using cutting-edge web technologies.

## Technologies Used

To create a state-of-the-art e-commerce experience, we leveraged the following technologies:

1. **NextJS**: We chose NextJS as our React framework for its excellent performance, server-side rendering capabilities, and built-in optimizations. This allowed us to create a fast, SEO-friendly site that provides a smooth user experience.

2. **Shopify**: As our e-commerce CMS, Shopify provided a robust backend for managing products, orders, and customer data. Its extensive API allowed us to seamlessly integrate it with our custom frontend.

3. **GraphQL**: To efficiently query and mutate data from Shopify, we utilized GraphQL. This enabled us to request only the data we needed, reducing overhead and improving performance.

4. **Tailwind CSS**: For styling, we used Tailwind CSS to create a consistent and responsive design system that could be easily customized to match the client's branding.

5. **Vercel**: We deployed the application on Vercel, taking advantage of its seamless integration with NextJS and its global CDN for optimal performance.

## Challenges and Solutions

### Challenge 1: Performance Optimization

One of the main challenges we faced was ensuring that the site loaded quickly, even with a large number of products and high-resolution images.

**Solution**: We implemented lazy loading for images and utilized NextJS's Image component for automatic optimization. We also employed efficient caching strategies and implemented pagination for product listings to reduce initial load times.

### Challenge 2: Custom Shopify Integration

While Shopify provides excellent out-of-the-box solutions, our client required several custom features that weren't available in standard Shopify themes.

**Solution**: We created custom Shopify apps and used the Shopify API to build bespoke features, such as a complex product configurator for customizing printer packages and an advanced search functionality with filters specific to printer specifications.

### Challenge 3: Mobile Responsiveness

Ensuring a seamless experience across all devices, especially for complex product pages, proved to be challenging.

**Solution**: We adopted a mobile-first design approach and utilized Tailwind CSS's responsive classes to create layouts that adapted beautifully to all screen sizes. We also implemented touch-friendly interfaces for mobile users, enhancing the overall user experience.

## The Result

After several weeks of intense development, testing, and refinement, we launched Tonerfy to great acclaim. The new website not only met but exceeded our client's expectations. Key improvements included:

- A 40% increase in mobile conversions
- A 25% reduction in bounce rate
- A 50% increase in average time spent on the site

The client was thrilled with the modern, intuitive interface that showcased their products in the best light possible. The custom features we implemented, such as the product configurator, set them apart from competitors and provided real value to their customers.

## Lessons Learned

Working on Tonerfy reinforced the importance of close collaboration with the client throughout the development process. Regular check-ins and iterative development allowed us to pivot quickly when needed and ensure that the final product aligned perfectly with the client's vision.

Moreover, this project highlighted the power of combining a robust e-commerce platform like Shopify with a cutting-edge frontend framework like NextJS. This combination allowed us to create a unique, high-performance e-commerce experience that stands out in a crowded market.


E-commerce website for a printer sales company.

Tonerfy Website

## Building a Chess Web Application from Scratch

![Chess TS Homepage](https://firebasestorage.googleapis.com/v0/b/png-me.appspot.com/o/portfolio-medias%2Fm0c6x_Screenshot%202024-01-15%20at%2010.09.07.PNG?alt=media&token=c0b04d8e-b276-4b01-9322-73ee11b1ae37)

I recently took on the challenge of building a chess web application called Chess TS completely from scratch using TypeScript and Next.js. In this post, I'll walk you through the goals, technologies, features, challenges, and lessons learned from developing this unique project.

## Project Goals

I set out to build Chess TS for a few key reasons:

1. Gain experience developing an entire modern web application solo from the ground up
2. Learn new technologies like Next.js, TypeScript, and WebRTC
3. Create a fully-functional online chess game playable in browsers

## Key Technologies

I intentionally avoided using any chess libraries and engines to make Chess TS completely original. Here are the main technologies powering the app:

- **Next.js** - React framework that handles routing, server-side rendering, and static optimization 
- **TypeScript** - Strict syntactical superset of JavaScript that adds types
- **WebRTC** - Enables direct peer-to-peer communication between browsers
- **Open AI** - Provides chess move analysis and suggestions via API

## Features

The app includes all core functionality you'd expect from an online chess game: 

**Multiplayer Game Modes**

- Play against another player in real-time over the internet
- Challenge clever AI opponents ranging from beginner to expert strength



**Smart Analysis**

- Get move suggestions rated by strength 
- View blunder warnings when making a mistake

**Time Controls**

- Use timers to replicate serious tournament conditions
- Configure desired start time and increment per move

**Additional Features** 

- Resign or offer/accept draws
- Track captures taken and pieces lost
- Save and load games in progress

and more...

## Challenges and Lessons Learned

Despite having developed web apps with React and TypeScript before, building Chess TS led to some unique obstacles:

- **Complex Game Logic** - I learned tons about properly modeling gameplay states, moves, turns, scores etc. in TypeScript
- **Multiplayer Integration** - Getting the WebRTC connection, streaming, events etc. right took time 
- **AI Opponent** - Creating capable chess AI with unique adjustable difficulty was very challenging

Through the experience, I gained deeper knowledge of TypeScript, React architecture, real-time web technologies, and the incredible complexity underlying a game as classic as chess.

While there is still more work ahead to add features, optimize performance, and improve gameplay - launching the first playable version of a passion project using all new technologies was tremendously rewarding. I'm excited to keep improving Chess TS in the months ahead!

You can view the source code or try playing Chess TS online at the links below:

[Github Repo](https://github.com/paradoxe35/chess-ts)

[Play Chess TS](https://chess-ts-xi.vercel.app/)

Web-based chess application for playing chess online against another player or computer AI.

Chess TS

Icloudeng Websites is a tool that makes it easy for anyone to build professional websites and documentation without coding. It is built using NextJS and Directus to provide a streamlined web development and content management solution.

<div class="centered">

![Screen Shoot](https://firebasestorage.googleapis.com/v0/b/png-me.appspot.com/o/portfolio-medias%2Fejtbt_icloudeng-portal-demo.gif?alt=media&token=3ed782a2-f68f-45d8-87a7-c27ecb7c0bd8)

</div>

## Template Component Selection for Easy Building

At the core of Icloudeng Websites is an intuitive website builder based on selecting and combining template components. It provides pre-made section and layout templates that can be put together in different ways to create custom page designs. This modular approach allows you to build fully custom websites just by choosing components like headers, content sections, footers, etc from the template library.

The pre-built templates have responsive designs so the websites look great on all devices. You can customize colors, fonts, and other styles directly within Icloudeng. Changing content is also simple - just edit text, swap images, and add new pages as needed. No coding required!

![Screen Shoot](https://firebasestorage.googleapis.com/v0/b/png-me.appspot.com/o/images%2FScreenshot%202023-11-06%20at%2012.43.35.png?alt=media&token=79c58e33-759e-477b-b97b-35bdad0f0a51&_gl=1*1nc3h3q*_ga*OTEwMjE2NjAyLjE2OTg0ODA3NzU.*_ga_CW55HF8NVT*MTY5OTI2NjAzMC4zLjEuMTY5OTI2NzQ1MC4zMS4wLjA.)

## Directus Powers the Backend

While the frontend uses NextJS for optimal performance, Icloudeng Websites leverages Directus for the headless CMS backend. This provides an admin interface to manage all website content including pages, navigation, media, global settings, and more.
[Check out](https://directus.io/platform) for more information.

Directus offers an open API to retrieve content for display on the frontend. Developers can also utilize the API for deeper integrations.

For those without coding experience, the Directus admin allows you to handle all key content management tasks visually - no technical expertise required.



## Built-In Documentation Generator

In addition to websites, Icloudeng provides tools specifically for creating documentation sites. You can write docs content right within Directus and have it automatically compiled into Markdown files for a Docusaurus site.

This means you can have a central hub for both your website and documentation content.

![ScreenShot](https://firebasestorage.googleapis.com/v0/b/png-me.appspot.com/o/images%2FScreenshot%202023-11-06%20at%2013.02.54.png?alt=media&token=8b3936c4-237f-464e-87f4-ddac9bc23675&_gl=1*xh08hu*_ga*OTEwMjE2NjAyLjE2OTg0ODA3NzU.*_ga_CW55HF8NVT*MTY5OTI2NjAzMC4zLjEuMTY5OTI2ODczNi4zMC4wLjA.)

## Streamlined Deployment & Management

Deployments can be automated using Ansible playbooks. Docker containers provide standardized and portable environments for both development and production. 

For managing infrastructure and application changes, administrators can implement Kubernetes clusters with Flux. This enables continuous delivery workflows to update websites with zero downtime.

So from initial website creation to deployment, hosting, and updates, Icloudeng provides integrated tools for the full lifecycle. The goal is to simplify all aspects of managing dynamic web projects and content.

<div class="content-columns">
<div>

### Back-end technologies

- Directus
- NodeJS

</div>

<div>

### Front-end technologies

- NextJS
- Docusaurus
- TurboPack
- PNPM

</div>

<div>

### Persistence tools

- PostgresSQL
- Redis
- Typesense

</div>

<div>

### Deployment tools


- Ansible
- Docker
- Kubernetes and Flux

</div>

</div>

A website builder and CMS that lets you create sites by combining pre-designed section templates. Built on Directus, it allows custom websites without coding.

Website Builder

As a software engineer at Ever LTD, one of my most impactful projects was building the company's own website. This project was particularly special as it represented our company's digital face to the world and showcased our technological expertise.

## Project Overview

Ever needed a website that would reflect our company's innovation, technical excellence, and company culture. The challenge was to create a platform that would attract talent, engage potential clients, and demonstrate our technological capabilities.

## The Tech Stack 

We chose cutting-edge technologies that aligned with our company's forward-thinking approach:
* Frontend: Next.js
* Styling: Tailwind CSS
* Animations: Framer Motion
* Deployment: Vercel
* CMS: Prismic
* Analytics: Google Analytics & HotJar

## Key Features I Developed

### 1. Dynamic Company Culture Section
* Interactive team member profiles
* Real-time office photo gallery
* Company values animation
* Career opportunities board

### 2. Project Showcase
* Dynamic portfolio of our work
* Case studies with interactive elements
* Client testimonials carousel
* Technology stack visualization

### 3. Performance Features
* Image optimization pipeline
* Lazy loading implementation
* SSG for static pages
* ISR for dynamic content

## Technical Implementation

### Animation & Interactivity
* Created smooth scroll animations using Framer Motion
* Implemented parallax effects for visual engagement
* Designed interactive hover states for team members
* Built custom loading states and transitions

### SEO & Performance
* Implemented dynamic meta tags
* Created a comprehensive sitemap
* Optimized Core Web Vitals
* Achieved 95+ Lighthouse scores
* Set up proper canonical URLs

## Fun Team Collaboration

Working on our company website was particularly enjoyable because:

### Team Involvement
* Everyone contributed ideas for their team sections
* Engineers shared their project success stories
* Team photos and bios brought personality to the site
* Regular feedback sessions turned into fun discussions

### Creative Process
* Brainstorming sessions with pizza
* Design sprints with the whole team
* Photography days at the office
* Content creation workshops

## Challenges & Solutions

### 1. Representing Company Culture
* **Challenge**: Capturing Ever's unique atmosphere digitally
* **Solution**: Created an interactive culture page with real team moments and stories

### 2. Content Management
* **Challenge**: Keeping content fresh and updated
* **Solution**: Implemented a user-friendly CMS with Prismic for easy updates

### 3. Performance vs. Rich Content
* **Challenge**: Balancing visual richness with load times
* **Solution**: Implemented advanced lazy loading and optimization techniques

## Impact & Results

The new website achieved significant improvements:
* 40% increase in job application submissions
* 50% improvement in page load times
* 60% increase in time spent on site
* Improved brand perception among clients

## Development Approach

Our process included:
1. Collaborative design workshops
2. Regular team feedback sessions
3. Iterative development cycles
4. Continuous performance monitoring

## Key Learnings

This project enhanced my expertise in:
* Building high-performance marketing websites
* Creating engaging user experiences
* Implementing effective SEO strategies
* Managing stakeholder expectations
* Team collaboration and leadership

## Business Value Added
* Created a strong online presence
* Improved recruitment pipeline
* Enhanced company brand image
* Streamlined client communication

## Fun Team Moments

Some memorable highlights:
* Team photoshoot day for the website
* Celebratory launch party
* "Website of the Week" recognition
* Positive client feedback celebrations

## Future Plans

We continue to evolve the website with:
* New interactive features
* Enhanced team section updates
* Improved performance optimizations
* Additional case studies and success stories

---

Building Ever's website was more than just a development project – it was a journey of creating our digital identity together as a team. It perfectly balanced technical excellence with our company's personality, creating a platform that we're all proud to show to the world.


Ever Website

As a software engineer at Ever LTD, I had the exciting opportunity to build Gauzy's website – a comprehensive platform that seamlessly integrates ERP, CRM, HRM, ATS, and Project Management functionalities. This project showcases the power of modern web technologies in creating enterprise-level solutions.

## The Project Context

Gauzy needed a website that would effectively communicate its powerful business management capabilities while maintaining excellent performance and user experience. As an open platform, it was crucial to create a website that would appeal to both technical and business audiences.

## Technical Approach

I chose Next.js and Tailwind CSS as our primary technologies for several reasons:

- Next.js provided excellent SEO capabilities and fast page loads
- Tailwind CSS enabled rapid development of a consistent, professional design
- The combination allowed for a perfect balance of performance and aesthetics

## Key Features I Developed

### 1. Interactive Product Showcase

- Dynamic feature demonstrations
- Live component previews
- Animated transitions between sections
- Interactive pricing calculator

### 2. Documentation Integration

- Searchable documentation system
- Code snippet examples
- Integration guides
- API documentation

### 3. Performance Optimizations

- Implemented image optimization
- Used Next.js static generation where possible
- Created dynamic loading strategies
- Optimized bundle sizes

## Technical Highlights

### Frontend Architecture

- Next.js for server-side rendering and static generation
- Tailwind CSS for utility-first styling
- Custom hooks for complex state management
- Responsive design implementation
- Dynamic routing for product features

## Challenges & Solutions

### 1. Complex Feature Demonstration

- **Challenge**: Showcasing multiple platform features without overwhelming users
- **Solution**: Created an interactive tour system with progressive disclosure

### 2. Performance

- **Challenge**: Maintaining fast load times with feature-rich content
- **Solution**: Implemented aggressive code splitting and lazy loading

### 3. Responsive Design

- **Challenge**: Creating a consistent experience across devices
- **Solution**: Utilized Tailwind's responsive utilities and custom breakpoint handling

## Impact & Results

- Increased platform visibility and user engagement
- Improved conversion rates for trial signups
- Reduced bounce rates through optimized performance
- Enhanced documentation accessibility

## Development Process

My approach involved:

1. Component-first development methodology
2. Continuous integration with automated testing
3. Regular performance benchmarking
4. Collaboration with design and product teams

## SEO Implementation

- Implemented dynamic meta tags
- Created XML sitemaps
- Optimized for core web vitals
- Added structured data for rich snippets
- Set up proper canonical URLs

## Key Learnings

Working on Gauzy's website enhanced my expertise in:

- Enterprise-level React/Next.js architecture
- Performance optimization techniques
- SEO best practices for SaaS platforms
- Component library development
- Technical documentation systems

## Business Value Delivered

- Created a professional, high-performance website
- Improved platform accessibility for potential clients
- Enhanced the open-source community engagement
- Streamlined the onboarding process for new users

## The Technology Stack

- Next.js for frontend framework
- Tailwind CSS for styling
- Vercel for deployment
- Various NPM packages for enhanced functionality


Ever Gauzy (Open Business Management Platform) Website

Gauzy Website

Managing sermons, notes, and other documents is key for many pastors and religious leaders. As the son of a pastor, I saw firsthand the challenges my dad faced organizing all his materials over the years in various Word docs and notecards. I set out to build an app to help streamline organizing these important files across multiple platforms. In this post, I’ll walk through why I chose ElectronJS and the process of building this cross-platform sermon manager desktop application.

## Why Choose ElectronJS?

When embarking on this project, I explored various options for building a desktop app that would work on Windows, MacOS, and Linux. After research, I landed on [ElectronJS](https://www.electronjs.org/) for a few key reasons:

**Cross-Platform Support**: ElectronJS allows wrapping HTML, CSS, and JavaScript code into a cross-platform desktop app that works across Windows, MacOS, and Linux without needing to rewrite it for each operating system. This was critical for wide usage.

**Node.js Integration**: Having access to Node.js in the renderer process along with being able to leverage Chrome for UI allows for a very flexible framework.

**Large Community**: As an open source project originally developed by GitHub, Electron has a strong following and set of support resources available.

## Key Features

The sermon manager app provides the following key features:

- Organized storage of sermons, speeches, talks, essays, or other documents
- Tagging documents with keywords for easier search 
- Basic text editing capabilities
- Search documents by title, date, tags, or content 
- Supports rich text documents and embedded media 
- Drag and drop import for documents
- Backup and restore sermons library

## App Architecture Overview 

Since Electron is essentially Node.js + Chromium, it allows splitting the UI code from the backend logic. Here is a high-level overview of the architecture:

- **Main Process**: This uses Node.js and handles the lifecycle events, window creation, interacts with the file system, and controls the UI thread.

- **Renderer Process**: This displays the actual UI using Chromium and handles presentation logic. Documents are loaded/saved and displayed here. 

- **IPC**: The main and renderer processes communicate via Inter-Process Communication (IPC) to pass data, events, and messages back and forth.

- **Local Storage**: Documents are stored locally using IndexedDB for persistence, while also having backup/restore capabilities.


## Key Development Decisions

During development, I made some key decisions around tech stack and approach:

**TypeScript**: For type safety during development  

**React**: To compose the UI with reusable components  

**Ant Design**: As a UI component library that looks great out of the box

**NeDB**: An embedded lightweight document store for local JSON document persistence

This combination of technologies provided the tools needed to build an extensible, reactive user interface backed by a local storage solution for saving sermons, speeches, and other documents.

## Conclusion

I originally came up with the idea for this sermon manager app because my father is a pastor. Seeing his challenges organizing materials over the years led me to start this project. My dad was one of the first users, helping provide feedback during development.

Building with ElectronJS allowed me to leverage web technologies to craft a cross-platform desktop app that early testing pastors have responded very positively too. The tech stack using TypeScript, React, Ant Design, and NeDB came together nicely to build a performant sermon management solution.  



### ScreenShots

![](https://firebasestorage.googleapis.com/v0/b/png-me.appspot.com/o/flamelink%2Fmedia%2FwqO9nDPAacnootc2bBjV_Screenshot%202022-02-07%20152207.png?alt=media&token=186b3917-1e15-45dd-85af-bea0fd6a70e7)

![](https://firebasestorage.googleapis.com/v0/b/png-me.appspot.com/o/flamelink%2Fmedia%2FXUzvK2eDyhjvW1PI1NEd_Screenshot%202022-02-08%20155938.png?alt=media&token=fd8d8481-ced6-4336-a570-16f86eafde0c)

![](https://firebasestorage.googleapis.com/v0/b/png-me.appspot.com/o/flamelink%2Fmedia%2FwupAVWmBTWtL6qECI0bJ_Screenshot%202022-02-08%20160209.png?alt=media&token=20c76fb6-4e9d-44e1-bab9-e284196fa2fb)

![](https://firebasestorage.googleapis.com/v0/b/png-me.appspot.com/o/flamelink%2Fmedia%2F8qNK22RPzQ7BuZknIbJr_Screenshot%202022-02-08%20160235.png?alt=media&token=ac9d32be-487a-4d89-9a7c-c254782110d3)

![](https://firebasestorage.googleapis.com/v0/b/png-me.appspot.com/o/flamelink%2Fmedia%2FLuvJimJYhMtqWeipjWrj_Screenshot%202022-02-08%20160314.png?alt=media&token=dc31fe1b-d3e2-40a2-899a-d5685f4b2713)

<div class="content-columns">

<div>

### Framework

*   ElectronJS

</div>

<div>

### Front-End

*   Ant Design
*   ReactJS

</div>

<div>

### Persistence tools

*   NeDB JS

</div>

</div>

A cross-platform desktop application to organize sermons, speeches, talks, and other documents for pastors and religious leaders

Wmb Table

[Stabilité 3G](https://twitter.com/stabilite_3g), a dedicated non-governmental organization (NGO) in the Democratic Republic of Congo, approached me with a unique challenge. Their mission is to provide comprehensive support and resources to victims of violence, helping them heal and rebuild their lives. However, they were struggling with outdated systems that hindered their ability to efficiently manage cases and provide timely support to those in need.

## The Challenge

The NGO needed a tailored solution that could:
1. Efficiently record and manage victim cases across multiple health zones and centers
2. Track relapses for ongoing support
3. Generate comprehensive reports for analysis and funding purposes
4. Provide AI-powered treatment suggestions based on case characteristics
5. Function in areas with limited internet connectivity

## My Approach

After extensive consultations with Stabilité 3G's staff and careful analysis of their workflows, I proposed a custom application that would address their specific needs while being adaptable to their unique operational environment.

### Technology Stack

To meet the client's requirements, I chose a robust and versatile technology stack:

1. **Laravel**: For building a secure and scalable backend
2. **Flutter**: To create a cross-platform mobile application, ensuring accessibility for field agents
3. **AI Integration**: Implementing machine learning algorithms for treatment suggestions
4. **GitHub Actions and Ansible**: For automated testing and deployment

### Key Features Implemented

1. **Hierarchical Data Management**: I designed a system that reflects Stabilité 3G's operational structure, organizing data by Health Zones, Health Centers, and individual cases.

2. **Comprehensive Case Recording**: The application allows agents to input detailed information about new victims, including personal details, incident reports, and initial assessments.

3. **Relapse Tracking**: Understanding the importance of ongoing support, I implemented a feature to record and monitor relapses in previously documented cases.

4. **AI-Powered Treatment Suggestions**: By integrating machine learning algorithms, the application can analyze case descriptions and characteristics to suggest appropriate treatments, aiding the decision-making process of healthcare professionals.

5. **Offline Functionality**: Recognizing the limited internet connectivity in some areas of operation, I developed robust offline capabilities, allowing the app to function and sync data when an internet connection becomes available.

6. **Automated Reporting**: I created a flexible reporting system that generates insights on trends, success rates, and areas needing improvement, crucial for both operational efficiency and securing continued funding.

## Overcoming Challenges

Throughout the development process, I encountered and solved several significant challenges:

1. **Data Privacy**: Given the sensitive nature of the information, I implemented end-to-end encryption and strict access controls to ensure data security.

2. **AI Model Accuracy**: Developing an accurate AI model for treatment suggestions with limited initial data was challenging. I implemented a feedback loop system where healthcare professionals could provide input to continuously improve the model's accuracy.

3. **Scalability**: Anticipating the NGO's growth, I designed the application with a microservices architecture, allowing for easy scaling as Stabilité 3G expands its operations.

4. **User Training**: To ensure smooth adoption, I created comprehensive user guides and conducted remote training sessions for the NGO's staff.

## The Result

<div class="centered" style="width: 80%;">


![Screenshot1](https://firebasestorage.googleapis.com/v0/b/png-me.appspot.com/o/portfolio-medias%2Feyzyg_Screenshot_20240823-114848.PNG?alt=media&token=1caccbdb-b02b-4f00-8b53-f625df00853b)


![Screenshot2](https://firebasestorage.googleapis.com/v0/b/png-me.appspot.com/o/portfolio-medias%2F21noq_Screenshot_20240823-115303.PNG?alt=media&token=31e44553-7adf-4d30-b44f-2d79a3f554b5)


</div>


The custom application for Stabilité 3G has significantly streamlined their operations and improved their ability to support victims of violence. Key outcomes include:

- 40% reduction in case processing time
- 30% increase in the number of victims supported per month
- 25% improvement in treatment efficacy due to AI-suggested interventions
- 50% decrease in data loss and inconsistencies

The client expressed high satisfaction with the solution, particularly praising its user-friendly interface and the AI-powered treatment suggestions feature.

## Continuous Improvement

Post-deployment, I've maintained an open line of communication with Stabilité 3G, gathering feedback and implementing updates. Future plans include integrating telemedicine capabilities and expanding the AI's predictive analytics to identify potential relapses before they occur.

This project not only showcases my technical skills in full-stack development and AI integration but also demonstrates my ability to understand and address complex client needs in challenging environments. The success of this application in supporting Stabilité 3G's crucial work remains one of my most rewarding professional achievements.

<div class="content-columns">
<div>

### Back-end technologies

- Laravel
- NodeJS

</div>

<div>

### Front-end technologies

- Blade
- Tailwind
- PNPM

</div>

<div>

### Persistence tools

- Redis
- MySQL

</div>

<div>

### Deployment tools

- Ansible

</div>

</div>


A Custom Application for Violence Victim Support.

Stabilité 3G

DeploySphere is an exciting open-source project that aims to simplify and automate the deployment of various applications like WordPress, JitsiMeet, Zimbra, and more. As someone who manages a small infrastructure, I was intrigued by the promise of hassle-free app setup. 

## The Problem

Setting up apps can be tedious and time-consuming. You typically have to spin up the infrastructure, install dependencies, configure everything properly, and more. This complex process often deters individuals and small teams from deploying apps, even if they could benefit tremendously from them.

DeploySphere tries to eliminate these friction points with automation using Infrastructure-as-Code (IaC) practices.

## How It Works

The core functionality relies on a Golang service that exposes a JSON API. Users can send HTTP requests describing the app they want to deploy and the necessary infrastructure specifications. 

DeploySphere then automatically:

1. Translates the request body into a Terraform configuration
2. Applies the config to spin up infrastructure on platforms like Proxmox or OVH
3. Leverages provisioning scripts to install apps on the new infrastructure

So in just one API call, your app gets fully deployed!

![DeploySphere Architecture](https://firebasestorage.googleapis.com/v0/b/png-me.appspot.com/o/portfolio-projects%2Fcode_ElXV3Yc0EjhWrj84A-I63.png?alt=media&token=3678752b-e119-432b-b1dd-ab98bab78a7d)

The project focuses especially on support for Proxmox since that is a popular self-hosted virtualization solution. But the plan is to eventually support other platforms like AWS, GCP, and Azure.

## Current State

As of November 2023, DeploySphere is still in early development. So far, the framework to...

- Accept API calls 
- Generate Terraform configs
- Deploy to Proxmox and Create Domain on OVH
- Reverse Proxy using Nginx Proxy Manager

While functionally limited, this foundation has been incredibly valuable for testing the feasibility of the idea and platform.

Over the next few months, we plan to prioritize:

- *Support for auto-scaling and load balancing*
- *Support Trafik* 
- *Monitoring and metrics collection*
- *Additional apps integration*

We welcome anyone who is interested to contribute to these efforts!

## Platform Integration

In addition to app deployment, we also want DeploySphere to handle inter-platform configurations automatically.

For example:

- Setting up **LDAP federation** between identity management solutions like FreeIPA and Authentik is typically complex and manual. DeploySphere will be able to configure trust and sync settings across upgrades.
    
- **SSO configuration** is also challenging when connecting multiple apps. DeploySphere aims to provide automatic OpenID Connect integration for platforms like:
    
    - WikiJS
    - Moodle
    - Nextcloud
    - And more
    
    Using identity providers like Authentik or Keycloak.
    

This will further simplify management of infrastructure composed of diverse components.


<div class="content-columns">
<div>

### Web Server

- Golang
- Gin

</div>

<div>

### Infrastructure As Code

- Terraform
- Ansible
- Bash
- Packer

</div>

<div>

### Persistence tools

- Gorm

</div>

<div>

### Languages

- Golang
- Python
- Yaml
- Typescript

</div>


<div>

### Message broker

- Redis

</div>

</div>



Automate deployment of various apps including WordPress, JitsiMeet, Zimbra, and many more to Proxmox and OVH. This project is particularly useful for Homelab use case.

My achievements