Skip to content

Latest commit

 

History

History
154 lines (118 loc) · 2.86 KB

development.md

File metadata and controls

154 lines (118 loc) · 2.86 KB

Development Guide

This guide will help you set up your development environment and understand the project structure.

Prerequisites

  • Node.js 20.x or higher
  • npm 9.x or higher
  • Git
  • MongoDB (local or Atlas)
  • Basic knowledge of TypeScript and React

Project Structure

tmdb-addon/
├── addon/           # Backend server code
├── configure/       # Frontend configuration UI
├── docs/           # Documentation
├── node_modules/   # Dependencies
└── package.json    # Project configuration

Setting Up Development Environment

  1. Clone the repository:
git clone https://github.com/mrcanelas/tmdb-addon.git
cd tmdb-addon
  1. Install dependencies:
npm install
  1. Set up environment variables:
cp .env.example .env

Edit .env with your development credentials:

MONGODB_URI=your_mongodb_uri
FANART_API=your_fanart_key
TMDB_API=your_tmdb_key
HOST_NAME=http://localhost:1337
PORT=1337
  1. Start development server:
# Terminal 1 - Backend
npm run dev:server

# Terminal 2 - Frontend
npm run dev

Development Workflow

  1. Create a new branch:
git checkout -b feature/your-feature-name
  1. Make your changes:
  • Backend changes go in the addon/ directory
  • Frontend changes go in the configure/ directory
  1. Testing:
# Run tests
npm test

# Run linter
npm run lint
  1. Building:
npm run build

Code Style

We use ESLint and Prettier for code formatting. Configuration can be found in:

  • .eslintrc.js
  • .prettierrc

Hot Reload

  • Backend uses nodemon for automatic reloading
  • Frontend uses Vite's hot module replacement

Debugging

Backend Debugging

  1. Using VS Code:
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Server",
      "program": "${workspaceFolder}/addon/server.js",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    }
  ]
}
  1. Using Chrome DevTools:
node --inspect addon/server.js

Frontend Debugging

  1. Use React Developer Tools browser extension
  2. Vite's development server includes source maps

Common Development Tasks

Adding New UI Components

  1. Create component in configure/components/
  2. Add styles using Tailwind CSS
  3. Import and use in relevant pages

Best Practices

  1. Code Organization:

    • Keep components small and focused
    • Use TypeScript interfaces for type safety
    • Follow the Single Responsibility Principle

  2. Performance:

    • Implement caching where appropriate
    • Use pagination for large datasets
    • Optimize API calls

  3. Security:

    • Validate all user inputs
    • Use environment variables for secrets
    • Implement rate limiting

  4. Testing:

    • Write unit tests for critical functions
    • Test edge cases
    • Use meaningful test descriptions