DEV Community

Hồ Nhật Huy
Hồ Nhật Huy

Posted on

We built an SEO-friendly website that ranked at the top of Google search results in just one week.

Starting from the requirement to build an e-commerce website that also serves as an information channel for a restaurant, our team of developers planned and executed this idea into reality.
Let's see how we did it.

"Once you're in motion, it's easier to stay in motion." - Elon Musk

Technologies and frameworks

Our website

Next.js

Using Next.js provides a multitude of benefits for SEO optimization. Its built-in features, such as server-side rendering (SSR) and automatic code splitting, ensure faster page loading times and improved crawlability by search engine bots. Additionally, Next.js allows for easy management of metadata, including title tags, meta descriptions, and canonical URLs, which are crucial elements for SEO success.
Next.js
With Next.js, optimizing a website for search engines becomes more efficient and effective, ultimately leading to better search rankings and increased organic traffic.

Tailwind CSS

Tailwind CSS offers a streamlined approach to styling, resulting in faster load times and improved user experience, both of which are essential for SEO. Its utility-first methodology allows for easy customization and ensures consistent styling across devices, enhancing a website's mobile-friendliness and overall SEO performance.

Tailwind CSS

Material-UI

MUI, the Material-UI library for React, is renowned for its ability to expedite frontend development while maintaining aesthetic excellence.

Material-UI

Offering a vast array of pre-designed React components inspired by Material Design principles, MUI empowers developers to swiftly create visually captivating interfaces. These components are not only visually appealing but also highly customizable, ensuring flexibility in design implementation. By leveraging MUI's robust component library, developers can accelerate their development process without compromising on quality, resulting in a polished and professional-looking website that resonates with users.

We utilize MUI to swiftly perfect our interface design.

Our website's features and previews

Landing page

Bếp UIT's landing page
Our landing page introduces standout products and showcases enticing images of our restaurant, creating an immersive experience that entices visitors to explore further.

Product page

Bếp UIT's product page
The product page displays a comprehensive list of products, each meticulously presented with detailed information and captivating visuals, inviting visitors to discover our offerings.

Product detail page

Product detail page
The product detail page offers a wealth of information, including product details, pricing, and customer reviews, providing visitors with everything they need to make informed purchasing decisions.
Don't be afraid to check it out

Blog page

The blog page serves as a hub of insightful articles, covering a range of topics from industry trends to behind-the-scenes stories, offering valuable content to our audience.
Blog page
Please come and take a look at our blog.

It's our honor to have you visit our website.

Thank you for stopping by. Have a great day!

Top comments (1)

Collapse
 
duongphan profile image
Thanh Dương Phan

I wonder how you can make beautiful and user-friendly product pages such as bepuit.com/product/bun-cha-ngon-66... and bepuit.com/product/pho-bo-kobe-661.... Are there any tips and tricks to design and code such pages?