
## Introduction

This article will guide you on how to break into tech with little to no experience by sharing resources, tips, and tricks on how to get started, fine-tune a field of interest, build your profile, prepare for interviews, and get full-time jobs/contracts.

Suppose you’re like most newbies out there, tired of hearing buzzwords like AI (Artificial Intelligence) and ChatGPT without having any idea of what it’s about and feel burdened by how difficult it may seem to do tech; I’ll like to let you know that you’re not alone, but keep in mind that getting started isn’t “rocket science” and “landing on the moon” from the very first day, little steps add up.

At the end of this article, you will find some advice that will be helpful regardless of your skill level or experience; they might be the words you need to hear or remember.

## How to get started

- Search for roles in tech on Google to get an idea of options available, reading short descriptions about them as well.
- Search for job openings in the field(s) in your interests. LinkedIn is an excellent platform for this.
- Go through the job description and write down common skills among the job openings.
- With that idea in mind, you can start your research, getting a surface-level understanding of those topics.
- Read articles, watch videos of people talking about how they got started in those fields of study/work.
- Fine-tune your field of interest with the above in mind.

## Getting better

- Kickstart with learning programs like Alt School, watch free crash courses on YouTube, and take a couple of paid courses on platforms like Udemy, Coursera, etc.
- Work on personal projects to build your portfolio and make your theoretical knowledge practical.
- Harsh truth: You’ll undoubtedly get frustrated at one point or the other in tech; continuous practice would help build the muscle of endurance and perseverance, especially when you have a personal interest in your learning.

## Building your profile

- Draft an updated CV.
- Create professional accounts on job searching platforms like LinkedIn.
- Create a shareable portfolio if applicable, e.g., with GitHub, Figma, a personal website, etc.

