Nucleify

Build modern, scalable web applications with Nucleify – a modular, core-driven framework of uniquely functional, nucleus-inspired modules. Easily structure, manage, and reuse components to create responsive, maintainable, and flexible web apps. Nucleify leverages Laravel for the backend and Nuxt for the frontend, giving developers a powerful full-stack foundation.

Designed with Atomic Design, Mobile-First, Feature-Sliced and Test Driven Development principles in mind, Nucleify helps developers deliver powerful, efficient, and future-proof web projects.

Join our project and become part of building something incredible!

Live preview

⭐ Project setup with a single command
⭐ Unique Laravel/Nuxt modules & overrides functionality
⭐ Atomic Design components + CSS modules
⭐ Storybook tests for most Atomic components
⭐ Futuristic UI made with PrimeVue + Chart.js + GSAP + SCSS

✅ 94/96 Performance

This score is a bit outdated, but I promise an optimizations are coming soon!

Introduced many optimizations:

• SSR & Prerendering
• Nuxt building with Atomic Design gives nicely separated chunks, able to defer as you wish
• Preloading icons, font-display: swap + defer non-critical CSS + JS
• Fetching website's content like questions, or technologies from database on prerender, making them editable and accessible instantly without load time
• nuxt-vitalizer - this module is just perfect
• @nuxtjs/google-fonts - downloading fonts on building & serving them on prerender, reducing third-party sources
• I also recommend <deferred-content> tag from PrimeVue - it impacts performance extremely well
• and some other magic tricks that I keep secret :D

PageSpeed Test

---

    Docker

🛠️ Installation

• First make sure u have installed latest version of Docker and have Make command ready

• Clone this repository

git clone https://github.com/Nucleify/Nucleify

• Run make command

That's it! Now, you can enter http://localhost:3000

Harder way

• Change .env.docker.example file to .env in root directory

• Unzip vendor.zip

• Build & run Docker image

sail up --build -d
sail art migrate:fresh --seed

Possible problems:

• Sail: no such file or directory found: Solution 1, Solution 2
• Error: EACCES: permission denied, mkdir '/var/www/html/node_modules': sudo chmod 777 -R nucleify or Solution

🚀 Run

Root directory:

sail up -d

Remember to shutdown all XAMPP processes!

Possible problems:

• Error starting userland proxy: listen tcp4 0.0.0.0:3306: bind: address already in use: sudo service mysql stop

❓ Usage

Migrations

sail artisan migrate:fresh --seed

# Reset database by dropping all tables and then run all migrations
# --seed flag runs the database seeders after the migrations

Factories

sail tinker

# if you wish, you can specify count in factory() or attributes in create()
Article::factory(100)->create();
Contact::factory(100)->create();
User::factory(100)->create();

# for Spatie Activity model
Database\Factories\ActivityFactory::new()->count(100)->create();

Tests

 Pest tests:

# run all tests
sail pest

# or specify group
sail pest --group=api

# defined tests groups:
api, activity-api, article-api, artisan-api, contact-api, sitemap-api, user-api,
database, feature, global, unit, commands, controllers, services, factories, migrations, models

# run all tests and check code coverage
sail pest --coverage

 Cypress tests:

npm run open  # For now I've not configured Cypress with Docker

 Vitest tests:

sail npm run tests

 Storybook - visit localhost:6006 after sail up -d

npm

1. Install packages - sail npm install
2. Nuxt build - sail npm run build
3. Run Prettier - sail npm run write
4. Run Eslint - sail npm run lint
5. Run Stylelint - sail npm run slint
6. Husky install - sail npm run prepare

Sitemaps

Generate XML sitemap

sail artisan sitemap:generate

---

    XAMPP

🛠️ Installation

• First make sure u have installed latest versions of PHP, Node.js, npm, XAMPP and Composer

• I recommend use nvm for install latest supported versions of Node.js and npm,

nvm use --lts

• Clone this repository

git clone https://github.com/Nucleify/Nucleify

• Change .env.xampp.example file to .env in root directory

• Install modules in root directory

npm install
composer install

Make sure u have installed all modules!

• run XAMPP mysql server and create database

mysql -u root -p
create database nucleify
create database nucleify_test    # it's not necessary, only for tests

🚀 Run

Root directory:

npm run dev
php artisan serve

❓ Usage

Migrations

php artisan migrate:fresh --seed

# Reset database by dropping all tables and then run all migrations
# --seed flag runs the database seeders after the migrations

Factories

php artisan tinker

# if you wish, you can specify count in factory() or attributes in create()
Article::factory(100)->create();
Contact::factory(100)->create();
User::factory(100)->create();

# for Spatie Activity model
Database\Factories\ActivityFactory::new()->count(100)->create();

Tests

 Pest tests:

# run all tests
./vendor/bin/pest

# or specify group
./vendor/bin/pest --group=api

# defined tests groups:
api, activity-api, article-api, artisan-api, contact-api, sitemap-api, user-api,
database, feature, global, unit, commands, controllers, services, factories, migrations, models

# run all tests and check code coverage
./vendor/bin/pest --coverage

 Cypress tests:

npm run open

 Vitest tests:

npm run tests

 Storybook - visit localhost:6006 after npm run dev

npm

1. Install packages - npm install
2. Nuxt build - npm run build
3. Run Prettier - npm run write
4. Run Eslint - npm run lint
5. Run Stylelint - npm run slint
6. Husky install - npm run prepare

Sitemaps

Generate XML sitemap

php artisan sitemap:generate

---

    Tech Stack

---

    Contribute

Before contributing, please take a moment to read our CONTRIBUTING.md.
Feel free to check Issues section.
Your skills and expertise will directly contribute to the success of our project, helping us achieve our goals and create an attractive product.

---

Contributors