We built an SEO-friendly website that ranked at the top of Google search results in just one week.
Tags: webdev, nextjs, frontend, react
Published: 2024-05-18 13:51:18


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cb2tnwo3apv9xeciu68l.png)


### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7n2ufdf36ey96fma0vnf.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01yqujrs01snravaq4ke.png)

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

![Material-UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gef8xr8phjjled42k5f.png)


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.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xr90c6asw5imgp3m7uu5.png)

## Our website's features and previews

### Landing page
![Bếp UIT's landing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/har05ocg4jd3qh6igppy.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nrzu7wpph8gbzx5mynf0.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k0zmrs3o1m925h7tfeme.png)
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](https://bepuit.com/product/pho-bo-kobe-661a7ff590c7de33d0c8a0f7.html)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arr0xs4iy2al1e7v87y8.png)
Please come and take a look at [our blog](https://bepuit.com/blog).

It's our honor to have you visit [our website](https://bepuit.com/).
#### Thank you for stopping by. Have a great day!