Skip to content

Getting Started.md

Latest commit

 

History

History
189 lines (145 loc) · 4.55 KB

Getting Started.md

File metadata and controls

189 lines (145 loc) · 4.55 KB

Getting Started

Prerequisites

Before you begin, make sure you have the following installed:

Requirement Version Notes
Node.js >= 18.x LTS recommended
npm >= 9.x Comes with Node.js
Git Latest For version control

Verify your installation:

node --version    # Should show v18.x or higher
npm --version     # Should show 9.x or higher
git --version     # Should show latest version

Quick Start

1. Clone or Download

# If using git
git clone <repository-url> js-boilerplate
cd js-boilerplate

2. Install Dependencies

npm install

3. Environment Setup

Copy the example environment file:

cp .env.example .env

Update .env with your configuration:

VITE_API_BASE_URL=http://localhost:3001
VITE_APP_NAME=My Bootcamp App
VITE_JWT_EXPIRY=3600000

4. Start Development Server

# Start both Vite and JSON Server
npm run dev

# Or start individually:
npm run dev:vite    # Only React app
npm run dev:server  # Only JSON Server

The app will be available at:

Available Scripts

Command Description
npm run dev Start dev server + JSON Server
npm run build Build for production
npm run preview Preview production build
npm run lint Run ESLint
npm run format Format code with Prettier
npm run test Run tests
npm run test:ui Run tests with UI
npm run test:coverage Run tests with coverage

Project Overview

File Structure

src/
├── features/           # Feature-based modules
│   ├── auth/          # Complete auth example
│   │   ├── components/
│   │   ├── hooks/
│   │   └── services/
│   ├── products/      # Complete CRUD example
│   │   ├── components/
│   │   ├── context/
│   │   ├── hooks/
│   │   └── services/
│   └── ai/           # AI integration example
│       ├── components/
│       ├── context/
│       ├── hooks/
│       └── services/
├── components/        # Shared UI components
│   ├── ui/           # Button, Input, Modal, etc.
│   └── layout/       # Header, Footer, Layout
├── context/           # Global contexts
│   └── AuthContext.jsx
├── pages/            # Route pages
├── services/         # API services
├── hooks/            # Custom hooks
└── utils/            # Helpers

Key Files

File Purpose
src/main.jsx Entry point with providers
src/App.jsx Main app with routing
src/context/AuthContext.jsx Auth state management
src/services/api.js Axios instance with interceptors
src/features/products/context/ProductContext.jsx Product CRUD state

Understanding the Code

Authentication Flow

  1. User enters credentials in LoginForm
  2. Form calls useAuthContext() hook
  3. Context makes API call via authService
  4. On success: stores token in localStorage, updates user state
  5. ProtectedRoute checks user from context
  6. Redirects to original destination if authenticated

CRUD Flow (Context-based)

  1. Components use useProducts() hook
  2. Hook accesses ProductContext
  3. Context methods call productService
  4. State updates trigger re-renders
  5. Loading/error states managed in context

AI Integration Flow

  1. Components use useAi() hook
  2. Hook accesses AiContext
  3. Context calls /api/ai/plan/suggest
  4. Returns task suggestions and summary
  5. UI displays with accept/reject options

Next Steps

  1. Read the Testing Guide - Learn how to write tests
  2. Explore the Examples - Understand the auth and products features
  3. Check Best Practices - Avoid common mistakes
  4. Learn Extension Guide - How to add new features

Troubleshooting

Port Already in Use

# Find process using port 5173
lsof -i :5173
# Kill the process
kill -9 <PID>

JSON Server Not Working

Make sure port 3001 is available:

lsof -i :3001

Node Modules Issues

# Clear npm cache
npm cache clean --force

# Remove node_modules and reinstall
rm -rf node_modules
npm install

Getting Help