Building the Front-End for SoPlugged (a platform for Black-owned businesses)

#nextjs #javascript

Hello! Brief introduction: I'm Benaiah, an Ottawa-based Full-Stack developer. Nice to meet you!

TL;DR: I did some freelance work for SoPlugged (a platform to find black-owned businesses in Canada). Check it out here.

I wanted to document how I built this platform, and what tools I used.

Front-end Library

React, easy! Being very conversant with React, and enjoying the benefits of easy state management made this an easy choice.
However, when the all-too-familiar issue of SEO came up, especially for the landing page, I made the executive decision to migrate to Next JS (a.k.a Server-side React).

Styling

Again, for this, choosing what I was familiar with was key. And, that was Material-UI. I've been using Material UI for a while now, primarily because of the components they provide 'ready-made'. I was a little worried about performance based on certain articles I had come across, but we'll discuss this in a subsequent article.

Back-end

I didn't have to handle this. A Ruby developer created the API and database using Rails.

Search Functionality

ALGOLIA.
Front-end search can easily be implemented by adding an input and querying your database on every keystroke, or when the user stops typing (to reduce how many times you'd have to hit the database).
This is what I started off with, till I came across Algolia.
Simply put, Algolia is VERY good when it comes to search. When configured, it routinely indexes your database to get all new information, so searches are hitting Algolia instead of your database directly. This results in a faster and more-efficient search experience.
You also get ready-made and easily customizable widgets for your front-end.

Form Handling

Forms are a critical aspect of a user's experience on a website, and so, should be properly created and easily navigated by the user.
I usually opt for react-hook-form to properly handle form validation (however complex), displaying error messages and handling other events.
But, I had to switch to Formik when I decided to create a multi-step format. Simply because of the limitations I ran into when managing the form's context, and accessing certain methods from child components.
It is possible with React Hook Forms, but much easier with Formik.

These are the major building blocks of the SoPlugged website. Feel free to leave a comment if you have any further questions.

Till next time!