Skip to content

tadyPi/dev-vercel

Repository files navigation

Dev Vercel

Overview

This project is a recreation of the Velora wordpress theme.This is a Next.js application that leverages Figma for design, Builder.io for generating React code, and Visual Studio Code (VS Code) for development. It also uses Tailwind CSS for styling.

Figma Design

We use Figma to create and collaborate on design prototypes. Figma allows us to visually design the user interface and user experience, ensuring that our design aligns with our development goals.

Builder.io for React Code Creation

Builder.io is utilized to generate React code from design components. This integration allows us to streamline the process of converting design elements into functional React components, reducing manual coding and minimizing errors.

Next.js Application

The generated React components from Builder.io are integrated into our Next.js application. Next.js provides a robust framework for building React applications with server-side rendering, static site generation, and more.

Development Workflow with VS Code

Our development workflow is centered around Visual Studio Code (VS Code). Here is a typical workflow:

  1. Design in Figma: Start by creating or updating designs in Figma.
  2. Generate Code with Builder.io: Use Builder.io to convert Figma designs into React components.
  3. Develop in VS Code: Open the project in VS Code, integrate the generated components, and continue developing the application.
  4. Style with Tailwind CSS: Use Tailwind CSS
  5. Run and Test: Use Next.js development server to run and test the application locally.
  6. Deploy: Deploy the application to Vercel for hosting and continuous deployment.