Skip to main content

​
Quickstart Guide

Get your VENCOL Front Template development environment running in just 5 minutes. This guide will walk you through installation, running the dev server, and making your first customizations.

​
Prerequisites

Before you begin, ensure you have:
  • Node.js 16+ installed (18.x or 20.x LTS recommended)
  • A package manager: npm, pnpm, or yarn
  • A code editor (VS Code recommended)
  • Basic knowledge of React and TypeScript

​
Quick Start

1

Clone and Install

Clone the repository and install dependencies:
git clone https://github.com/Mich9025/vencol-front.git
cd vencol-front
npm install
This installs all dependencies from package.json:11-23:
  • React 18.3.1 and React DOM
  • React Router 6.22.3 for navigation
  • Lucide React 0.358.0 for icons
  • React Helmet Async 2.0.4 for SEO
  • Vite 6.2.0 and TypeScript 5.8.2
2

Start Development Server

Launch the Vite development server:
npm run dev
The application will start at http://localhost:3000 (configured in vite.config.ts:9).
The default Vite port is 5173, but this project is configured to use port 3000 for consistency with traditional React apps.
3

Explore the Application

Open your browser to http://localhost:3000 and explore:
  • Home Page - Hero slider, features showcase, partners marquee, FAQ
  • Nosotros - About page with company information
  • Soluciones - Product catalog dropdown (5 solution categories)
  • Blog - WordPress-integrated blog listing
  • Contacto - Contact information and forms

​
Project Structure Overview

Understanding the basic structure helps you navigate the codebase: 
vencol-front/
├── components/          # Reusable UI components
│   ├── Navbar.tsx      # Navigation with dropdowns
│   ├── Footer.tsx      # Site footer
│   ├── SEO.tsx         # SEO meta tags
│   └── ui/             # Base components (GlassCard, BackgroundBlobs)
├── pages/              # Route page components
│   ├── Home.tsx        # Landing page
│   ├── About.tsx       # About page
│   ├── SolutionDetail.tsx  # Individual solution pages
│   ├── Blog.tsx        # Blog listing
│   └── Contact.tsx     # Contact page
├── data/               # Static content and configuration
│   ├── data.tsx        # Site-wide content
│   └── solutions.tsx   # Solutions catalog
├── lib/                # Utilities
│   └── wordpress.ts    # WordPress API integration
├── App.tsx             # Main app with routing
├── index.tsx           # Entry point
└── types.ts            # TypeScript definitions

​
Your First Customization

Let’s make a simple customization to see how the app works.

​
1. Update the Hero Title

Open data/data.tsx and find the home hero section:
data/data.tsx
export const siteContent = {
  // ... other content
  home: {
    hero: {
      badge: "Soluciones de Empaque de Clase Mundial",
      title: {
        prefix: "Hacemos visible",
        highlight: "la frescura",
        suffix: "de tus productos"
      },
      // ... more properties
    }
  }
}
Change the highlight text to something else, save the file, and watch the browser auto-reload with your changes thanks to Vite’s Hot Module Replacement (HMR).

​
2. Change Brand Colors

The brand color is defined in index.html:22-26 within the <style> tag:
index.html
<style type="text/tailwindcss">
  @layer utilities {
    .brand-green { color: #56B501; }
    .bg-brand-green { background-color: #56B501; }
    /* ... */
  }
</style>
Update #56B501 to your preferred brand color. The change will apply across all buttons, highlights, and accents.

​
3. Add a New Solution

Add a new product to the solutions catalog by editing data/solutions.tsx:
data/solutions.tsx
import { Zap } from 'lucide-react'; // Import an icon

export const solutionsData: Service[] = [
  // ... existing solutions
  {
    id: '6',
    slug: 'my-new-solution',
    title: "My New Solution",
    description: "Short description for the card",
    longDescription: "Full description for the detail page...",
    icon: Zap,
    features: [
      "Feature 1",
      "Feature 2",
      "Feature 3"
    ],
    image: "https://images.unsplash.com/photo-1234567890",
    subtitle1: "First Subtitle",
    subtitle1Description: "Description for first section",
    subtitle2: "Second Subtitle",
    subtitle2Description: "Description for second section",
    menuTitle: "My Solution"
  }
];
The new solution will automatically appear in the navigation dropdown and be accessible at /soluciones/my-new-solution.
For a complete guide on adding solutions, see Adding Solutions.

​
Available Scripts

The project includes these npm scripts from package.json:6-9:
CommandDescription
npm run devStart development server with HMR at localhost:3000
npm run buildBuild production bundle to dist/ directory
npm run previewPreview production build locally

​
Understanding the Routing

The app uses React Router 6 for client-side navigation. Routes are defined in App.tsx:30-40:
App.tsx
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/nosotros" element={<About />} />
  <Route path="/soluciones/:slug" element={<SolutionDetail />} />
  <Route path="/blog" element={<Blog />} />
  <Route path="/blog/:slug" element={<BlogDetail />} />
  <Route path="/contacto" element={<Contact />} />
  {/* Catch-all for WordPress pages */}
  <Route path="/:slug" element={<PageDetail />} />
</Routes>
Key routes:
  • Static routes: /, /nosotros, /blog, /contacto
  • Dynamic routes: /soluciones/:slug for products, /blog/:slug for posts
  • Catch-all: /:slug fetches WordPress pages by slug

​
WordPress Integration

The app can fetch blog posts from a WordPress site via REST API. The configuration is in lib/wordpress.ts:3:
lib/wordpress.ts
const WP_API_URL = 'https://cms.gobigagency.co/vencol/wp-json/wp/v2';
To use your own WordPress site:
  1. Update the WP_API_URL in lib/wordpress.ts
  2. Ensure your WordPress site has REST API enabled
  3. Blog posts will automatically load from your WordPress backend
If the WordPress API fails, the app gracefully falls back to static blog posts defined in data/data.tsx.

​
Next Steps

Now that you have the basics running:

Explore Components

Learn about Navbar, Footer, SEO, and UI components

Understand Architecture

Dive into the project structure and data flow

Customize Your Site

Personalize colors, content, and branding

Deploy to Production

Deploy to Vercel or Netlify in minutes

​
Common Issues

If another app is using port 3000, you can change the port in vite.config.ts:9:
vite.config.ts
export default defineConfig({
  server: {
    port: 3001, // Change to any available port
  },
});
Clear your node_modules and reinstall:
rm -rf node_modules package-lock.json
npm install
Ensure your editor uses the workspace TypeScript version. In VS Code:
  1. Open any .tsx file
  2. Press Cmd/Ctrl + Shift + P
  3. Type “Select TypeScript Version”
  4. Choose “Use Workspace Version”
The app falls back to static content if WordPress is unavailable. Check:
  1. WordPress URL is correct in lib/wordpress.ts:3
  2. WordPress REST API is enabled
  3. CORS is configured on WordPress (if needed)
See WordPress Setup Guide for details.

​
Getting Help

  • Documentation: Browse the full docs for detailed guides
  • Source Code: Explore ~/workspace/source/ for implementation details
  • GitHub: Report issues at github.com/Mich9025/vencol-front

Ready to dive deeper?

Check out the Core Concepts to understand the full architecture.

Build docs developers (and LLMs) love

Get started for freeTalk to us