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