Adding New Projects - School Science

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:

Open the Data File

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

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
}

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

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

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"
]

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"
  }
]

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

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

Recommended Image Workflow

Take High-Quality Photos

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

Edit and Crop

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

Compress Images

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

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:

Home Page Display

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

Responsive Design

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

Lava Lamp Experiment

Customization Guide

⌘I

Documentation Index

​Overview

​Project Data Structure

​Adding a New Project

​Complete Example

​Field Guidelines

​ID (Required)

​Titulo (Required)

​Descripcion (Required)

​Materiales (Required)

​Costo (Required)

​Imagenes (Required)

​VideoUrl (Optional)

​PDFs (Optional)

​Conclusion (Required)

​Routing

​Image Optimization

​Recommended Image Workflow

​Testing Your Project

​Common Issues

​Next Steps

Customize Styling

Deploy Your Site

Overview

Project Data Structure

Adding a New Project

Complete Example

Field Guidelines

ID (Required)

Titulo (Required)

Descripcion (Required)

Materiales (Required)

Costo (Required)

Imagenes (Required)

VideoUrl (Optional)

PDFs (Optional)

Conclusion (Required)

Routing

Image Optimization

Recommended Image Workflow

Testing Your Project

Common Issues

Next Steps