Car Dealer Website with CMS in Nuxt.js and Strapi
Updated: · 7 min. read
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:
- redesign the whole website with modern and unique design,
- implement the HTML, CSS of the new website template,
- add new CMS and administration possibilities,
- improve SEO,
- and optimize the website loading speed.
- Research, understand the needs and goals of the website
- The design process, mood boards, prototypes, wireframes
- Website development and implementation
- Testing, cross-browser testing, speed testing
- 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.
Strapi.io is the open source headless CMS for front-end developers. You can manage your content and distribute it anywhere.
Nuxt.js presets all the configuration needed to make your development of a Vue.js application enjoyable.
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 Rascasone team for the Vue.js frontend web with Strapi.io CMS:
- the project manager Stepanka,
- one frontend Vue.js developer Simon,
- and one QA engineer and tester Jakub.
Solution in details
- Special red dot effect with animation
- Contact form with validations
- Responsive / Mobile friendly web design
- Special menu
- Administration / CMS
- Multi-Language support
- Loading speed and SEO optimization
- REST API connection to the backend server
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: email@example.com
Or call us: +420 777 963 653
Here at Rascasone, we offer comprehensive design and development services. All our clients need to do is present their requirements, and we’ll handle everything else, from entry analysis through final testing.
Our goal was to develop a React front-end part of web application focused on meetings management.
The custom IoT management online platform offers customers a way to manage their sensors and display sensor measurements in charts