Crafting a Company Profile Website using NextJS
About a year ago, I took on the responsibility of crafting a company profile website for Muju. At that time, Muju was in the process of launching a mobile super-app designed for sports venue reservations, catering to both venue owners and users. Join me on this journey as we explore the key features that make Muju’s website stand out. From the home page’s warm introduction to the vibrant community on the forum, Muju’s NextJS-powered website promises an engaging and seamless experience.
Before we proceed, kindly visit the company profile site by clicking here: Muju.id
Technological Marvel: NextJS, TypeScript, and Tailwind CSS
Muju’s website is a testament to cutting-edge web development. Leveraging the power of NextJS and TypeScript, the site delivers a seamless and performant user experience. The aesthetic appeal is further enhanced by the use of Tailwind CSS, a versatile styling framework that brings a modern and sleek design to Muju’s online presence.
SEO-Optimized for Visibility
In the competitive digital landscape, Muju’s website doesn’t just look good; it’s also designed with search engine optimization (SEO) in mind. A Google search screenshot provided showcases the website’s high visibility, ensuring that Muju stands out when users search for sports venues in Indonesia.
Enhanced User Experience
To elevate the user experience, the website incorporates several NPM libraries. The use of ‘react-awesome-reveal,’ ‘react-card-flip,’ and ‘react-otp-input’ enhances the overall interactivity and engagement, making Muju’s website a pleasure to navigate.
Exploring Muju’s Web Pages: A Visual Tour
1. Home Page: Introducing Muju
The home page serves as the gateway to Muju’s world, providing essential information about the company and its application. Users encounter a captivating app description, the company’s vision and mission, and a breakdown of the services offered for both Partners (sports venues) and Users (those seeking sports facilities). Compelling reasons to choose Muju are also highlighted, setting the stage for an immersive user journey.
2. Services Page: Delving into Specifics
Muju’s services are showcased in detail on a dedicated page. This includes a comprehensive overview of the features and benefits for both Partners and Users. The page emphasizes Muju’s commitment to delivering value to its diverse user base.
3. User Sign-Up Page: A Seamless Onboarding Experience
Prior to the application’s release, Muju allows users to sign up seamlessly. The sign-up page collects basic information, including email, and incorporates an email verification process with OTP. All user inputs are securely sent to the backend API, ensuring a smooth onboarding experience.
Oh, and here’s a fun fact: this website is responsive and crafted to look beautiful and user-friendly on devices of any size.
4. Forum Page: Fostering Community Engagement
Muju’s community forum provides a space for users to share thoughts, ask questions, and connect with like-minded individuals. The dynamic content is fetched with the help of Axios and SWR library, allowing real-time updates and interaction. Users can engage in discussions, creating a vibrant community within the Muju ecosystem.
Behind the Scenes: Back-end Development
Initially, joining this project, I was assigned as a Back-end Developer. As Muju’s backend developer, my first task was to choose the right technologies to ensure a robust and scalable foundation. Leveraging the power of Laravel 9, a PHP framework renowned for its elegant syntax and developer-friendly features, became the cornerstone of Muju’s backend architecture. PostgreSQL, a powerful and open-source relational database, was selected to handle data storage and retrieval seamlessly. Nginx, a high-performance web server, was employed to optimize web traffic and enhance the overall efficiency of Muju’s backend operations.
To facilitate seamless transactions within the application, the chosen payment gateway to be integrated was Xendit. Xendit supports Muju’s payment methods, allowing users to utilize Virtual Accounts, QR codes, or eWallets for a convenient and secure payment experience.
To ensure reliability and scalability, Muju’s backend found its home on AWS Lightsail. The choice of AWS Lightsail, a simplified cloud computing service, offered the perfect balance of performance and ease of management. This strategic trifecta laid the groundwork for a backend capable of seamlessly supporting Muju’s frontend operations.
Stay tuned for more stories about my backend development journey and insights into building the REST API for this application, which will be shared in the near future.
Conclusion
In conclusion, Muju’s website is a testament to innovation, seamlessly blending advanced web technologies with a user-centric design. As the go-to platform for sports venue discovery in Indonesia, Muju sets the bar high for both functionality and aesthetics, creating an immersive experience for all users.
