Skip to main content

​
Overview

Adding new science projects to the School Science platform is straightforward. All project data is centralized in a single JavaScript file, making it easy to add, edit, or remove experiments without touching component code.

​
Project Data Structure

All projects are defined in src/data/proyectos.js. Each project follows this structure:
src/data/proyectos.js
const proyectos = [
  {
    id: "project-slug",
    titulo: "Project Title",
    descripcion: "Brief description of the experiment",
    integrantes: [
      "Team Member 1",
      "Team Member 2",
      "Team Member 3"
    ],
    materiales: [
      { nombre: "Material name", cantidad: "Quantity" },
      { nombre: "Another material", cantidad: "Amount" }
    ],
    costo: "25.00",
    imagenes: [
      "/image/folder/image1.jpg",
      "/image/folder/image2.jpg"
    ],
    videoUrl: "YouTubeVideoID",
    pdfs: [
      {
        titulo: "Guide Title",
        archivo: "/pdfs/filename.pdf"
      }
    ],
    conclusion: "Scientific conclusion or findings"
  }
];

export default proyectos;

​
Adding a New Project

Follow these steps to add a new science experiment:
1

Open the Data File

Open src/data/proyectos.js in your code editor.
2

Copy Existing Project

Copy one of the existing project objects as a template. This ensures you have all required fields.
{
  id: "new-experiment",
  titulo: "Your Experiment Title",
  // ... other fields
}
3

Set Unique ID

Choose a unique, URL-friendly ID:
id: "magnetic-levitation"  // ✅ Good
id: "Magnetic Levitation"  // ❌ Bad (spaces, capitals)
id: "mag-lev-1"           // ✅ Good
This ID will be used in the URL: /proyecto/magnetic-levitation
4

Fill in Project Details

Complete all fields with your project information:
  • titulo: Display name shown on cards and detail pages
  • descripcion: Brief summary (2-3 sentences)
  • integrantes: Array of team member names
  • materiales: Array of objects with nombre and cantidad
  • costo: Total cost as a string (e.g., “30.00”)
  • imagenes: Array of image paths in /public/image/
  • videoUrl: YouTube video ID (not full URL)
  • pdfs: Array of downloadable resources
  • conclusion: Scientific findings or learning outcomes
5

Add Project Images

Create a folder in public/image/ for your project:
public/image/magnetic-levitation/
├── magnet1.jpg
├── magnet2.jpg
└── magnet3.jpg
Reference these images in the imagenes array:
imagenes: [
  "/image/magnetic-levitation/magnet1.jpg",
  "/image/magnetic-levitation/magnet2.jpg",
  "/image/magnetic-levitation/magnet3.jpg"
]
6

Add PDF Resources

Place PDF files in public/pdfs/:
public/pdfs/
├── magnetic-levitation-guide.pdf
└── electromagnetism-theory.pdf
Reference in the pdfs array:
pdfs: [
  {
    titulo: "Construction Guide",
    archivo: "/pdfs/magnetic-levitation-guide.pdf"
  },
  {
    titulo: "Electromagnetism Theory",
    archivo: "/pdfs/electromagnetism-theory.pdf"
  }
]
7

Get YouTube Video ID

From a YouTube URL like:
https://www.youtube.com/watch?v=dQw4w9WgXcQ
Extract only the ID:
videoUrl: "dQw4w9WgXcQ"  // ✅ Correct
videoUrl: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"  // ❌ Wrong
8

Save and Test

Save the file and check the development server:
npm run dev
Your new project should appear on the home page and be accessible at /proyecto/your-id

​
Complete Example

Here’s a full example of a new project:
src/data/proyectos.js
const proyectos = [
  // ... existing projects ...
  {
    id: "solar-oven",
    titulo: "Solar Oven: Renewable Energy Cooking",
    descripcion:
      "Harness the sun's energy to cook food using a simple cardboard box oven, demonstrating solar thermal energy conversion and greenhouse effect principles.",
    integrantes: [
      "Maria Rodriguez",
      "Carlos Santos",
      "Ana Lopez"
    ],
    materiales: [
      { nombre: "Cardboard box with lid", cantidad: "1 large box" },
      { nombre: "Aluminum foil", cantidad: "2 meters" },
      { nombre: "Black construction paper", cantidad: "2 sheets" },
      { nombre: "Plastic wrap or glass sheet", cantidad: "1 sheet" },
      { nombre: "Newspaper for insulation", cantidad: "10 sheets" },
      { nombre: "Tape and glue", cantidad: "1 roll each" },
      { nombre: "Wooden dowels or wire", cantidad: "2 pieces" }
    ],
    costo: "20.00",
    imagenes: [
      "/image/solar-oven/oven1.jpg",
      "/image/solar-oven/oven2.jpg",
      "/image/solar-oven/oven3.jpg",
      "/image/solar-oven/cooking.jpg"
    ],
    videoUrl: "abcd1234efg",
    pdfs: [
      {
        titulo: "Solar Oven Construction Manual",
        archivo: "/pdfs/solar-oven-guide.pdf"
      },
      {
        titulo: "Solar Energy Calculations",
        archivo: "/pdfs/solar-energy-math.pdf"
      }
    ],
    conclusion:
      "The solar oven successfully reached temperatures of 150°F-200°F, demonstrating efficient solar thermal energy conversion through the greenhouse effect and reflective concentration of sunlight."
  }
];

