The Frontend Side of Vactory 4
Welcome to the frontend development guide for Vactory 4! This section will teach you how to harness the power of modern frontend technologies to create stunning, performant user interfaces.
Overview
From what we learned earlier, we are using Drupal to retrieve the data we need. Once we have the data, we can utilize the power of Next.js and React to create dynamic and interactive UI components that render the Drupal data in the desired format.
The frontend architecture of Vactory 4 combines:
- Next.js for server-side rendering and optimal performance
- React for component-based UI development
- Tailwind CSS for utility-first styling
What You'll Learn
In the upcoming sections, we are going to learn:
- Project Configuration: How to configure our Vactory Next project for optimal development
- Tailwind CSS: How to leverage the power of Tailwind CSS for efficient styling
- Primitive Components: How to use Vactory Next's primitive elements such as Button, Link, Heading, etc., and how to style them
- Multi-theming: How to enable Multi-theming and add new themes to your application
- AMP Integration: How to utilize AMP in multi-theme environments
- Storybook Development: How to leverage the power of Storybook to create interactive components that display multiple variants of your elements
Development Philosophy
Vactory 4 follows modern frontend development principles:
- Component-First: Build reusable, composable components
- Performance-Oriented: Optimize for speed and user experience
- Accessibility-Focused: Ensure your applications are accessible to all users
- Developer Experience: Tools and patterns that make development enjoyable
Getting Started
Before diving into the technical details, make sure you have:
- A working Vactory 4 installation
- Basic knowledge of React and Next.js
- Familiarity with Tailwind CSS concepts
- Understanding of component-based architecture
Get yourself a cup of coffee & Let's get started ☕️