Skip to main content

​
System Requirements

Before installing Nadie Sabe Nada, ensure your system meets the following requirements:
1

Node.js

Node.js version 14.0 or higher is required. We recommend using the latest LTS version.Check your Node.js version:
node --version
2

Package Manager

You’ll need either npm (comes with Node.js) or Yarn installed.Check npm version:
npm --version
3

Git

Git is required to clone the repository.
git --version

​
Installation Steps

1

Clone the Repository

First, clone the repository to your local machine:
git clone https://github.com/tu_usuario/nadie-sabe-nada.git
Replace tu_usuario with the actual GitHub username or organization name.
2

Navigate to Project Directory

Change into the project directory:
cd nadie-sabe-nada
3

Install Dependencies

Install all required dependencies using your preferred package manager:
npm install
This will install all dependencies listed in package.json, including:
  • React and React DOM (v18.3.1)
  • Redux Toolkit and React Redux
  • Material UI components
  • React Router DOM
  • Framer Motion for animations
  • Axios for API calls
  • react-h5-audio-player for audio playback
4

Configure Environment Variables (Optional)

If you want to enable YouTube integration, create a .env file in the root directory:
touch .env
Add your YouTube API credentials:
REACT_APP_YT_API_KEY=your_youtube_api_key_here
REACT_APP_CHANNEL_ID=nadie_sabe_nada_channel_id
Keep your API keys secure. Never commit .env files to version control.

​
Dependencies Overview

The project uses the following key dependencies:

​
Core Dependencies

package.json (excerpt)
{
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1"
  }
}

​
State Management

  • @reduxjs/toolkit (^2.2.1) - Modern Redux development
  • react-redux (^9.1.0) - React bindings for Redux
  • redux (^5.0.1) - Predictable state container
  • redux-thunk (^3.1.0) - Async action creators

​
UI & Styling

  • @mui/material (^6.1.5) - Material Design components
  • @mui/icons-material (^6.1.3) - Material Design icons
  • @emotion/react & @emotion/styled - CSS-in-JS styling
  • styled-components (^6.1.13) - Component styling
  • framer-motion (^11.11.9) - Animation library

​
Audio & Media

  • react-h5-audio-player (^3.9.3) - Custom audio player component
  • react-youtube (^10.1.0) - YouTube player integration

​
Routing & Navigation

  • react-router-dom (^6.22.3) - Declarative routing for React

​
Utilities

  • axios (^1.7.7) - HTTP client
  • react-hot-toast (^2.4.1) - Notifications
  • react-helmet-async (^2.0.5) - Document head management
  • react-photo-view (^1.2.6) - Image viewer
  • react-loader-spinner & react-spinners - Loading indicators

​
Verify Installation

After installation, verify everything is set up correctly:
1

Check Package Installation

Ensure all packages are installed:
npm list --depth=0
You should see all dependencies listed in package.json.
2

Check for Vulnerabilities

Run a security audit:
npm audit
3

Start Development Server

Try starting the development server:
npm start
The app should open at http://localhost:3000.

​
Browser Compatibility

The application supports the following browsers: Production:
  • Browsers with >0.2% market share
  • Excludes dead browsers
  • Excludes Opera Mini
Development:
  • Latest Chrome version
  • Latest Firefox version
  • Latest Safari version
package.json (browserslist)
{
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

​
Troubleshooting

Try using the --legacy-peer-deps flag:
npm install --legacy-peer-deps
You can specify a different port:
PORT=3001 npm start
Delete node_modules and reinstall:
rm -rf node_modules package-lock.json
npm install

​
Next Steps

Quick Start

Learn how to run and build the application

Components

Explore the React components and architecture

Build docs developers (and LLMs) love

Get started for freeTalk to us