Car Dealer Website with CMS in Nuxt.js and Strapi

Introduction

Our goal was to implement the website for the luxury and sports cars dealer with CMS.

The main requirement was to have a stunning and clean design.

The project took us 3 months. We started in April 2019 and finished in June 2019.

 

Challenge - redesign the existing website 

The previous existing website was just a temporary solution, which had a default website theme with no special design. 

Also, the HTML and CSS implementation was very poor and the administration was insufficient.  

The requirements were to:

1. redesign the whole website with modern and unique design, 
2. implement the HTML, CSS of the new website template, 
3. add new CMS and administration possibilities,
4. improve SEO,
5. and optimize the website loading speed.

Process

1. Research, understand the needs and goals of the website
2. The design process, mood boards, prototypes, wireframes
3. Website development and implementation
4. Testing, cross-browser testing, speed testing
5. Launch, web deployment, server and hosting setup, further maintenance

The result - website redesign with admin interface

The customer has a new shiny website with a list of cars that he offers. He can easily manage those through the admin interface.

Presentation website with the description of services, list of brands and cars, a contact form and with nice design

As a result, we delivered:

• new shiny and modern web design, 
• implemented a new web theme,
• the optimized loading speed of the website,
• improved SEO,
• add admin and CMS possibility to add new cars and brands.

Technology - JavaScript, Vue.js with Strapi.io

For the task, we choose Vue.js JavaScript framework with Strapi.io Headless CMS‎ and Nuxt.js. 

Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications.
https://vuejs.org

Strapi.io is the open source headless CMS for front-end developers. You can manage your content and distribute it anywhere.
https://strapi.io

Nuxt.js presets all the configuration needed to make your development of a Vue.js application enjoyable.
https://nuxtjs.org

Some other interesting libraries on the project were:

• Vue-video-player - video.js player component for Vue,
• Vue-i18n - Internationalization plugin for Vue.js,
• Vee-validate - Template Based Validation Framework for Vue.js

The team

The Rascasone team for the Vue.js frontend web with Strapi.io CMS:

• the project manager Stepanka,
• one lead JavaScript, Vue.js and Strapi.io developer Dominik,
• one frontend Vue.js developer Simon,
• and one QA engineer and tester Jakub.

Solution in details

1. Homepage
2. Custom JavaScript slider
3. Special red dot effect with animation
4. Contact form with validations
5. Responsive / Mobile friendly web design
6. Special menu
7. Administration / CMS
8. Multi-Language support
9. Loading speed and SEO optimization
10. REST API connection to the backend server

1. Homepage

The main requirement was to have a stunning and unique design. 

2. Custom slider

The custom slider has a special red dot effect. It has four car images and it is changing continuously or after hover one of the dots.

3. Special red dot effect with animation

Special red dot effect is the special thing, which our designer came up with. It is applied over the whole web and it is the main signature of the whole design.

4. Contact form with validations

Contact form is simple, but with little design improvements. It has also validations for email and name, which also block the form from being submitted. 

5. Responsive / Mobile friendly web design

Responsive design and optimization for mobile devices is a must for all website created in 2019. So also this website is fully responsive for all device types and screen sizes.

6. Special navigation menu

We selected the navigation over the whole screen. This bigger implementation supports the importance of this element and its design.

7. Administration / CMS

Administration of data and CMS is provided by default from Strapi.io open source framework. With a simple and easy setup, we could model all the necessary data models. In this case cars and brands.

8. Multi-Language support

The multiple languages were the main requirement, so this website also has this possibility. One of the languages will have the right to the left (RTL) writing system.

9. Loading speed and SEO optimization

Loading speed is one of the major attributes regarding SEO. As you can see at the picture, we did our best to achieve the best performance. We also provided SEO optimization.

10. A REST API connection to the backend server

The frontend is implemented in Nuxt.js and is connected to MongoDB via a REST API provided by Strapi.io.

 

Do you need help with a new similar website, Strapi or Nuxt.js?

In case you need help, contact us and we will assist you with an initial consultation or finishing the whole project.

Are you interested? Let's do it.

Write us an email: hello@rascasone.com

Or call us: +420 777 963 653