Skip to main content

​
Prerequisites

Before installing the project, ensure you have the following installed on your system:

​
Node.js

The project requires Node.js version 20 or higher: 
node --version
We recommend using nvm (Node Version Manager) to manage multiple Node.js versions on your system.

​
Package manager

Choose one of the following package managers:

npm

Comes bundled with Node.js
npm --version

yarn

Install globally with npm
npm install -g yarn

pnpm

Fast, disk space efficient
npm install -g pnpm

bun

All-in-one toolkit
curl -fsSL https://bun.sh/install | bash

​
Git

Git is required to clone the repository: 
git --version
If not installed, download from git-scm.com.

​
Modern web browser

The application requires a modern browser with support for:
  • HTML5 Canvas API - For rendering the Matrix rain effect
  • WebRTC MediaDevices API - For webcam access in CharCam
  • ES6+ JavaScript - Modern JavaScript features
Supported browsers:
  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+
For the CharCam feature, you’ll need to grant camera permissions in your browser.

​
Installation steps

1

Clone the repository

Clone the project from GitHub:
git clone https://github.com/MateusMCG16/Matrix.git
cd Matrix
2

Install dependencies

Install all required packages using your preferred package manager:
npm install
This will install all dependencies from package.json:
package.json
{
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "15.3.2"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4",
    "eslint": "^9",
    "eslint-config-next": "15.3.2",
    "@eslint/eslintrc": "^3"
  }
}
3

Verify installation

Verify that all dependencies are installed correctly:
npm list --depth=0
You should see all the packages listed without any errors.

​
Project structure

After installation, your project structure will look like this: 
.
├── src/
│   └── app/
│       ├── page.tsx           # Matrix Rain homepage
│       ├── chars/
│       │   └── page.tsx       # CharCam page
│       ├── lorem/
│       │   └── page.tsx       # About page
│       ├── layout.tsx         # Root layout with fonts
│       └── globals.css        # Global styles
├── package.json               # Dependencies and scripts
├── next.config.ts             # Next.js configuration
├── tsconfig.json              # TypeScript configuration
├── tailwind.config.ts         # Tailwind CSS configuration
└── README.md                  # Project documentation

​
Key files

​
Root layout

The src/app/layout.tsx file sets up the application-wide configuration:
src/app/layout.tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Matrix Rain",
  description: "A Matrix digital rain effect using Next.js and Canvas.",
};
The application uses the Geist font family, optimized with next/font for automatic font optimization and zero layout shift.

​
Available scripts

The package.json includes the following scripts:

​
Development

Start the development server with Turbopack: 
npm run dev
This runs next dev --turbopack which provides:
  • Fast refresh for instant updates
  • Optimized development builds
  • Hot module replacement

​
Build

Create an optimized production build: 
npm run build
This runs next build which:
  • Compiles TypeScript to JavaScript
  • Optimizes and minifies code
  • Generates static pages where possible
  • Creates production-ready bundles

​
Production

Start the production server: 
npm run start
This runs next start to serve the production build.
You must run npm run build before npm run start.

​
Linting

Run ESLint to check for code quality issues: 
npm run lint
This uses the Next.js ESLint configuration to catch common issues.

​
Troubleshooting

​
Port already in use

If port 3000 is already in use, you can specify a different port: 
npm run dev -- -p 3001

​
Camera permissions denied

For the CharCam feature, ensure:
  1. You’re accessing the site via https:// or localhost
  2. Camera permissions are granted in browser settings
  3. No other application is using the camera

​
TypeScript errors

If you encounter TypeScript errors, try: 
# Remove node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

# Clear Next.js cache
rm -rf .next
npm run dev

​
Module not found errors

Ensure all dependencies are installed: 
npm install
Check that you’re using Node.js 20 or higher: 
node --version

​
Next steps

Quickstart guide

Learn how to run the application and explore its features

Deploy to production

Deploy your application to Vercel, Netlify, or your preferred hosting platform

Build docs developers (and LLMs) love

Get started for freeTalk to us