 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 product I work on at Warp development is a photo souvenir platform centred around a react native app which tourist attractions use to take images of their visitors which they can sell to their attractions. 

While an incredibly agile (especially when compared to other industry solutions) we needed a solution that would allow our attractions to use any camera system(s) they wanted (i.e. DSLRs etc.) while being able to take advantage of the rest of our platform.

In 5 days I ended up building an electron app which mimicked a lot of our mobile app (without the camera functionality) that:

Allowed attractions to upload client images from any camera.

Opened up the opportunity to integrate custom print functionality opening the our attractions up to being able to sell both physical and digital photo souvenirs.

Gave our client the ability to reach a wider range of attractions and new customers.

 This is a closed source product so I am unable to share the code and some of the details about this project but I would be more than happy to hop on a call

Photo Souvenir Desktop App

React.js

Redux

Tailwind

Node.js

Electron

.Net

I was approached by a real estate firm who were in need of a real estate platform that:

Could be hosted for as cheap (or free) as possible.

Would sync with their existing primary real estate marketing platform (Property24).

Would have profile pages for each of their agents that they could link to when marketing.

Make it easy/possible for potential buyers to get approvals (credit checks etc.) when they enquire about a listing.

Would have a easy-to-use content authoring backend their admin could use to add new team members or edit properties.

A Next js and Sanity.io powered web app that had a web separate web-scraper mini web-app (hosted on Railway) that they could use to sync listings from their real estate listing platform (Property24).

Full stack Next.js real estate platform

Next.js

PostgreSQL

tRPC

TypeScript

Sanity

Approached 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 acquire clients who need custom furniture.

A fully functional eCommerce site I built using the phenomenal T3 stack with a PostgreSQL database that:

Allows customers to view items on the store and purchase various kinds of wood from the shop.

Allows customers to request custom furniture quotes from the carpenter.

Allows the carpenter the ability to create, update and edit products across the store.

Allow the carpenter to update and manage customer orders.

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

Framer Motion

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.

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

Express.js

Bootstrap

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.

Our task was to come-up with a way to make the process of selling a property more convenient while still having all the guidance that comes with having a dedicated realtor.

A React native mobile app that allows home sellers to:

Get online property evaluations from Future Agent's team of trusted professionals. 

Set and manage personal viewing schedules for the property.

Communicate with (an optional) Future Agent realtor to get help throughout the process.

Manage the transfer process of their property from the palm of their hands (#NoMoreEmails)

React Native mobile app for property sellers

Firebase

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

A programming language from Microsoft used for building everything from games, desktop and mobile applications, backend services just to name a few...

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

An awesome full-stack Javascript framework that's built on the lessons the ecosystem learnt over the last 2(ish) decades that is a dream to work with.

Sveltekit

A cross platform Javascript framework which lets developers build desktop apps with the same beloved language and tech they use on the web.

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

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

MongoDB

An all* batteries included fullstack framework from Microsoft built to help builders build large scalable software solutions using C# (or F#).

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 developer.

Featured Projects

Ba Real Estates — Full stack Next.js real estate platform

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

Inteligets — Fullstack MERN stack e-commerce site

HS Photo Company

Mortgagely

Future Agent

My career highlights.

Warp Development - Full-Stack 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.