Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js 18.x or higher
  • npm 9.x or higher (comes with Node.js)
  • A code editor (VS Code recommended)
  • Git for cloning the repository
You can check your Node.js version with node --version and npm version with npm --version.

​
Installation

Get started with School Science in three simple steps:
1

Clone the Repository

Clone the School Science repository from GitHub:
git clone https://github.com/JFVela/SchoolScience.git
cd SchoolScience
2

Install Dependencies

Install all required npm packages:
npm install
This will install:
  • React 19 and React DOM
  • Material-UI 7 components
  • React Router 7 for navigation
  • Styled Components for styling
  • Vite 7 for development and building
  • Lucide React icons
  • react-lite-youtube-embed for video playback
3

Start the Development Server

Launch the Vite development server:
npm run dev
The application will start and be available at:
http://localhost:5173
Vite’s development server includes Hot Module Replacement (HMR), so your changes will appear instantly without refreshing the page.

​
Project Structure

Once installed, you’ll find this file structure: 
SchoolScience/
├── public/              # Static assets
│   ├── image/          # Project images
│   └── pdfs/           # Downloadable PDF guides
├── src/
│   ├── components/     # Reusable UI components
│   ├── data/          # Science project data
│   ├── pages/         # Page components
│   ├── App.jsx        # Main app with routing
│   ├── main.jsx       # Entry point
│   └── index.css      # Global styles
├── index.html         # HTML template
├── package.json       # Dependencies and scripts
└── vite.config.js     # Vite configuration

​
Available Scripts

The project includes several npm scripts:

​
Development

npm run dev
Starts the Vite development server with HMR on http://localhost:5173

​
Build

npm run build
Creates an optimized production build in the dist/ directory

​
Preview

npm run preview
Locally preview the production build before deploying

​
Lint

npm run lint
Runs ESLint to check code quality and catch potential issues

​
Exploring the Platform

Once the development server is running, you can:
  1. Browse Projects - View the four science experiments on the home page
  2. View Details - Click “Ver más” on any project card to see full details
  3. Watch Videos - Each project page includes an embedded YouTube tutorial
  4. Download PDFs - Access downloadable guides with materials and instructions

​
Next Steps

Now that you have School Science running locally, explore these resources:

Add Projects

Learn how to add new science projects to the platform

Customize

Customize colors, styling, and components

Deploy

Deploy your instance to Vercel or other platforms

Components

Explore the UI component documentation

​
Troubleshooting

​
Port Already in Use

If port 5173 is already in use, Vite will automatically try the next available port. You can also specify a custom port: 
npm run dev -- --port 3000

​
Module Not Found Errors

If you encounter module errors, try deleting node_modules and reinstalling: 
rm -rf node_modules package-lock.json
npm install

​
Vite Build Errors

Ensure you’re using Node.js 18.x or higher. Check your version: 
node --version
For more detailed troubleshooting, check the Vite documentation.

​
Getting Help

Need assistance? Check out these resources:

Build docs developers (and LLMs) love

Get started for freeTalk to us