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, 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 asking him to give a yearly analytic each Dec of every year, so he was always dealing with more than 3000 document.

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 webApp 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 a result, and after consulting with 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.

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.


Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Upwork achievement

Nominated in top 10 web developers portfolios

Its a big pleasure to get my portfolio in the best 10 web developers portfolios in @upwork . Is a big work done here and it’s just the half of the way, and big thanks to all clients that got me a chance to grow my portfolio. ✨🙌
Othmane N. white logo

the mind that opens to a new idea never returns to its original size.