Hi, I'm Mfonobong Peter

A Software Engineer focused on building the frontend and backend of websites that leads to the success of the overall product

Projects

About Me

Here you will find more information about me, what I do, and my current skills in terms of programming and technology.

Get to know me!

I'm a Software Engineer with a passion for building up beautiful and responsive websites. I have worked on a few projects that demonstrates my ability to make use of the concepts I've learned. You can check them out in the Projects section.

I enjoy sharing and interacting with people in the Web Dev world. I believe that this helps me to grow and learn in this field. You can connect with me on LinkedIn and Twitter where I share my experiences and thoughts on various topics related to Web Development.

I'm open to Job opportunities where I can learn, share ideas and work with like-minded peole. If you have any good opportunities that matches my skills and experience, please don't hesitate to contact me.

Contact

My Skills

HTML

CSS

SASS

JavaScript

TypeScript

React

Next.js

Git

GitHub

Python

Django

Flask

SQL

Tailwind CSS

Responsive Design

Professional Experience

Here you will find some professional work I engaged myself in order to build my skills and increase my experience level.

GOAPPiTOct 2023 - Jan 2024

Software EngineerFort Worth, Texas, United States

Utilized Flask to establish seamless connectivity with the Cargowise system on behalf of a client.
Utilized Django and JavaScript to revamp and modernize the database structure of an invoice form for a client, incorporating removal of outdated fields, addition of new fields, and modification of existing ones.
Developed a Python script utilizing Paramiko to establish SFTP connectivity, enabling the secure retrieval of files from a remote server to a local directory, along with the capability to delete files remotely.
Leveraged Pandas to create a Python script for formatting an Excel file into the desired layout.
Crafted a Python script to extract data from a directory of text files, dynamically generating URLs for scraping data from corresponding websites.
Engaged in the collaborative process of peer reviews by submitting concise and focused pull requests, aimed at improving code quality, upholding best practices, and fostering shared learning among team members.

JavaScriptPythonFlaskDjangoBootstrap

GOAPPiTMay 2023 - Oct 2023

Frontend EngineerFort Worth, Texas, United States

Successfully redesigned the UI of a client's website, implementing HTML and Tailwind to rewrite the code for full responsiveness, and integrating a functional sidebar menu.
Demonstrated proficiency in employing React and Tailwind to completely overhaul the frontend of the company's website.
Contributed valuable insights and support in the strategic planning of UI/UX enhancements for the company's website.

JavaScriptReactTailwind CSS

DealdriveApril 2023 - May 2023

Frontend DeveloperNigeria

Utilized ReactJS to architect dynamic and responsive frontend experiences tailored to meet clients' unique requirements, ensuring optimal performance and user engagement.
Engaged directly with the design team to analyze and optimize user interface (UI) elements, ensuring seamless integration of design aesthetics and functionality for clients' websites.
Implemented a WhatsApp widget into clients' websites, empowering potential customers to initiate swift communication with the client, and fostering faster and more direct engagement opportunities.

JavaScriptReactTailwind CSS

Volunteer Experience

Here you will find some voluntary work I engaged myself in order to build my skills and increase my experience level.

George's WorkMarch 2023 - April 2023

Frontend DeveloperNigeria

Utilize ReactJS and Tailwind CSS to convert Figma mockup designs into codes
Created React components for the landing page, and authentication pages such as Login, Sign Up, and Forgot Password.
Utilize Tailwind CSS to make all the pages responsive across multiple screen sizes.

JavaScriptReactTailwind CSS

Projects

Here you will find some of the personal projects that I created from scratch based on my current skillset. Click on the live link to see the live version of the project. To find out more, click on More Details

Laon

Laon is an e-commerce platform that targets consumers wanting to purchase mobile devices and accessories at affordable prices. I took inspiration from sites such as Amazon, Jumia and Mi to create an amazing UI/UX. I made use of APIs such as Commerce js for the backend of the site, Stripe to handle payment, and Firebase to handle login authentication.

JavaScriptReactTailwind CSS

Live Link

Laon

2022

Below, you'll discover additional details about my process in building Laon.

Integrated CommerceJS API to manage backed operations for the e-commerce site, including product fetching, cart management, and cart refreshing.
Implemented a skeleton framework to enhance user experience during page reloads and compensate for CommerceJS lag.
Incorporated Stripe payment gateway into CommerceJS for seamless payment processing.
Integrated Firebase for secure login authentication on the website.
Implemented React Context for automatic user logout after one hour of inactivity.
Utilized Tailwind to ensure responsive design across various screen sizes.
Employed React Context for efficient state management across multiple components.
Integrated React Router to facilitate routing functionalities within the application.
Developed custom hooks to efficiently reuse logic across different React components.
Successfully implemented React Forms to streamline and manage form submission processes.
Deployed the e-commerce site on Netlify and established continuous deployment practices.

