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.


Backend Symfony, Laravel

Frontend React, VueJS

NodeJs, Golang