![](https://miro.medium.com/v2/resize:fit:1400/0*FF-Ov-5D6OaKKCHr)

## Preparing for interviews and contract jobs

- With your portfolio ready, practice your speech by practicing how you’d talk about yourself, what you have worked on, your interests, and your goals (having an understanding of the target company and tailoring your speech in that line can help stand you out as it depicts common interest).
- Research the pattern of interviews specific to your field of interest. E.g., common questions asked in technical interviews for Software Engineers, questions about the thought process for Product designers, portfolio reviews, etc.
- Learn how to negotiate with an idea of the market value/salary range of the role of interest or scope of work.

### The typical pattern of interviews:

- **Introductory call**: An almost informal call to talk about the role, what the company does, and balance the candidate's expectations as well as get a sense of the skill level or experience of the candidate.
- **Technical interview**: Coding challenge, take-home assignment, portfolio review, industry-specific questions, etc.
- **Assessment**: Consideration of interpersonal skills, technical skills, relevant experience, etc.
- **Job offer and negotiation**.

## Mentorship/Guidance

- Not everyone is privileged to have access to a mentor or someone experienced/skilled in their field of interest. If you do come in contact with or know someone that suits the above description, the best way to gain the most from such interactions is not to expect a sole dependence on whatever they say or do or request a “handout” but for you to do your research (having in mind the tips already shared above), have and ask specific questions, this helps to make the conversations more effective and enables the mentor help you better/easier.
- It is easier for a mentor to share tips on becoming a better Frontend Engineer than to start from scratch explaining the difference between a Frontend Engineer, a Backend Engineer, a DevOps Engineer, etc. Summary: ensure you do your due diligence of research to help your helper help you.

## Personas explaining the concept.

Below are examples of people trying to break into tech who need more experience or an idea of what they want to do.

_NB: Please note that the names used here are only for demonstration purposes with all due respect to the people and companies/bodies associated with them._

![](https://miro.medium.com/v2/resize:fit:1400/format:webp/0*9_n9XhJljU4fRTQr.jpg)

### Oppenheimer wants to be a Project Manager.

- Oppenheimer has good planning and collaboration skills and loves to learn. He searches on LinkedIn for job openings in project management.
- Oppenheimer finds a couple of openings asking for an understanding of “Agile Methodology,” “Working with a cross-functional team,” “OKR (Objective key result) approach,” “Planning quarterly goals,” “Scoping and balancing expectations,” etc.
- Oppenheimer begins his research as he Googles what Agile means and realizes there’s another methodology called Waterfall; he reads further; the more he searches into a topic, the broader it becomes, and with time, he sees the connection between them.
- Oppenheimer starts to build confidence in his research capabilities and familiarity with common keywords used in the industry.
- Oppenheimer decides to apply to companies to work for free but, unfortunately, is denied. Hence, he decides to reach out to his friends or join tech communities to find a project to collaborate on.
- Oppenheimer takes professional courses to solidify his knowledge and practice/collaboration work.
- Oppenheimer is now more experienced in the field and has worked on several projects, so he returns to the job market with the tips above in mind.

![](https://miro.medium.com/v2/resize:fit:1400/format:webp/0*CoYJ0YjMlGogZ7R-.jpg)

### Barbie with no idea of what she wants to do in tech

- Barbie searches on Google with keywords relevant to jobs in tech and finds roles like “Project Manager,” “Product Designer,” “Software Engineer,” “Backend Engineer,” “Frontend Engineer,” “Social Media Manager,” “Graphic Designer,” etc.
- Barbie now knows tech roles and spends time reading articles, asking questions, and watching videos about what people do in those roles.
- Barbie realizes she wants to be a Product designer.
- Barbie searches LinkedIn for job openings for Product designers and finds a couple of openings asking for proficiency in Figma.
- Barbie starts watching free videos about how to get started with Figma.
- Barbie grasps the basics of what Figma is and has an idea of its use.
- Barbie understands better with structures, so Barbie signs up for a course on Udemy.
- Barbie now knows how to use the tool, so she starts to practice and creates a couple of designs and a portfolio for herself.
- Barbie now has the option to source for freelance gigs, collaborate with peers learning together, undergo free/paid internships, or source for full-time jobs/contracts.

![](https://miro.medium.com/v2/resize:fit:1400/format:webp/0*iy-keYXXOE-1rdIF.jpg)

### Tom Cruise wants to be a self-taught Frontend Engineer and has an experienced friend

- Tom is a self-motivated creative that enjoys expressing himself through pixels and code, converting ideas and designs into usable solutions on the web.
- From a couple of searches on Google and browsing the web, Tom realizes he needs to know the basics of HTML and CSS to get started.
  Tom has a friend, Precious OSSAI, that is experienced in this field. Tom asks for advice, and Precious suggests understanding box models, flex-box, and grid systems as a start after grasping the proper use of semantic HTML tags.
- Tom takes the advice, understands the concepts, studies further, and practices to the point where he feels comfortable learning other programming languages; thus, he picks up Javascript.
- Tom goes back to Precious, showing progress; Precious seeing the dedication, is motivated to help further and explains a couple of concepts, throwing light on topics Tom can go back to research.
- Tom is getting confident and is ready to pick up frameworks of the language, so he has started studying and practicing with ReactJS.
- Tom has built muscle in picking up new knowledge in tech, research, in troubleshooting/debugging. He has the option to continue on this path of being self-taught, undergo training, take up freelance gigs, find a full-time job, and pursue a career with the tips mentioned earlier shared in this article.

## Words of advice

- While internships are great, personal study is essential to level up, attract more value, become great at your craft, and stand out.
- Try to be as practical as possible with hands-on attempts with or without external support.
- Focus on progress, and remember how far you have come; rather than beat yourself up about what you need to achieve or learn, enjoy the journey, not just the destination.

> > Imposter syndrome never ends, no matter how skilled or experienced you are; it may not completely be a bad thing but a tool you can use to improve. The more you know, the more you know you don’t know, but the more you know, the more you know you know better than you knew.
> > — Precious OSSAI.

## Resources and links

Below is a list of helpful links and resources.

- ### Job searching platforms
  1. [LinkedIn](https://linkedin.com)
  2. [Otta](https://Otta.com)
  3. [Glassdoor](https://glassdoor.com)
- ### Skill acquisition
  1. [Udemy](https://udemy.com)
  2. [Coursera](https://coursera.com)
  3. [Alt School](https://www.altschoolafrica.com)


This article will guide you on how to break into tech with little to no experience by sharing resources, tips, and tricks on how to get started, fine-tune a field of interest, build your profile, prepare for interviews, and get full-time jobs/contracts.

Breaking into tech, getting gigs, jobs, mentorship, and internships


## Introduction

In recent years, microservices architecture has gained significant popularity for building scalable and maintainable backend systems. However, the frontend layer of applications has often lagged behind in terms of modularity and flexibility. This is where the concept of micro-frontends comes into play. In this article, we will explore the concept of micro-frontends, their benefits, and how they can revolutionize frontend development.

## Understanding Micro-Frontends

Micro-frontends extend the principles of microservices to the frontend layer of an application, enabling independent development, deployment, and scalability of individual frontend modules. In a traditional monolithic frontend architecture, all components are tightly coupled, making it challenging to scale development efforts, reuse code, or introduce new technologies without affecting the entire application. Micro-frontends address these challenges by breaking down the frontend into smaller, self-contained modules that can be developed, tested, and deployed independently.

## Benefits of Micro-Frontends

### 1. Independent Development and Deployment

With micro-frontends, development teams can work on individual modules independently, using different technologies and frameworks that best suit their specific requirements. This independence allows for faster development cycles, as changes can be made without impacting the entire application. Each micro-frontend can have its own development lifecycle, enabling teams to release updates or bug fixes without coordinating with other teams.

### 2. Scalability and Performance

Micro-frontends facilitate horizontal scalability, as individual modules can be deployed and scaled independently based on their specific resource needs. This flexibility allows organizations to allocate resources efficiently and optimize performance based on demand. Additionally, by caching and delivering micro-frontends from content delivery networks (CDNs), the overall user experience can be improved through reduced latency and faster page loads.

### 3. Technology Diversity and Innovation

Micro-frontends open up opportunities for using different technologies and frameworks within the same application. Each micro-frontend can be developed using the technology stack that best suits its purpose, promoting innovation and allowing teams to leverage the latest advancements in frontend development. This flexibility also enables organizations to gradually modernize legacy systems by replacing or enhancing specific modules.

### 4. Code Reusability and Collaboration

Micro-frontends encourage code reusability and collaboration across teams. Developers can share and reuse components or functionality between different micro-frontends, promoting consistency and reducing duplicated effort. Collaboration between frontend teams becomes more streamlined, as they can focus on specific areas of expertise while maintaining a cohesive user experience across the application.

## Implementing Micro-Frontends

Implementing micro-frontends requires careful planning and consideration. Here are some key aspects to consider:

### 1. Module Decoupling and Communication

Identify the boundaries of each micro-frontend module and define clear communication mechanisms between them. This can be achieved using well-defined APIs, events, or message passing systems. Avoid tight coupling between modules to maintain independence and minimize dependencies.

### 2. Cross-Cutting Concerns and Shared Libraries

Identify cross-cutting concerns, such as authentication, logging, or styling, and determine how they will be handled across micro-frontends. Shared libraries or dedicated micro-frontends can be utilized to address these concerns, ensuring consistency and reducing duplication.

### 3. Build and Deployment Strategies

Choose appropriate build and deployment strategies that align with your team's requirements. Options include building each micro-frontend as a standalone application and deploying them independently or bundling them together at build time for a unified deployment.

### 4. Testing and Quality Assurance

Establish testing strategies that cover individual micro-frontends, as well as end-to-end testing across the entire application. Use automation tools, integration testing frameworks, and continuous integration practices

## Summary

Micro-frontends offer a revolutionary approach to frontend development by applying the principles of microservices architecture to the frontend layer of applications. In contrast to monolithic frontend architectures, micro-frontends allow for independent development, deployment, and scalability of individual modules. This independence empowers development teams to work on specific modules using different technologies and frameworks, leading to faster development cycles and promoting innovation. Micro-frontends also enhance scalability and performance by enabling horizontal scaling of modules and leveraging CDNs. Code reusability and collaboration are facilitated through the sharing of components and functionality between micro-frontends, fostering consistency and reducing duplicated effort. Implementing micro-frontends requires careful planning, including defining module boundaries, establishing communication mechanisms, addressing cross-cutting concerns, and adopting suitable build and deployment strategies. Testing and quality assurance should be prioritized to ensure the reliability and functionality of both individual micro-frontends and the overall application. By embracing micro-frontends, organizations can achieve greater flexibility, modularity, and scalability in their frontend architectures, ultimately delivering enhanced user experiences and enabling more efficient development practices.

> > See micro-frontends like a yummy cake with all your favorite flavors but was baked by different companies and put together perfectly where each flavor slice can also be updated at any time without the respective companies talking to just the pan and not each other.


Micro-frontends extend the principles of microservices to the frontend layer of an application, enabling independent development, deployment, and scalability of individual frontend modules. In a traditional monolithic frontend architecture, all components are tightly coupled, making it challenging to scale development efforts, reuse code, or introduce new technologies without affecting the entire application. Micro-frontends address these challenges by breaking down the frontend into smaller, self-contained modules that can be developed, tested, and deployed independently.

Micro-Frontends - Breaking Down Monolithic Frontend Architectures


### Introduction

I led the frontend development of a customer-facing and merchant-facing e-commerce/FinTech solution which facilitated synchronized sales data across multiple channels (e.g. Woo-Commerce and Point of Sale (P.O.S) outlets in multiple locations) with internal tools for administrative management e.g. handling Know Your Customer (K.Y.C) processes.

### About the company

The company is Kloud Commerce (formerly PayPecker), a Unified commerce solution for small, medium and large scale businesses, helping to improve B2B, B2C, D2C operations across different sales channels and outlets for effective synchronisation and integrations.

A UK registered E-commerce/Fin-Tech solution company which operated in Nigeria and Ghana with plans to expand to a couple of other countries in Africa while I was working with the company.

### My Impact

As the Frontend Lead for the company, I collaboratively pioneered the development of the product with the below solutions:

- A customisable multi-store and multi-outlet e-commerce solution for a seamless shopping to checkout to payment experience for customers.
- A payment modal SDK with multiple options including Card, USSD, MoMo (Mobile Money) and Bank Transfer.
- A Merchant/Retailer facing back-office for managing their stores, orders, payments as well as other day-to-day operations & settings.
- Internal tools like an admin portal for managing K.Y.C processes and other administrative operations.
- Development of third party integration systems/plugins for recording offline sale on P.O.S systems like Retailman and online systems like Woo-commerce.

We were able to successfully deliver these features within our timeline by leveraging modern technologies such as ReactJS and NextJS which were primarily used for the website, NuxtJS and VueJS for the payment modal SDK, e-commerce solution, and admin portals.

All these led to a successful pre-seed of **$765,000 USD** raised.


I led the frontend development of a customer-facing and merchant-facing e-commerce/FinTech solution which facilitated synchronized sales data across multiple channels (e.g. Woo-Commerce and Point of Sale (P.O.S) outlets in multiple locations) with internal tools for administrative management e.g. handling Know Your Customer (K.Y.C) processes.

How I led the frontend development of a FinTech company


## Introduction

As companies strive to deliver exceptional user experiences and navigate the evolving landscape of web technologies, the role of a senior frontend engineer has become increasingly critical. Senior frontend engineers are experienced professionals who possess a deep understanding of frontend development and play a crucial role in shaping the technical direction of projects. In this article, we will explore the expectations placed upon a senior frontend engineer in terms of skills, responsibilities, and leadership qualities.

## Technical Skills and Expertise

1. **Advanced Frontend Technologies**: A senior frontend engineer should have a comprehensive understanding of advanced frontend technologies such as HTML5, CSS3, JavaScript, and modern frameworks like React, Angular, or Vue.js. They should be adept at leveraging these technologies to build scalable, performant, and user-friendly web applications.

2. **Responsive Design and Accessibility**: A senior frontend engineer should have a strong grasp of responsive design principles and the ability to create responsive layouts that adapt to different devices and screen sizes. They should also prioritize accessibility and ensure that their code complies with accessibility standards to provide an inclusive user experience.

3. **Performance Optimization**: Senior frontend engineers should possess expertise in optimizing web application performance. This includes techniques such as code minification, image optimization, lazy loading, and reducing network requests to deliver fast-loading websites and smooth user interactions.

4. **Cross-Browser Compatibility**: A senior frontend engineer should have a deep understanding of cross-browser compatibility issues and the ability to write code that works seamlessly across different browsers and platforms. They should be familiar with browser-specific quirks and implement appropriate solutions or workarounds.

5. **Testing and Quality Assurance**: Senior frontend engineers should advocate for and implement robust testing strategies, including unit tests, integration tests, and end-to-end tests. They should be proficient in using testing frameworks and tools to ensure the quality, reliability, and maintainability of the codebase.

## Responsibilities and Leadership Qualities

1. **Architectural Design and Scalability**: Senior frontend engineers are responsible for designing scalable and modular frontend architectures. They should possess a solid understanding of software design principles, component-based architectures, and design patterns. They should also demonstrate the ability to make informed decisions regarding the selection and integration of frontend technologies.

2. **Code Review and Mentorship**: Senior frontend engineers are expected to conduct thorough code reviews, providing constructive feedback to improve code quality and maintain best practices. They should actively mentor and guide junior engineers, fostering a collaborative and knowledge-sharing environment within the team.

3. **Collaboration and Communication**: Senior frontend engineers should excel in cross-functional collaboration, working closely with product managers, designers, and backend engineers to translate requirements into technical solutions. They should possess strong communication skills to articulate complex technical concepts to both technical and non-technical stakeholders.

4. **Continuous Learning and Innovation**: A senior frontend engineer should stay up-to-date with the latest frontend trends, tools, and best practices. They should proactively explore new technologies, experiment with innovative approaches, and advocate for their adoption when appropriate.

5. **Problem Solving and Troubleshooting**: Senior frontend engineers should have excellent problem-solving and troubleshooting skills. They should be able to identify and resolve complex technical issues efficiently, making data-driven decisions and prioritizing user experience and application performance.

> > In conclusion, a senior frontend engineer is expected to possess a comprehensive set of technical skills, demonstrate leadership qualities, and shoulder responsibilities that contribute to the success of frontend projects. By combining their technical expertise with effective communication, collaboration, and a continuous learning mindset, senior frontend engineers can drive innovation, mentor junior team members, and elevate the quality of frontend development within their organizations.


As companies strive to deliver exceptional user experiences and navigate the evolving landscape of web technologies, the role of a senior frontend engineer has become increasingly critical. Senior frontend engineers are experienced professionals who possess a deep understanding of frontend development and play a crucial role in shaping the technical direction of projects. In this article, we will explore the expectations placed upon a senior frontend engineer in terms of skills, responsibilities, and leadership qualities.

The Expectations of a Senior Frontend Engineer - Skills and Responsibilities


Continuous Integration and Continuous Deployment (CI/CD) has become a crucial practice in modern software development, allowing teams to automate the building, testing, and deployment of applications. With the help of powerful tools like GitHub Actions, developers can streamline their development workflows and ensure the reliability and quality of their codebase. In this article, we will explore the basics of CI/CD, how GitHub Actions can be leveraged, and the importance of automated tests in the CI/CD pipeline.

## Understanding CI/CD

CI/CD is a software development approach that involves integrating code changes frequently into a shared repository, running automated tests, and deploying applications to production environments in an automated and continuous manner. The goal is to catch issues early, reduce manual errors, and deliver software faster and with greater confidence. The CI/CD process typically consists of the following stages:

1. **Code Integration**: Developers regularly push their code changes to a shared repository, ensuring that the latest changes are integrated into the codebase.

2. **Build and Compilation**: The CI/CD pipeline automatically builds and compiles the application, generating executable files or artifacts.

3. **Automated Tests**: Automated tests, including unit tests, integration tests, and end-to-end tests, are executed to validate the functionality and quality of the application.

4. **Deployment**: If all tests pass, the application is deployed to various environments, such as staging or production, using a consistent and repeatable process.

5. **Monitoring and Feedback**: The deployed application is continuously monitored, and feedback is provided to the development team for further improvements.

## Leveraging GitHub Actions

GitHub Actions is a powerful workflow automation tool provided by GitHub. It allows developers to define custom workflows using YAML configuration files that specify the steps to be executed in response to specific events. Here's how GitHub Actions can be leveraged in a CI/CD pipeline:

1. **Workflow Definition**: Create a workflow file (e.g., `.github/workflows/main.yml`) in your repository, defining the triggers, steps, and conditions for your CI/CD process.

2. **Event Triggers**: Specify the events that trigger the workflow, such as pushes to specific branches, pull requests, or scheduled intervals.

3. **Workflow Steps**: Define the steps that should be executed in the workflow, such as cloning the repository, installing dependencies, building the application, running tests, and deploying to different environments.

4. **Environment and Secrets**: Utilize GitHub Actions' environment variables and secrets to store sensitive information like API keys or credentials securely.

5. **Workflow Execution**: GitHub Actions will automatically execute the defined workflow when the specified events occur, providing real-time logs and feedback on the execution.

## Importance of Automated Tests

Automated tests play a crucial role in a robust CI/CD pipeline. They provide confidence in the quality of the codebase, help identify bugs or regressions, and allow.

## Summary

CI/CD, powered by tools like GitHub Actions, has become a fundamental practice in modern software development. It enables teams to automate the integration, testing, and deployment of applications, resulting in faster and more reliable software delivery. GitHub Actions provides a flexible and customizable platform for defining workflows that encompass various stages of the CI/CD process. By leveraging GitHub Actions, developers can streamline their development workflows, trigger actions based on specific events, and automate the building, testing, and deployment of their applications.

Automated tests are an integral part of a successful CI/CD pipeline. They ensure the functionality and quality of the codebase by automatically validating its behavior through unit tests, integration tests, and end-to-end tests. By catching issues early in the development process, automated tests help reduce manual errors and provide confidence in the stability and reliability of the application. Integrating automated tests within the CI/CD pipeline allows for faster feedback loops and faster identification of issues, enabling teams to iterate and improve their codebase efficiently.

By adopting CI/CD practices, utilizing GitHub Actions, and incorporating automated tests into the workflow, development teams can streamline their development processes, increase code quality, and deliver software with greater efficiency and reliability. These practices contribute to improved collaboration, faster iterations, and ultimately, enhanced user experiences.


CI/CD, powered by tools like GitHub Actions, has become a fundamental practice in modern software development. It enables teams to automate the integration, testing, and deployment of applications, resulting in faster and more reliable software delivery. GitHub Actions provides a flexible and customizable platform for defining workflows that encompass various stages of the CI/CD process. By leveraging GitHub Actions, developers can streamline their development workflows, trigger actions based on specific events, and automate the building, testing, and deployment of their applications.

CI/CD Basics - Streamlining Development with GitHub Actions and Automated Tests


## Introduction

Feature flagging is a technique that allows developers to control the availability and visibility of specific features in an application. It has become an essential practice in modern software development, enabling teams to release new features gradually, test them with specific user groups, and easily roll back changes if needed. In this article, we will explore frontend feature flagging, its benefits, and how it can be implemented effectively.

## What is Frontend Feature Flagging?

Frontend feature flagging involves selectively enabling or disabling features within the user interface (UI) of a web application. By leveraging feature flags, developers can control the behavior of their frontend code based on various conditions, such as user roles, A/B testing groups, or specific environments. This allows for a granular control over feature releases and reduces the risk of introducing bugs or negatively impacting user experience.

## Benefits of Frontend Feature Flagging

### 1. Gradual Feature Rollouts

Feature flagging empowers development teams to release new features incrementally. By initially enabling features for a small subset of users, developers can gather valuable feedback and detect potential issues early on. Gradual rollouts also help in managing server load and ensuring a smooth user experience, as changes can be carefully monitored and scaled as necessary.

### 2. A/B Testing and Experimentation

Frontend feature flagging plays a crucial role in A/B testing and experimentation. By dividing users into different groups and enabling specific features for each group, teams can measure the impact of changes and make data-driven decisions. This iterative approach allows for the optimization of user experience, conversion rates, and overall product performance.

### 3. Hotfixes and Rollbacks

In the event of a critical bug or performance issue, feature flagging enables quick hotfixes and rollbacks. By toggling off a problematic feature or rolling back to a stable version, developers can mitigate the impact on users and swiftly address the issue without the need for a full application deployment. This flexibility reduces downtime and improves the reliability of the software.

### 4. Continuous Integration and Delivery

Frontend feature flagging seamlessly integrates with modern CI/CD (Continuous Integration and Continuous Delivery) pipelines. By incorporating feature flags into the development workflow, teams can automate the process of enabling or disabling features based on predefined conditions. This promotes a more efficient and reliable release process, allowing for faster iterations and shorter time-to-market.

## Implementing Frontend Feature Flagging

Implementing frontend feature flagging requires a combination of proper tooling, backend infrastructure, and well-defined processes. Here are some key considerations:

### 1. Feature Flag Management Tools

Choose a feature flag management tool that aligns with your team's requirements. There are numerous options available, such as LaunchDarkly, Split, and Flagsmith, which provide robust APIs, UI dashboards, and SDKs for various programming languages.

### 2. Granular Feature Flag Configuration

Define feature flags at a granular level to gain fine-grained control over your frontend features. This allows you to enable or disable specific parts of your application based on user roles, geographic location, user attributes, or any other relevant conditions.

### 3. Testing and Validation

Thoroughly test your feature flags to ensure they work as intended and do not introduce any unexpected issues. Use automated testing frameworks, conduct QA (Quality Assurance) processes, and consider conducting staged rollouts to verify the behavior of new features in different environments.

### 4. Monitoring and Analytics

Implement monitoring and analytics capabilities to track the performance and usage of your feature flags. This data can help you make informed decisions about feature stability, adoption rates,


Feature flagging is a technique that allows developers to control the availability and visibility of specific features in an application.

Frontend Feature Flagging - A Powerful Tool for Controlled Deployments


## Introduction

The Rant House project is a product that allows users to share their thoughts and ideas with the world.

It gives the user a Q&A experience where they can send messages to a target audience anonymously, or as a guest, or as themselves publicly.

## Concepts:

1. **Target Audience** - Select your circle of friends/acquaintances to message and can be responded to. ![](/cms/portfolio/rant-house/rant-form.png)
2. **Unique user URL with multiple user options** - Each user gets a custom shareable link (e.g. [https://rant.house/PeCrio](https://rant.house/PeCrio)) for people to message them as a guest without an account, or as a user anonymously or as themselves. ![](/cms/portfolio/rant-house/guest-rant-page.png)
3. **Feed management** - Divided into three sections (Requests, Answered and Sent), you can choose to delete or respond to messages sent to you. ![](/cms/portfolio/rant-house/rant-house-profile-page.png)
4. **Onboarding** - Account creation is as simple as signing in with your X (formerly Twitter) account.

## Links

- [Live project](https://rant.house)


Rant House is a Q&A platform where people can send message to a target audience anonymously, or as a guest, or as themselves publicly.

Rant House


## Introduction

Easily bootstrap your landing page website or any web view that requires showing infographic displays with descriptive texts and scrolling animations.

I created a react library for other developers to quickly setup a custom scrolling animated story-like trail listing items/features for their websites.

## Major Technologies and design system used:

- ReactJS
- TailwindCSS
- Typescript

## Links

- [NPM package](https://npmjs.com/package/scrolling-features-react)
- [GitHub](https://github.com/PeCrio/scrolling-features-react)


Easily bootstrap your landing page website or any web view that requires showing infographic displays with descriptive texts and scrolling animations.

Scrolling Features package


## Introduction

Checkout.com Fraud detection is a product that is focused on maximizing acceptance rate while mitigating/blocking fraud on payments processed for merchants. It provides custom rule builders, risk strategies, machine learning capabilities, as well as other tools for effectively accomplishing this goal.

I have been working with the Fraud detection team since 2022 in improving and adding more features to the product offering which in turn aid the successful delivery of the [Fraud detection Pro version](https://www.checkout.com/resources/featured-content/protect-revenue-and-build-frictionless-payments-flows-with-fraud-detection-pro).

## About checkout.com

Checkout.com, is an international financial technology company which processes payments for other companies. Founded as Opus Payments in 2009, it is headquartered in London, United Kingdom. It had a valuation of **$40 billion USD** in 2022, making it the most valuable European fintech startup.

### Helpful links

- [Fraud Detection product page](https://www.checkout.com/products/fraud-detection)
- [Company website](https://www.checkout.com)


Checkout.com Fraud detection is a product that is focused on maximizing acceptance rate while mitigating/blocking fraud on payments processed for merchants. It provides custom rule builders, risk strategies, machine learning capabilities, as well as other tools for effectively accomplishing this goal.

Checkout.com Fraud detection


## Introduction

DoraiUI is an accessible, unstyled, open-sourced and fully functional react component library for building design systems.

I created a starter app boilerplate that is setup with the following technologies:

## Major Technologies and design system used:

- NextJS
- TailwindCSS
- Typescript
- DoraiUI

## Links

- [DoraiUI Website](https://www.dorai-ui.com)
- [GitHub](https://github.com/watife/dorai-ui)


DoraiUI is an Accessible, unstyled, open-sourced and fully functional react component library for building design systems.

Dorai UI Starter Template


## Problem statement

- **As a merchant**: when acquiring multiple outlets or expanding to multiple other locations, managing multiple online stores across different platforms can become tidious and difficult to manage.
- **As a customer**: I may want to shop from my favorite merchant on a singular platform, track my orders and my details, get updates when a new location opens up and easily shop from there for myself or for a friend close-by.

## Solution

I have built a work-in-progress multi-store e-commerce proof of concept app that can allow a merchant manage their products/inventory, orders, accept payments, as well as other operational settings while the customer can create an account or login, manage their cart, account details and order history.

The minified version can be found on this [live link](https://chop-life-plug.vercel.app).

### Major Technologies and design system used:

- TailwindCSS
- NuxtJS
- Typescript


I built a multi store e-commerce app that can allow a user shop across multiple locations of a merchant as a proof of concept.

Multi store e-commerce app


## Introduction

This is an abstract simple one-page explainer website that talks about the business and process aimed at getting the highest possible potential customer conversions with minimum clicks or scrolls.

I designed it as an accessible slideshow presentation for the user to easily scroll, tab, or click through to quickly get the messaging and get onboard if interested.

## About PeCrio

PeCrio is a tech consultancy company that design and develop high quality websites and applications tailored to the client objectives to increase efficiency in job delivery and optimize processes.

### Links

- [PeCrio Website](https://www.dorai-ui.com)


PeCrio is a tech consultancy company that design and develop high quality websites and applications tailored to the client objectives to increase efficiency in job delivery and optimize processes.

PeCrio Consultancy Website


## Introduction

A customer feedback demo application for collecting reviews for a product after a successful purchase.

## Major Features

- View all comments/feedback/reviews from customers on a product.
- Customer can create feedback by entering their name, email, rating and comment
- Display product performance based on the reviews by showing a graphical preview in a chart format and the percentage of reviews above 2.

## Upcoming features

- Paginate records for reviews.
- Application logging with tools like [Sentry](https://sentry.io) and [Hotjar](https://hotjar.org)
- [Husky](https://husky.org) for running pre-commit tests before pushing code to SCM's like [GitHub](https://github.com)

## Preview

This applicaiton is currently deployed on [vercel](https://vercel.com), a demo preview can be seen on this [Preview Link](https://product-review-and-management-demo-app.vercel.app)

- [Website](http://product-review-and-management-demo-app.vercel.app/)
- [GitHub](https://github.com/PeCrio/product-review-and-management-demo-app)

## Tools and technologies

Below are the main tools and technologies used in this project:

- [NextJS](https://nextjs.org) - UI Framework
- [ReactJS](https://reactjs.org) - Frontend UI library
- [Cypress](https://cypress.io) - E2E, integration and unit tests
- [ChakraUI](https://chakra-ui.com) - Design system, theming and accessibility
- [ESLint](https://eslint.org) - Linting
- [TypeScript](https://typescriptlang.org) - Type checking
- [Formik](https://formik.org) - Form validation
- [Axios](https://axios-http.org) - HTTP requests
- [Chart.js](https://chartjs.org) - Data representation package (e.g. Charts, graph)
- [Mongoose](https://mongoosejs.com) - NoSQL Database
- [Google Analytics](https://analytics.google.com) - Metrics and usage
- [CircleCI](https://circleci.com) - Continous Integration
- [Docker](https://docker.com) - Containerisation

## Getting Started

1. **Setup environment variables**
   - Create a `.env` file at the root directory of the project
   - Copy the content of the `.env.example` file onto it
   - Update the values as required. e.g. `API_URL=http://localhost:3000/api`
2. **Development and Testing**

   **Notes**

   > Before proceeding with this section, kindly ensure that your terminal window is open on the root directory of the project, you can use the below helper commands to check/confirm:

   - `cd` command to change directory e.g. `cd path/to/project`
   - `pwd` command to check your "print working directory"
   - `ls` command to show the content of your current directory

   By default the `dev` script runs on port `3000`, if you have another application making use of that port on your machine, you can either terminate that process/application or use the `--port` flag where necessary to change the running port, kindly remember to update any relative script found on the project e.g. the `package.json` and `Dockerfile`.

   **Running locally**

   ```bash
   # Step 1: Install dependencies
   $ npm install

   # Step 2: Run Nextjs and cypress in interactive mode concurrently
   $ npm run develop
   ```

   **Extra notes**

   Other commands can be found on the `package.json` file in the root directory of the project.

   **Viewing test coverage**

   > Please note that you need to have run the cypress tests at least once before a report can be generated which would be located here: `coverage/lcov-report/index.html`, you can directly open it by navigating to the folder or via your terminal with the below command:

   ```bash
   $ open coverage/lcov-report/index.html
   ```

   **Using Docker**

   > Before proceeding with the below command, ensure [Docker](https://docs.docker.com/get-docker/) is installed and running on your machine.

   ```bash
   # Runs Nextjs within a docker container
   $ docker-compose up
   ```


A customer feedback demo application for collecting reviews for a product after a successful purchase.

FAVORITE TOOLS

FEATURED PROJECTS