Live Link GitHub Link

BetterShotz Clone

I re-created the homepage of BetterShotz website because I got attracted to their beautiful UI. It was a great experience for me to build the entire frontend.

JavaScriptReactTailwind CSS

Live Link

Mfon.ai

This project originated from a take-home test given by a company during my job interview process. I chose to include it in my portfolio due to its impressive UI design and rich features. Leveraging the Claude API, I developed an application resembling ChatGPT.

Next.jsTypeScriptTailwind CSS

Live Link

Mfon.ai

2024

Below, you'll discover additional details about my process in building Mfon.ai.

I made use of Next.js 14 app router for this project
Utilized Tailwind to ensure responsive design across various screen sizes.
Employed React Context for efficient state management across multiple components.
Implemented scroll-down functionality on a button to allow users to immediately scroll down to the most recent response when scrolling up.
I leveraged route handlers in Next.js 14 to write server-side code, focusing on implementing logic for a POST request to the Claude API.
Deployed the site on Vercel

Things to Note

In the request body, the max_tokens parameter is set to 100 to limit the number of tokens returned by the Claude API. This is because I'm currently using the free tier of the Claude API and want to avoid exceeding my usage limits for this personal project
Setting max_tokens to 100 means that the Claude API will not return the complete answer if the token limit is exceeded. In such cases, an error message stating "Max token reached. Please simplify your prompt." will be returned. Seeing this error message shouldn't cause concern, as there's nothing wrong with the application.

Testing

I'm still in the process of implementing unit and integration tests using React Testing Library, Jest and Mock Service Worker

Future Plans

Implement streaming of the response from the Claude API instead of returning it all at once.
I'm considering saving the response in a database to persist the data upon reload.

Live Link GitHub Link

Lica Test

This project was as a take-home test for a job interview. I included it in my portfolio for its impressive UI design and features. Using Clerk and the LinkedIn API, I built an app that lets authenticated users post to their LinkedIn accounts through my platform.

Next.jsTypeScriptTailwind CSS

Live Link

Lica Test

2024

Below, you'll discover additional details about my process in building Lica Test.

I made use of Next.js 14 app router for this project.
Utilized Clerk to handle authenticating with LinkedIn.
Utilized LinkedIn API to enable users to make a post (with an image) to their LinkedIn profile.
Utilized Tailwind to ensure responsive design across various screen sizes.
Employed React Context for efficient state management across multiple components.
Deployed the site on Vercel.

Things to Note

If you look at the README.md in the GitHub repository, you would notice two sections: The Process and Updated Process. In these sections, I gave a more detailed summary of the process I took when building the project, the challenges I faced, and how I overcame them.
The main purpose of the take-home assignment was to work on two distinct features:
- Users should be able to log in with their LinkedIn accounts.
- Users should be able to make a post (with an image) to their LinkedIn profile.
As a result of this, if you click on the other pages, you will be shown a coming soon... message. It is important to note that it is only the Media Upload button and the Publish button that works on the dashboard page, as those were needed for the features above. In the future, I may work on some other functionalities.

Finally

The take-home assignment was aimed to recreate parts of Createful app. This is why I made use of their logo and improved the UI of their dashboard.

Live Link GitHub Link

MP. Blog

The project aims to implement JWT authentication, with a frontend blog application developed alongside. Drawing inspiration from Stripe's authentication pages, I've replicated their design. Note: Still in development, no live link yet.

ReactTypeScriptTailwind CSSPythonFlaskPostgreSQL

MP. Blog

2024

Below, you'll discover additional details about my process so far in building MP. Blog.

I employed the PyJWT Python library to implement JWT authentication.
I utilized Peewee as the ORM for PostgreSQL.
I leveraged psycopg2-binary as the PostgreSQL database adapter.
I securely stored the secret key used for encoding the JWT token and other database credentials in a .env file. I utilized the python-dotenv Python library to load these environment variables into the Python environment.
I incorporated hashing and salting techniques to securely store passwords in the database before saving them.
I utilized the Flask-CORS Python library to enable cross-origin resource sharing (CORS), allowing the frontend client to access and share resources from the server.
Utilized Tailwind CSS in cloning Stripe's authentication pages ensuring full responsiveness.

For Clarity: The client is the Frontend, while the server is the Backend

GitHub Link (Client)GitHub Link (Server)