Development Workflow

Development Workflow

Best practices and recommended workflow for developing with this template.

Daily Development Workflow

1. Start Development Server

npm run dev

2. Make Changes

Edit files in src/ directory:

• Components in src/components/
• Pages in src/pages/
• Styles in src/styles/

3. Test Changes

• Changes auto-reload with HMR
• Check browser console for errors
• Test functionality manually

4. Format and Lint Code

# Format code with Prettier
npm run format

# Check linting
npm run lint

Fix any errors or warnings before committing.

Pre-commit Checklist:

graph LR
    A[Code Changes] --> B[Format Code]
    B --> C{Format Check}
    C -->|Pass| D[Run Lint]
    C -->|Fail| B
    D --> E{Lint Check}
    E -->|Pass| F[Ready to Commit]
    E -->|Fail| G[Fix Errors]
    G --> D

Loading

Feature Development Workflow

1. Create Feature Branch

git checkout -b feature/new-feature

2. Develop Feature

• Create components
• Add pages
• Implement logic
• Style components

3. Test Locally

npm run dev

4. Build and Preview

npm run build
npm run preview

5. Format and Lint

# Format code
npm run format

# Check lint
npm run lint

6. Commit Changes

git add .
git commit -m "feat: add new feature"

7. Push and Create PR

git push origin feature/new-feature

Redux Development

Create a Slice

// src/slices/todoSlice.js
import { createSlice } from '@reduxjs/toolkit'

const todoSlice = createSlice({
  name: 'todo',
  initialState: { items: [] },
  reducers: {
    addTodo: (state, action) => {
      state.items.push(action.payload)
    },
    removeTodo: (state, action) => {
      state.items = state.items.filter(item => item.id !== action.payload)
    }
  }
})

export const { addTodo, removeTodo } = todoSlice.actions
export default todoSlice.reducer

Add to Store

// src/store/store.js
import { configureStore } from '@reduxjs/toolkit'
import todoReducer from '../slices/todoSlice'

export const store = configureStore({
  reducer: {
    todo: todoReducer
  }
})

Use in Components

import { useDispatch, useSelector } from 'react-redux'
import { addTodo } from '../slices/todoSlice'

function TodoList() {
  const todos = useSelector(state => state.todo.items)
  const dispatch = useDispatch()
  
  const handleAdd = () => {
    dispatch(addTodo({ id: Date.now(), text: 'New todo' }))
  }
  
  return (
    <div>
      <button onClick={handleAdd}>Add Todo</button>
      {todos.map(todo => <div key={todo.id}>{todo.text}</div>)}
    </div>
  )
}

Routing Development

Define Routes

// src/routes/index.jsx
import { createBrowserRouter } from 'react-router-dom'
import Home from '../pages/Home'
import Login from '../pages/Login'
import Dashboard from '../pages/Dashboard'
import ProtectedRoute from './ProtectedRoute'

export const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/login', element: <Login /> },
  {
    path: '/dashboard',
    element: <ProtectedRoute><Dashboard /></ProtectedRoute>
  }
])

Protected Routes

// src/routes/ProtectedRoute.jsx
import { Navigate } from 'react-router-dom'
import { useAuth } from '../hooks/useAuth'

function ProtectedRoute({ children }) {
  const { user } = useAuth()
  
  if (!user) {
    return <Navigate to="/login" />
  }
  
  return children
}

Firebase Development

Authentication

import { auth } from '../firebase/config'
import { signInWithEmailAndPassword, signOut } from 'firebase/auth'

// Sign in
const login = async (email, password) => {
  await signInWithEmailAndPassword(auth, email, password)
}

// Sign out
const logout = async () => {
  await signOut(auth)
}

Firestore Operations

import { db } from '../firebase/config'
import { collection, addDoc, getDocs, updateDoc, deleteDoc, doc } from 'firebase/firestore'

// Create
const addItem = async (data) => {
  await addDoc(collection(db, 'items'), data)
}

// Read
const getItems = async () => {
  const snapshot = await getDocs(collection(db, 'items'))
  return snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }))
}

// Update
const updateItem = async (id, data) => {
  await updateDoc(doc(db, 'items', id), data)
}

// Delete
const deleteItem = async (id) => {
  await deleteDoc(doc(db, 'items', id))
}

Testing Workflow

Manual Testing Checklist

• ✅ Test all routes
• ✅ Test authentication flow
• ✅ Test CRUD operations
• ✅ Test responsive design
• ✅ Check browser console for errors
• ✅ Test in different browsers

Build Testing

npm run build
npm run preview

Test the production build before deploying.

Deployment Workflow

1. Test Locally

npm run dev

2. Build

npm run build

3. Preview Build

npm run preview

4. Deploy

firebase deploy

Best Practices

Code Organization

• ✅ One component per file
• ✅ Group related files together
• ✅ Use meaningful file names
• ✅ Keep components small and focused

State Management

• ✅ Use Redux for global state
• ✅ Use local state for component-specific data
• ✅ Keep state minimal
• ✅ Normalize complex data

Styling

• ✅ Use consistent naming conventions
• ✅ Organize CSS files by component
• ✅ Avoid inline styles
• ✅ Use CSS variables for themes

Firebase

• ✅ Use environment variables
• ✅ Test with Firebase emulators
• ✅ Handle errors properly
• ✅ Implement proper security rules

Useful Commands

# Development
npm run dev              # Start dev server
npm run build            # Production build
npm run preview          # Preview build

# Code Quality
npm run format           # Format code with Prettier
npm run format:check     # Check if code is formatted
npm run lint             # Run ESLint

# Firebase
firebase login           # Login to Firebase
firebase deploy          # Deploy everything
firebase serve           # Local Firebase testing

# Git
git status               # Check changes
git add .                # Stage all changes
git commit -m "message"  # Commit changes
git push                 # Push to remote

---

Resources:

• React Docs
• Redux Toolkit Docs
• Firebase Docs
• Vite Docs