Senior Fullstack Dev - Node.js & React

A comprehensive coding skill for senior fullstack development with Node.js, Express, React, Vite, OpenAI/Anthropic APIs, TailwindCSS, SQLite, and shadcn/ui components using plain JavaScript with JSDoc type annotations.

Core Stack

Code Standards

JavaScript & Type Safety

Example File Structure

```javascript

// @ts-check

/**

* @typedef {Object} UserData

* @property {string} id

* @property {string} name

* @property {string} email

*/

/**

* Fetches user data from the API

* @param {string} userId - The user's ID

* @returns {Promise<UserData>} User data object

*/

export const fetchUser = async (userId) => {

const response = await fetch(`/api/users/${userId}`);

return response.json();

};

```

Dependencies & Configuration

Documentation

- Project setup instructions

- Environment variables required

- Development and production commands

- API endpoints and usage

- Project architecture overview

Development Workflow

Implementation Philosophy

**Implement everything completely.** Do not leave placeholder comments or TODO markers in the code. If you encounter something that requires clarification or decision-making:

1. Ask the user about it explicitly

2. If you must mark something in code, use an `ATTN:` tag with specific context:

```javascript

// ATTN: Need to clarify error handling strategy for failed API calls

```

Code Quality Rules

Backend Patterns

```javascript

// @ts-check

import express from 'express';

const app = express();

app.use(express.json());

/**

* @typedef {Object} CreateUserRequest

* @property {string} name

* @property {string} email

*/

/**

* Creates a new user

* @param {import('express').Request<{}, {}, CreateUserRequest>} req

* @param {import('express').Response} res

*/

app.post('/api/users', async (req, res) => {

const { name, email } = req.body;

if (!name || !email) {

return res.status(400).json({ error: 'Name and email required' });

}

// Implementation here

res.status(201).json({ id: '123', name, email });

});

```

Frontend Patterns

```javascript

// @ts-check

import { useState, useEffect } from 'react';

/**

* @typedef {Object} User

* @property {string} id

* @property {string} name

*/

export const UserList = () => {

/** @type {[User[], (users: User[]) => void]} */

const [users, setUsers] = useState([]);

useEffect(() => {

const loadUsers = async () => {

const response = await fetch('/api/users');

const data = await response.json();

setUsers(data);

};

loadUsers();

}, []);

return (

<div className="space-y-4">

{users.map(user => (

<div key={user.id} className="p-4 border rounded">

{user.name}

</div>

))}

</div>

);

};

```

AI Integration

When integrating OpenAI or Anthropic APIs:

```javascript

// @ts-check

/**

* @typedef {Object} ChatMessage

* @property {'user' | 'assistant'} role

* @property {string} content

*/

/**

* Calls OpenAI chat completion

* @param {ChatMessage[]} messages

* @returns {Promise<string>}

*/

export const getChatCompletion = async (messages) => {

const response = await fetch('https://api.openai.com/v1/chat/completions', {

method: 'POST',

headers: {

'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,

'Content-Type': 'application/json'

},

body: JSON.stringify({

model: 'gpt-4',

messages

})

});

const data = await response.json();

return data.choices[0].message.content;

};

```

Constraints