​
Field Guidelines

​
ID (Required)

  • Use lowercase with hyphens
  • Must be unique across all projects
  • No spaces or special characters
  • Keep it short but descriptive
// Good examples
id: "volcano-model"
id: "wind-turbine"
id: "co2-generator"

// Bad examples
id: "Volcano Model"  // Has spaces and capitals
id: "model#1"        // Has special character
id: "proj"           // Too vague

​
Titulo (Required)

Display name with proper capitalization: 
titulo: "Solar-Powered Water Purifier"  // ✅
titulo: "solar powered water purifier"  // ❌

​
Descripcion (Required)

2-3 sentences explaining:
  • What the experiment does
  • Scientific principles demonstrated
  • Key learning outcomes
descripcion:
  "A water purification system using solar heat to distill contaminated water. " +
  "Demonstrates evaporation, condensation, and the water cycle. " +
  "Produces clean drinking water from saltwater or dirty water."

​
Materiales (Required)

Array of objects with specific quantities: 
materiales: [
  { nombre: "Glass jar with lid", cantidad: "2 units" },
  { nombre: "Copper wire (22 gauge)", cantidad: "1 meter" },
  { nombre: "LED bulb (5mm)", cantidad: "3 units" },
  { nombre: "Battery (AA 1.5V)", cantidad: "4 units" }
]
Be specific about quantities and specifications. This helps users gather the exact materials needed.

​
Costo (Required)

Total cost as a string (for currency display): 
costo: "25.00"  // ✅ String format
costo: 25       // ❌ Number format
costo: "25"     // ⚠️ Works but missing decimals

​
Imagenes (Required)

At least 1 image, maximum 10 recommended: 
imagenes: [
  "/image/project-name/photo1.jpg",
  "/image/project-name/photo2.jpg"
]
Image Requirements:
  • Format: JPG, PNG, or WebP
  • Max size: 2MB per image
  • Min dimensions: 800x600px
  • Recommended: 1200x900px

​
VideoUrl (Optional)

YouTube video ID only: 
videoUrl: "dQw4w9WgXcQ"  // ✅ Just the ID
Leave as empty string if no video: 
videoUrl: ""  // ✅ No video

​
PDFs (Optional)

Array of downloadable resources: 
pdfs: [
  {
    titulo: "Step-by-Step Guide",
    archivo: "/pdfs/project-guide.pdf"
  },
  {
    titulo: "Safety Instructions",
    archivo: "/pdfs/safety-rules.pdf"
  }
]
Or empty array: 
pdfs: []  // No PDFs available

​
Conclusion (Required)

Scientific findings or learning outcomes: 
conclusion:
  "The experiment validated the principles of thermodynamics by " +
  "demonstrating heat transfer through conduction, convection, and " +
  "radiation, achieving temperatures sufficient for solar cooking."

​
Routing

The platform automatically handles routing for new projects. Once added to proyectos.js, your project is immediately accessible at: 
https://yoursite.com/proyecto/{your-project-id}
The routing is handled by React Router in App.jsx:
src/App.jsx
<Route path="/proyecto/:slug" element={<ProyectoDetalle />} />
The :slug parameter matches your project’s id field.

​
Image Optimization

1

Take High-Quality Photos

Capture well-lit, clear photos of your experiment from multiple angles.
2

Edit and Crop

  • Crop to remove unnecessary background
  • Adjust brightness and contrast
  • Ensure aspect ratio is consistent (4:3 or 16:9)
3

Compress Images

Use tools like TinyPNG or Squoosh to reduce file size while maintaining quality. Target: less than 500KB per image
4

Name Descriptively

Use descriptive filenames:
solar-oven-exterior.jpg
solar-oven-interior.jpg
solar-oven-cooking-demo.jpg

​
Testing Your Project

After adding a project, verify:
  • Project card appears on home page
  • Title displays correctly
  • Description is visible (truncated at 3 lines)
  • First image loads properly
  • “Ver más” button works
  • Detail page loads at /proyecto/your-id
  • All images display in carousel
  • Carousel navigation works
  • Materials list shows all items
  • Cost displays correctly
  • Team members list appears
  • Video embeds properly
  • PDF download buttons work
  • Conclusion text displays
Test on multiple screen sizes:
  • Desktop (1920x1080)
  • Laptop (1366x768)
  • Tablet (768x1024)
  • Mobile (375x667)

​
Common Issues

Image Not ShowingCheck:
  • Image file exists in public/image/ folder
  • Path starts with /image/ (leading slash)
  • File extension matches (.jpg not .JPG)
  • No typos in filename
Video Not EmbeddingVerify:
  • Using video ID only, not full URL
  • Video is public on YouTube
  • No special characters in ID
PDF Won’t DownloadCheck:
  • PDF file exists in public/pdfs/
  • Path starts with /pdfs/ (leading slash)
  • File extension is .pdf (lowercase)

​
Next Steps

Customize Styling

Learn how to modify colors and styling

Deploy Your Site

Publish your updated project list

Build docs developers (and LLMs) love

Get started for freeTalk to us