This project is a reverse-engineered implementation of the Zox News WordPress theme, rebuilt using Vue.js and Nuxt.js.

Instead of relying on the traditional PHP + WordPress stack, the original layout and behavior were carefully analyzed and recreated using a modern JavaScript frontend architecture.

The goal of this project was to:

• Reproduce the visual structure of the Zox News theme
• Improve performance and flexibility using Nuxt.js
• Remove WordPress dependencies
• Allow easier customization and component reuse

This repository demonstrates skills in:

• Reverse engineering frontend layouts
• Converting PHP templates to Vue components
• Structuring scalable frontend architecture
• Building SEO-friendly applications with Nuxt.js

This repository represents the initial version of the project, which later evolved into a real production news portal used in a live environment. In later stages, the project received additional development including API integrations, dynamic content loading, and further customizations.

The commits containing those production implementations were intentionally removed, and this repository now serves as the template/base architecture that powered the final system.

The original Zox News template was built for WordPress using PHP.
This project involved analyzing the template structure and recreating it with Vue components and Nuxt.js pages.

Key challenges included:

• Converting PHP template logic into Vue components
• Rebuilding layout structures using Nuxt layouts
• Recreating sliders and dynamic sections using Vue libraries
• Preserving the visual identity while modernizing the stack

The result is a clean, component-based frontend architecture independent of WordPress.

• 🎯 Reverse Engineered Zox News Template: Accurate clone of the popular Zox News design for a visually familiar experience.
• 📰 Dynamic News Display: Structured presentation of news articles, categories, and featured posts.
• 🎠 Interactive Content Carousels: Engaging sliders and carousels for showcasing trending news or image galleries, powered by Vue Awesome Swiper and Vue Carousel.
• 📱 Fully Responsive Design: Optimized for seamless viewing and interaction across various devices and screen sizes using SCSS media queries.
• ⚡ Progressive Web App (PWA) Capabilities: Enhanced offline experience and installability through Nuxt.js PWA module.
• 💾 Persistent State Management: Efficient data handling and client-side state persistence using Vuex with vuex-persistedstate.
• 📝 Robust Form Handling: Client-side form validation with Vuelidate and input masking with Vue The Mask for improved user input.
• 🚀 Server-Side Rendering (SSR) & Static Site Generation (SSG): Benefits from Nuxt.js's universal mode for better SEO and initial load performance.
• 🧩 Modular Component Architecture: Reusable Vue components for maintainable and scalable UI development.

Frontend:

DevOps & Tools:

Follow these steps to get a development environment up and running.

Before you begin, ensure you have the following installed:

• Node.js: v18.16.0 (as specified in .tool-versions) or a compatible LTS version.
• Yarn: Package manager for installing dependencies.

1. Clone the repository

   git clone https://github.com/Vitor-Carmo/clone-zox-news-vue.git
   cd clone-zox-news-vue

2. Install dependencies

   yarn install

3. Start development server

   yarn dev

4. Open your browser Visit http://localhost:3000 to see the application.

clone-zox-news-vue/
├── .editorconfig         # Editor configuration settings
├── .gitignore            # Files and directories to be ignored by Git
├── .tool-versions        # asdf-vm configuration for language versions (Node.js)
├── assets/               # Uncompiled assets like SCSS, images, fonts
│   └── scss/             # Global SCSS styles and variables
├── components/           # Reusable Vue components
├── helper/               # Utility JavaScript functions or helpers
├── layouts/              # Vue layouts for consistent page structure (e.g., default.vue)
├── nuxt.config.js        # Nuxt.js framework configuration
├── package.json          # Project metadata and dependencies
├── pages/                # Application pages, define routes automatically
│   └── index.vue         # Main homepage component
├── static/               # Static assets served directly to the root (e.g., favicon.ico)
├── store/                # Vuex store modules for state management
├── yarn.lock             # Yarn dependency lock file
└── README.md             # This README file

This project uses cross-env to manage the NODE_ENV variable for development and production builds. No additional user-configurable environment variables (e.g., from a .env file) are explicitly detected or required for basic setup.

• nuxt.config.js: The central configuration file for the Nuxt.js application, including modules, plugins, build settings, and PWA configurations.
• .editorconfig: Ensures consistent coding styles across different editors.
• .tool-versions: Specifies Node.js version using asdf-vm.

The package.json file includes several useful scripts for development and building:

To begin development, simply run yarn dev. This will launch the Nuxt.js development server, which automatically reloads the application upon code changes, providing a smooth development experience.

To create a production-ready build for an SSR/SPA deployment:

yarn build

Then, to start the built application:

yarn start

To generate a static version of the application suitable for static hosting (e.g., Netlify, Vercel, GitHub Pages):

yarn generate

This command will create a dist directory containing all the necessary static files.

• Static Hosting (SSG): The output from yarn generate can be deployed directly to services like Netlify, Vercel, or any web server.
• Node.js Server (SSR/SPA): The output from yarn build can be deployed to a Node.js hosting environment (e.g., Heroku, AWS EC2, DigitalOcean) and run with yarn start.

We welcome contributions! If you're interested in improving this project, please consider:

1. Forking the repository.
2. Creating a new branch (git checkout -b feature/your-feature).
3. Making your changes.
4. Ensuring your code passes linting (yarn lint).
5. Committing your changes (git commit -am 'feat: Add new feature').
6. Pushing to the branch (git push origin feature/your-feature).
7. Opening a Pull Request.

The development setup is identical to the Quick Start guide. Ensure you follow the linting rules enforced by ESLint.

This project is currently Unspecified. Please consider adding a LICENSE file to clarify the terms of use.

• Nuxt.js - The intuitive Vue framework.
• Vue.js - The progressive JavaScript framework.
• Vue Awesome Swiper - Swiper component for Vue.
• Vue Carousel - A flexible and responsive carousel component for Vue.
• Vuelidate - Simple, lightweight model-based validation for Vue.js.
• Zox News Theme - Inspiration for the design clone.

• 🐛 Issues: GitHub Issues