← Back to Main Page

Module 2: Build Sprint 1

Understanding Your First Ticket

Learn how to approach your first ticket in the Labs project and understand the development workflow.

First Ticket Details

View your first ticket details and requirements on GitHub:

First Ticket Documentation

Resources

Approaching Your First Feature

Learn how to implement database operations and data generation for your first Data Science Labs ticket.

Implementation Checklist

  • Set up MongoDB account and create a free tier shared cluster
  • Configure database security and environment variables
  • Implement the database interface class with CRUD operations
  • Generate monster data using the MonsterLab library
  • Create functions for seeding and managing the database
  • Implement data visualization with Pandas DataFrames
  • Follow PEP style guidelines and add proper documentation
  • Test your implementation with at least 1000 monsters
# Example Database Interface Implementation

from os import getenv
from typing import Dict, Optional
import pandas as pd
from pymongo import MongoClient
from dotenv import load_dotenv
from certifi import where
from monster_lab import generate_monster  # Hypothetical monster generation library

class MonsterDatabase:
    """Interface for monster database operations."""
    
    def __init__(self):
        """Initialize database connection using environment variables."""
        load_dotenv()
        self.client = MongoClient(getenv("DB_URL"), tlsCAFile=where())
        self.db = self.client["monster_database"]
        self.collection = self.db["monsters"]
    
    def seed(self, num_monsters: int) -> bool:
        """Seed the database with specified number of monsters."""
        try:
            monsters = [generate_monster() for _ in range(num_monsters)]
            self.collection.insert_many(monsters)
            return True
        except Exception as e:
            print(f"Error seeding database: {e}")
            return False
    
    def reset(self) -> bool:
        """Delete all monsters from the collection."""
        try:
            self.collection.delete_many({})
            return True
        except Exception as e:
            print(f"Error resetting database: {e}")
            return False
    
    def count(self) -> int:
        """Return the number of monsters in the collection."""
        return self.collection.count_documents({})
    
    def dataframe(self) -> Optional[pd.DataFrame]:
        """Return a DataFrame of all monsters in the collection."""
        data = list(self.collection.find({}, {'_id': 0}))
        return pd.DataFrame(data) if data else None
    
    def html_table(self) -> Optional[str]:
        """Return HTML table representation of monster data."""
        df = self.dataframe()
        return df.to_html() if df is not None else None

Resources

Working with APIs

Understand how to interact with APIs, handle data fetching, and manage state in your React application.

// Example of fetching data from an API using axios
import axios from 'axios';
import { useState, useEffect } from 'react';

function DataFetching() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
        setLoading(false);
      } catch (error) {
        setError(error.message);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

Resources

Component Design

Learn how to create well-designed, reusable components for your React application.

// Example of a reusable button component
import React from 'react';
import PropTypes from 'prop-types';
import './Button.css';

const Button = ({ 
  variant = 'primary',
  size = 'medium',
  disabled = false,
  children,
  onClick,
  ...props 
}) => {
  const classNames = `btn btn-${variant} btn-${size} ${disabled ? 'btn-disabled' : ''}`;
  
  return (
    <button 
      className={classNames}
      disabled={disabled}
      onClick={onClick}
      {...props}
    >
      {children}
    </button>
  );
};

Button.propTypes = {
  variant: PropTypes.oneOf(['primary', 'secondary', 'danger', 'success']),
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  disabled: PropTypes.bool,
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func
};

export default Button;

Resources