Cerstva svaca website snapshot

Cerstva Svaca website case study

Overview

Cerstva Svaca is a small startup, based in Czech Republic, that aims to improve food quality in schools and beyond. It does so by preparing and delivering healthy meals to children and their families. Parents order meals, via credit-based purchases, that are delivered to the school their children attends the next day.

Our role

We were hired to build a pixel-perfect and responsive website for the whole project. When we started the project we received the design for the first five pages. As we worked on coding the first batch of pages, we also worked with the company's designer on the rest of pages. Through this collaboration we were able to design, and then code, the rest of pages.

Project specifications

  • Deadline: 2 months (completed in 1.5 month)
  • Number of pages: 13

Goals and objectives

  • – Create site architecture and navigation for easy browsing and frictionless experience
  • – Create smooth, frictionless experience on mobile devices
  • – Build responsive pixel-perfect website
  • – Use extensive testing to ensure cross-browser compatibility
  • – Implement best practices to achieve maximum performance and accessibility

Tech stack

  • Front-end: HTML, CSS, CSS-in-JS, JavaScript, React.js, Next.js
  • Back-end: PHP, Firebase

The Process

We started this project by building the React app for the website using Next.js framework. Internal and router in Next.js made it easier to handle necessary routing. Next.js made it also easier to create high-performance website, thanks to code splitting, advanced bundling and automatic assets optimization. The whole website was built as a system of components that could be re-used elsewhere. This made it easier to gradually extend the website to its final size.

We were always working on page at the time. When page was finished we went through extensive testing and reviews with Cerstva Svaca CEO. Only when any potential issues were solved the page was accepted and we started working on another page.

The Solution

We've built the website on top of Next.js framework, as a React app. We followed the best practices for asset optimization to ensure website will load fast, even on slow bandwidth and devices. This was further greatly enhanced by default optimization processes provided by Next.js framework. The layout of every page has been tested and optimized to create great experience on all devices, from mobile phones and tablets, to small and large desktops. Our component-based approach allowed for the website to be continually extended and upgraded in the future.

Final score

91%

Performance

90%

Accessibility

93%

Best practices

89%

SEO

PWA

Progressive Web App (PWA)

Visit the website