Sunaar - A full, Full-Stack Project

TechAtikiN — Fri, 02 Feb 2024 08:55:52 +0000

I am super excited to share with you all a project that I have built recently: Sunaar✨
Sunaar focuses on managing the typical business requirements. Specially in my project I have focused on Gold Businesses.

Why, what's the motivation?🚀

To be honest, the major reason I started this project was to have a decent Full-Stack project in my portfolio.. So the initial phase went into gathering what kind of project I want to build, what sections/modules will be there, and after spending a lot of time on Behance, Dribbble and much more, I came to a conclusion of building a modern and unique Business Dashboard from scratch.

What's the project about?🚀

As the idea suggests that it's a Business Dashboard, it consists of the major nitty-gritty of businesses. To name a few, the system comprises of Customer Management, Purchase-Orders handling, Analyzing the sales and other business metrics.

What you can expect from the system is,

Dashboard: This showcases sales, orders, current commodity prices, business metrics and company insights.
Customers: It enables efficient data management with CSV downloads, debounced search, server-side pagination, and a user-friendly form for creating customers with validations and an intuitive UI/UX design.
Purchase Order: This offers a sorted listing with essential details, efficient search and navigation, detailed order information and an intuitive order creation process for a streamlined UI/UX.

Speaking about the project

From the logical point of view, I had gathered all the sections of customers, orders and others that I'll have in the system. Simultaneously, I had designs(more like wireframes) ready in my notebook.

Frontend📈

So initially I decided to start making the Frontend(my Strong Suit :P) of the system.
I built the frontend of the system using Next.js(best React.js framework imo) comprising of all the latest features of App directory, Server actions, layouts and much more. I really appreciate what Next.js offers while building something from scratch.

Styling🔮

For styling, I used Tailwind CSS and Shadcn UI to give Sunaar a professional and consistent looking UI/UX. Initially I faced a lot of ifs and buts while designing my system, but as I went forward building the UI components I started seeing how the UI was coming together into a nice-looking interface overall.

Backend⚙️

Speaking about the elephant in the room..

I'd say building backend of the system was quite inspiring for me.(?)
I've been learning Go for quite some time now, and wanted to build something in it. Upon comparing few frameworks of Go, I felt that Fiber and Gin are two quite popular ones. I had built few small projects in Gin so I went with the most obvious one..Fiber :P.

I really liked Fiber, it was (not so) easy to work with. Building the backend did take more efforts and time and there were few moments when I thought of switching the backend to Node.js(easy way out). Spoiler.. I didn't switch xD.

So yes, that is the most briefly I can explain it.

More about the project Sunaar Github

Challenges🎌

Making an efficient Design system catering Typography, Theme, fonts and colors.
Focusing on making an optimal system.
- Addressing small details like generating invoice, exporting data
- Server Side Pagination instead of Client Side
- Consistency in UI and development
Writing modular and readable code
Building alongside learning

Final Notes🎈

If you have read until here, thank you for your time and patience!✨

Building the system was a difficult task only until it was built.

So, while developing something, or even pursuing something, if you think it's hard, time-consuming but if you feel it's worth it then just give it a shot and try your best. If it fails then you GET an experience, and if it succeeds, POST a blog about it, I'd love to read :P.

DEV Community: TechAtikiN