 package and I highly recommend going through their quick start example if you’re in a hurry.

This article shares my convention of creating custom typed components that deal with Portable text (in my case from my 

Goal: Create a custom component that parses portable text and custom portable text types into premade components or tailwind styled html elements.

https://www.npmjs.com/package/react-portable-text

Creating serializers for custom blocks that may need to recursively call this portable text parser component. 

Lets say we have a text image block like the image above where:

We have an image (which needs to be transformed separately.

Description text which needs to be parsed back to this component (since it contain headings, lists, images etc.

Hope that that helps but in case something is missing here I highly recommend going through the react-portable-text documentation here: 

How to easily work with Portable text in React

Programming is hard, building complex applications is really hard and building complex applications that can scale and stay resilient, easy to update and work with is really why programmers are so important. The MVC (Model. View. Controller) architecture is a software architecture pattern that breaks up any application into 3 separate but more manageable parts; the Model, the View and the Controller.

PS: I use very obscure but visual examples in a lot of my writing because I am very stupid and very visual examples help me learn gud.

To explain MVC, Imagine a book library where you could request any book or story and get a private improv theater show produced for you telling you the story or about the book. Imagine you walking into this library and being assisted by a host/hostess who’s only job is to be personable and be your guide (but one who knows nothing about the show or library books).

Lets say you request a show on Hamlet, the host/hostess would first have to go to the librarians with your request (because they are not allowed anywhere near the books) then after getting the book (in this case hamlet) they would then give it to the theater department and lead you to the theater where you would get to see the improv show.

The book Hamlet = The data you requested.

I hope that made sense to some degree but to put it in a more conventional context, applying MVC to any project is a separation of concerns convention where:

 that handles the request flow, from routing, requesting data from the model to leading the user to their requested resource/ screen. 

The controller itself never directly interacts with the data/ database or how it’s displayed

, it simply couriers the user’s request to the Model and after getting the data passes it to the View to handle the presentation of that data.

 that queries the database, handles authorization (when adhering strictly to the MVC architectural pattern) and structures the data accordingly.

 that handles the data received from the controller (via the model 

) and decides how to present UI based on that data.

Hope that my explanation helps in explaining what the M, the V and the C in the MVC software architectural pattern.

Explaining MVC for dumb dumbs (like me) 

I find that going from explaining a concept to someone and speaking down to them is a sliding very slippery slope me, so the quickest way I’ve found with any conversation that requires me to explain something to anyone is to ask them their understanding of that thing first.

With non-technical clients I’ve found this to be the most important question since it contextualizes their expectations so you can better set them.

After gauging their level of knowledge the next logical thing is to succinctly bridge their gaps in knowledge. Moreover what I find to be helpful in setting expectations is explaining search engines, SEO, SEM, social media marketing and other ways to drive leads.

For example I helped a seamstress client focus all of their efforts on driving leads through social media which helped turn their eventual website from something that wouldn’t get any traffic to an import social media auto posting and design repository tool that also allowed users to order clothes directly online if they wanted to.

If I had a JavaScript framework for every time I had a client expect a website to immediately drive massive sales shortly after being built I would give the NPM registry a run for their money. Websites without any marketing rot, any idea, product or service no-matter how great it is, means nothing if people don't find out about it. A website or store does not market itself and helping clients understand this has saved me so so so many head-aches.

After laying the ground work now it’s time to dive deep into the client’s needs (aided with their new knowledge and understanding of what a website is). You can ask questions like:

What do you want people to do when landing on your website?

How will this play into your marketing (i.e. social media) efforts?

(User stories) Lets say 3 people visit your website with three separate goals what would their goals be and results be (i.e. buying wood, contacting a supplier etc.)?

Do you intend on editing it themselves (this is a great opportunity to sell retainer services, I personally stay away from this)?

) is summarizing the prospective site (using their words and jargon as much as possible) and agreeing upon all the details, expectations and payment terms. I’d also highly recommend covering post launch support including stuff like support hours, turn around times, where they can get immediate tech support (i.e. their hosting company) etc.

This is by no means a perfect process and even after applying this I sometimes get into less than ideal situations. That being said, this checklist has helped me avoid the biggest pain points of any contract work; post launch support headaches, clients being disappointed in the lack of uptick and 

5 questions for getting a website brief out of a non-technical client

The Inteligets store quickly and easily, allows users to explore a variety of products and just as quickly create an account, purchase and pay for their order (demo uses PayPal). Post purchase and/or account creation, the store also allows users the control, view and manage their orders.

Powered by React, the entire frontend uses:
-A combination of the React-Bootstrap component library and vanilla Bootstrap to layout the UI.
- Redux and Redux-thunks to manage the all state across the product, order and user components.
- Axios as the HTTP Client to query the backend.
- PayPal to manage payments.

The store supports 2 user roles: regular customers and admins. While customers have limited permissions, admin users (using the same frontend) can:
- Create, update and delete products in the store.
- Manage users and user permissions.
- View, manage and update user orders.

The backend uses:
- Node.js and Express.js as the backend runtime.
- MongoDB for the database.
- Mongoose to enforce a consistent and predictable data structure into the MongoDB database.

The product schema structure created using Mongoose.

Click the link below to view the published Postman API documentation I created for the store.

Helping the brand scale to a new avenue and establish a presence online.

is a technology brand that sells quality “pre-loved” smart-devices and internet of things (IOT) gadgets, helping them find new homes. Their mission is to help make technology more attainable for people who wouldn’t be able to afford the luxuries of smart devices. While they specialise in acquiring and refurbishing smart devices,

 this project and store aimed to help the brand reach a bigger audience and lead them to greater sales

A self hostable, scallable and easy to use eccommerce store that:

Is easy to use all-in-one-place shop and management experience.

Is a completely self-reliant solution which doesnt rely on any third party sevices or platforms.

Fullstack MERN stack e-commerce site

React.js

Node.js

Express.js

Redux

Bootstrap

Connecting buyers to home sellers directly.

— a Cape Town based real estate firm looking to push the fairly traditional model of 

=> Agent => digital monopolistic platforms => 

 by connecting property buyers to sellers directly through inteligent use of technology

Focussed on the buyers side of any property aquisition, 

Helps buyers safely book viewings directly with property sellers.

Create legaly compient offers on properties they like.

Recieive guidance from the Future Agent team and their lawyers on offers and the aquisition process.

Give property viewing reviews that directly help sellers impove the apeal of their properties after viewings.

Full stack home buyers portal web-app

Firebase

Next.js

Tailwind

Aproached by a local carpenter and wood supplier who needed an online presence and revenue source, I needed to build a store that:

Could be easily and cheaply hosted (paying CMS hosting costs was not viable).

Would quickly and easily allow anyone to order wood or custom furniture (through offering cash on delivery as a payment option).

Could be used as a portfolio to aquire clients who need custom furniture.

My solution was a web-app based on the phenominal T3 stack and with a PostgreSQL database hosted on Vercel that would is easy to update products and projects (by virtueof the databse being hosted on Railway) that serves transactional emails through Nodemailer and Sendgrid.

Full stack Next.js and PostgreSQL e-commerce store.

PostgreSQL

tRPC

TypeScript

Framer Motion

Dr Setati during my intership at Personalized Promotions, I got a practice design and developement brief which was my first time writting PHP code. While I'm still very proud of it, I wanted to pay homage to it by using the skills I know now to build the site I saw in my original designs.

First in converting PHP code to React and Next js code.

Relooking at my designs and rebuilding the entire SCSS system to realise a design that I think 3 years later still holds up.

Next.js and Tailwind website design & development

SCSS

motgage calculator (an oxymoron I know...) that felty 

while being as efficent as any calculator on typical banking sites.

Inspired by a then recent introduction and fascination with 

 my solution was to create a lean and fluid one pager React and Bootstrap site.

React js Mortgage calculator and landing page.

Tacking an advanced front-end mentor challenge in 4 hours. 

 and a self-imposed deadline of 4 hours I set out to create a solution using the screen-shots provided by the wonderful folks at front-end mentor 💕.

With my deadline, my solution was created using Tailwind CSS (which allowed me to create the tricky layouts in time), Next js 😍 and Leaflet js with React-Leaflet for 

Next.js and Tailwind website development

Leaflet js

My original designs without any text or imagery that belongs to the original client.

Revisiting my first freelance web-dev client.

Sanctuary was born as an idea to create a blog and safe online space for women create, talk and connect together. Back in 2019 as part of a student outreach brief (when real life people and businesses get students to create projects for them that count for extra credit) I was tasked with designing their platform. 3 years later I decided to go build my original designs into a full stack application.

My task was to build the original concept captured in the designs that:

Supports product uploading, editing and moderation of comments (reviews).

Supports user accounts with OAuth support.

Supports blogs and user generated blog posts and comments.

Includes a meetup/ events portal for members.

Full stack blog + product review & community hub.

Helping a business find new ways of connecting with their customers during the pandemic.

Dropend plumbing, an established plumbing, electrical services and construction company in Cape Town wanted help in expanding their potential reach and online presence during the initial thrawls of the pandemic. 

With a 2 week turn-around time, my solution was to build a lean, easy to use and manage Wordpress site that was SEO friendly and quickly generated contact form leads for the business. 

Website design and development

HTML

Wordpress

(TypeScript remote procedure call) A JavaScript library that makes building and consuming fully typesafe Rest compliant API's  easier.

An incredible backend technology that makes it possible to use JavaScript on the backend.

A time-tested open-source relational database management system compliant with and based the SQL standard.

A Node.js framework that makes makes it easier to develop Node backends.

My primary programming language that makes up one of the core technologies of the web.

JavaScript

An awesome state management library I mostly use with React apps.

A Backend-as-a-Service (BAAS) platform powered by Google Cloud.

An open source NoSQL database that structures data in a JSON like format (making it so enjoyable to work with).

MongoDB

A JavaScript framework developed by Facebook (Meta) that makes developing user interfaces using declarative JavaScript code possible.

A superset of JavaScript I adore which helps write cleaner, more predictable JavaScript code.

A amazing React.js based full-stack JavaScript framework developed by the angels at Vercel.

Hi, I'm Tashinga, a full-stack JavaScript developer.

Featured Projects

Inteligets — Fullstack MERN stack e-commerce site

Future Agent — Full stack home buyers portal web-app

Ej-woods — Full stack Next.js and PostgreSQL e-commerce store.

Dr Setati

Mortgagely

Arch Studio

Sanctuary

Dropend

My career highlights.

Future Agent - Front-End Developer

My blog posts.

How to easily work with Portable text in React

Explaining MVC for dumb dumbs (like me)

5 questions for getting a website brief out of a non-technical client

Get in touch with me.