Develop a web application solution for B2B issue.

As a full-stack developer, I’ve been working as a freelancer for a few years, and my major business strategy is to build long-term relationships with each client I’ve worked with, and provide the best consulting in web and full-stack development, and care about making each customer happy.

One of my clients had a live streaming platform and was serving a large number of clients, including visitors from tv shows, podcasts, and live events. I was constantly trying to fix any bugs or errors in his platform, as well as protect the payment side.

But the client was always having small tweaks to make analytics for his clients, and he was making analytics as sheets and documents and sending it to each client monthly “+100 client” in emails, which was a lot of work because he needed to prepare hundreds of sheets and emails, and the clients got a boring user experience checking their monthly analytics, and they also asked him to give a yearly analytic each Dec of every year, so he was always dealing with more than 3000 documents.

So there was always a question on his mind about how to fix the problem, and one time asked me to meet for an urgent meeting, and we went over this whole complex process of serving analytics to the clients and asked “why not, we automate it?”, or make a web application for it.

So I got the concept, and I also saw how easy it would be to create a web app where the user could log in and view his monthly and prior month’s statistics.

So, in this blog, I’ll walk you through the steps I took to create the e360tv dashboard.

Step 1: An overview of the project

I received a notion of what the customer wanted, and the major point was that we needed to develop something for B2B, with a high rate of UX, that easy to maintain, and that one of the freelancers could easily enter data.

Step 2: Creating an application’s wireframe and structure

We spent two weeks on this step deciding on the web application’s design, the tech stack we’d utilize, and several brainstorming sessions (“Even I’ll work on it alone LOL”).

So I made a software structure and I got what we will need as result, and after a consulting with So I made a software structure and got what we’ll need as the result, and consulting the client, we decided to make LAMP(python) as a stack of our application, focusing primarily on Django as a framework, but after a few days, the client asked for something that would make the admin panel to enter data something beautiful and large scale, so we switched to using Next.js with Node.js on the backend “Strapi as Headless CMS”, So we made a deal on this point, and it turned out to be a brilliant decision, creating a large-scale graphql API, a panel where we can enter data.

Step 3: The application UI/UX design

After sketching a wireframe, I chose to create a user interface with a high rate of UX “Something clean and minimal” as a consequence of the UI/UX design, and the customer liked it right away and realized that his vision was turning into a real solution.

Login Screen UI/UX Design
Dashboard Screen UI/UX Design
Dark mode option Screen UI/UX Design

Step 4: The development process

After the client has approved everything, I’m in the process of turning the idea and UI/UX design into a real solution. I started with a local installation of strapi with mysql migration, then started designing the API and making some functions to upload the images to an AWS bucket, and then started developing the web application with next. React was my all-time greatest frontend framework as a full-stack developer and javascript expert so his SSR framework made the proccess easier. He also used redux to handle states, and reduced API calls for better speed. Finally, we deployed it on a production server, and it was my pick “Vercel”.

Step 4: Release

After a month, I was able to complete the development process, even my timesheet was full at the time. We released a first demo for the web application, and the client was impressed by the results, even though we encountered a few bugs along the way, but the solution was up and running, and a major problem was solved, saving time, money, and the client’s user experience.

Finally, as a freelancer, you should constantly look for a solution and a long-term relationship with your customer rather than focusing on how much money you can make.

And, I’d want to thank the founder of e360tv for giving me the opportunity to work with him, as well as the developers of Next.js, Vercel, and Heroku for creating a fantastic framework and tools that have greatly aided our development careers.

Thanks

--

--

--

Hello! I’m othmane, I am a full-stack developer with love of UI/UX designer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Top Track Order Extensions in Magento2

Getting started with Ansible using Vagrant

Using Change Streams in MongoDB

Shell Scripting basics

Using Semver for Docker Image Tags

How to be so good that they can’t ignore you? The Software Engineering version

Best Free ER Diagram Tools in 2020

Simplicity over Complex

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Othmane N.

Othmane N.

Hello! I’m othmane, I am a full-stack developer with love of UI/UX designer

More from Medium

Significance of Progressive Web Apps for E-commerce business development

Creating and managing landing pages with React and GrapesJS

How to use next/image with cloud providers

Building a Todo App using React.js and Cloud Firestore

Firebase console