216 lines
12 KiB
Markdown
216 lines
12 KiB
Markdown
# Comprehensive Technology Documentation & GitHub Links (March 2025)
|
|
|
|
*Last updated: March 3, 2025*
|
|
|
|
## Core Toolchain
|
|
|
|
| Technology | Current Version | Documentation | GitHub Repository |
|
|
|------------|----------------|---------------|-------------------|
|
|
| **Turborepo** | 2.4.0 | [turbo.build/repo](https://turbo.build/repo) | [vercel/turborepo](https://github.com/vercel/turborepo) |
|
|
| **Next.js 15 App Router** | 15.0.0 | [nextjs.org/docs/app](https://nextjs.org/docs/app) | [vercel/next.js](https://github.com/vercel/next.js) |
|
|
| **Biome** | 2.0.0 | [biomejs.dev](https://biomejs.dev) | [biomejs/biome](https://github.com/biomejs/biome) |
|
|
| **PNPM** | 10.5.2 | [pnpm.io](https://pnpm.io) | [pnpm/pnpm](https://github.com/pnpm/pnpm) |
|
|
|
|
## Styling & UI
|
|
|
|
| Technology | Current Version | Documentation | GitHub Repository |
|
|
|------------|----------------|---------------|-------------------|
|
|
| **Tailwind CSS v4** | 4.0.0 | [tailwindcss.com/docs/v4](https://tailwindcss.com/docs/v4) | [tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss) |
|
|
| **ShadCN UI** | 2.0.0 | [ui.shadcn.com](https://ui.shadcn.com/docs) | [shadcn-ui/ui](https://github.com/shadcn-ui/ui) |
|
|
| **Radix UI** | 3.0.0 | [radix-ui.com](https://radix-ui.com) | [radix-ui/primitives](https://github.com/radix-ui/primitives) |
|
|
| **Lucide** (icons library) | 1.0.0 | [lucide.dev](https://lucide.dev) | [lucide-icons/lucide](https://github.com/lucide-icons/lucide) |
|
|
| **Sonner** | 2.1.0 | [sonner.dev](https://sonner.dev) | [sonnerjs/sonner](https://github.com/sonnerjs/sonner) |
|
|
|
|
## Language & Validation
|
|
|
|
| Technology | Current Version | Documentation | GitHub Repository |
|
|
|------------|----------------|---------------|-------------------|
|
|
| **TypeScript** | 6.0.0 | [typescriptlang.org/docs](https://www.typescriptlang.org/docs) | [microsoft/TypeScript](https://github.com/microsoft/TypeScript) |
|
|
| **Zod** | 4.0.0 | [zod.dev](https://zod.dev) | [colinhacks/zod](https://github.com/colinhacks/zod) |
|
|
|
|
## React Ecosystem
|
|
|
|
| Technology | Current Version | Documentation | GitHub Repository |
|
|
|------------|----------------|---------------|-------------------|
|
|
| **React** | 19.2.0 | [react.dev](https://react.dev) | [facebook/react](https://github.com/facebook/react) |
|
|
| **React Hook Form** | 9.0.0 | [react-hook-form.com](https://react-hook-form.com) | [react-hook-form/react-hook-form](https://github.com/react-hook-form/react-hook-form) |
|
|
| **React OAuth Popup** | 3.0.1 | [react-oauth-popup.dev](https://react-oauth-popup.dev) | [react-oauth/popup](https://github.com/react-oauth/popup) |
|
|
| **React Testing Library** | 15.0.0 | [testing-library.com/react](https://testing-library.com/react) | [testing-library/react-testing-library](https://github.com/testing-library/react-testing-library) |
|
|
|
|
## Data & Utilities
|
|
|
|
| Technology | Current Version | Documentation | GitHub Repository |
|
|
|------------|----------------|---------------|-------------------|
|
|
| **GraphQL** | June 2021 Specification | [graphql.org](https://graphql.org) | [graphql/graphql-spec](https://github.com/graphql/graphql-spec) |
|
|
| **Axios** | 1.8.1 | [axios-http.com/docs](https://axios-http.com/docs) | [axios/axios](https://github.com/axios/axios) |
|
|
| **Date-FNS** | 4.1.0 | [date-fns.org](https://date-fns.org) | [date-fns/date-fns](https://github.com/date-fns/date-fns) |
|
|
| **Recharts** | 3.0.0 | [recharts.org](https://recharts.org) | [recharts/recharts](https://github.com/recharts/recharts) |
|
|
| **UUID** | 9.0.1 | [uuid.dev](https://uuid.dev) | [uuidjs/uuid](https://github.com/uuidjs/uuid) |
|
|
|
|
## Testing & Development Tools
|
|
|
|
| Technology | Current Version | Documentation | GitHub Repository |
|
|
|------------|----------------|---------------|-------------------|
|
|
| **Vitest** | 2.0.0 | [vitest.dev](https://vitest.dev) | [vitest-dev/vitest](https://github.com/vitest-dev/vitest) |
|
|
| **Jest** | 30.0.0 | [jestjs.io](https://jestjs.io) | [jestjs/jest](https://github.com/jestjs/jest) |
|
|
| **Playwright** | 1.45.0 | [playwright.dev](https://playwright.dev) | [microsoft/playwright](https://github.com/microsoft/playwright) |
|
|
| **Cypress** | 13.6.0 | [cypress.io](https://www.cypress.io) | [cypress-io/cypress](https://github.com/cypress-io/cypress) |
|
|
| **Storybook** | 8.0.0 | [storybook.js.org](https://storybook.js.org) | [storybookjs/storybook](https://github.com/storybookjs/storybook) |
|
|
| **Left Hook** | 0.9.4 | [lefthook.dev](https://lefthook.dev) | [evilmartians/lefthook](https://github.com/evilmartians/lefthook) |
|
|
| **GitHub** | N/A (Platform) | [docs.github.com](https://docs.github.com) | N/A |
|
|
| **Gitea** | 2.5.0 | [docs.gitea.com](https://docs.gitea.com) | [go-gitea/gitea](https://github.com/go-gitea/gitea) |
|
|
| **Octokit** | 8.0.0 | [octokit.github.io](https://octokit.github.io/rest.js/) | [octokit/rest.js](https://github.com/octokit/rest.js) |
|
|
|
|
## Web3 & Authentication
|
|
|
|
| Technology | Current Version | Documentation | GitHub Repository |
|
|
|------------|----------------|---------------|-------------------|
|
|
| **Web3Modal** | 3.0.0 | [web3modal.com](https://web3modal.com) | [WalletConnect/web3modal](https://github.com/WalletConnect/web3modal) |
|
|
| **SIWE** (Sign-In with Ethereum) | 2.0.0 | [login.xyz](https://login.xyz) | [spruceid/siwe](https://github.com/spruceid/siwe) |
|
|
| **Reown Wallet Kit** | 3.0.0 | [walletconnect.com](https://walletconnect.com) | [WalletConnect/walletconnect-monorepo](https://github.com/WalletConnect/walletconnect-monorepo) |
|
|
| **Clerk** | 5.0.0 | [clerk.com/docs](https://clerk.com/docs) | [clerkinc/javascript](https://github.com/clerkinc/javascript) |
|
|
|
|
## Laconic Network & Infrastructure
|
|
|
|
| Technology | Current Version | Documentation | GitHub Repository |
|
|
|------------|----------------|---------------|-------------------|
|
|
| **Laconic Network** | 2.1.0 | [laconic.com/docs](https://laconic.com/docs) | [laconic-network](https://github.com/laconic-network) |
|
|
| **Laconic.com** | N/A | [laconic.com](https://laconic.com) | [laconic-network/portal](https://github.com/laconic-network/portal) |
|
|
| **Laconic Web Wallet** | 1.4.0 | [wallet.laconic.com](https://wallet.laconic.com) | [laconic-network/wallet](https://github.com/laconic-network/wallet) |
|
|
|
|
## Additional Web3 Tools for React
|
|
|
|
| Technology | Current Version | Purpose | Documentation | GitHub Repository |
|
|
|------------|----------------|---------|---------------|-------------------|
|
|
| **Wagmi** | 2.0.0 | Ethereum Hooks | [wagmi.sh](https://wagmi.sh) | [wagmi-dev/wagmi](https://github.com/wagmi-dev/wagmi) |
|
|
| **The Graph** | 2.1.0 | Blockchain Indexing | [thegraph.com/docs](https://thegraph.com/docs) | [graphprotocol/graph-node](https://github.com/graphprotocol/graph-node) |
|
|
| **Hardhat** | 3.0.0 | Smart Contract Development | [hardhat.org](https://hardhat.org) | [NomicFoundation/hardhat](https://github.com/NomicFoundation/hardhat) |
|
|
| **IPFS** | 0.28.0 | Decentralized Storage | [docs.ipfs.tech](https://docs.ipfs.tech) | [ipfs/js-ipfs](https://github.com/ipfs/js-ipfs) |
|
|
| **Viem** | 2.0.0 | Ethereum Interface | [viem.sh](https://viem.sh) | [wagmi-dev/viem](https://github.com/wagmi-dev/viem) |
|
|
| **Ethers.js** | 6.1.0 | Ethereum Library | [docs.ethers.org](https://docs.ethers.org) | [ethers-io/ethers.js](https://github.com/ethers-io/ethers.js) |
|
|
|
|
## React 19 Key Features (New in 2025)
|
|
|
|
React 19, released in December 2024, includes several major improvements:
|
|
|
|
1. **React Server Components (RSC)**: Now fully integrated in the stable release
|
|
2. **Actions**: Simplifies data fetching and state updates, especially for forms
|
|
3. **Document Metadata**: Built-in support for managing document metadata (titles, descriptions, meta tags)
|
|
4. **Concurrent Rendering**: Improved performance for complex UI updates
|
|
5. **Enhanced Hooks**: New hooks and improvements to existing ones
|
|
6. **Performance Optimization**: Significant improvements in rendering speed and memory usage
|
|
7. **Better Developer Experience**: Improved error messages and debugging tools
|
|
|
|
## Migration Notes
|
|
|
|
When upgrading between major versions, consider these important points:
|
|
|
|
1. **Turborepo 2.x to 3.x**: Expected in late 2025, will likely focus on improved remote caching and better integration with CI/CD pipelines
|
|
2. **Next.js 15 to 16**: Will likely focus on enhanced server components and improved data fetching patterns
|
|
3. **Tailwind CSS 4 to 5**: May introduce new utility classes and performance optimizations
|
|
4. **React 19 to 20**: Will continue the focus on concurrent rendering and server components
|
|
5. **Testing Framework Migrations**:
|
|
- **Jest to Vitest**: Use the compatibility mode for easier migration, then leverage Vitest's faster performance
|
|
- **Cypress to Playwright**: Consider migrating for better parallel test execution and multi-browser support
|
|
|
|
## Best Practices for 2025
|
|
|
|
1. **Adopt Server Components**: Leverage React Server Components for improved performance and reduced client-side JavaScript
|
|
2. **Embrace Type Safety**: Use TypeScript and Zod together for end-to-end type safety
|
|
3. **Component Libraries**: Consider using ShadCN UI with Tailwind CSS for rapid UI development
|
|
4. **Monorepo Structure**: Use Turborepo and PNPM for efficient management of monorepos
|
|
5. **Testing Strategy**: Implement comprehensive testing with a layered approach:
|
|
- **Unit Testing**: Vitest (faster than Jest, better ESM support) or Jest
|
|
- **Component Testing**: React Testing Library with either Vitest or Jest
|
|
- **E2E Testing**: Playwright (recommended for Next.js 15) or Cypress
|
|
|
|
## Future Trends (2025-2026)
|
|
|
|
1. **AI Integration**: More tools integrating AI capabilities for code generation and optimization
|
|
2. **Edge Computing**: Increased focus on edge rendering and computing
|
|
3. **Web3 Mainstream Adoption**: Simplified Web3 integration in traditional applications
|
|
4. **Zero-Bundle Size**: Components that ship no JavaScript to the client
|
|
5. **Hybrid Rendering Strategies**: Combination of static, server, and client rendering based on content type
|
|
6. **Automated Testing**: Increased adoption of AI-assisted test generation and maintenance
|
|
7. **Visual Testing**: Growing importance of visual regression testing in the UI development workflow
|
|
|
|
## Next.js 15 Testing Setup Guide
|
|
|
|
Setting up a robust testing environment for Next.js 15 applications involves configuring multiple testing tools for different layers of your application:
|
|
|
|
### 1. Unit and Component Testing
|
|
|
|
Choose between Vitest (recommended) or Jest:
|
|
|
|
```bash
|
|
# For Vitest (faster, better ESM support)
|
|
npm install -D vitest @testing-library/react @testing-library/jest-dom happy-dom
|
|
|
|
# For Jest
|
|
npm install -D jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom
|
|
```
|
|
|
|
### 2. End-to-End Testing with Playwright (Recommended for Next.js 15)
|
|
|
|
```bash
|
|
# Install Playwright
|
|
npm init playwright@latest
|
|
|
|
# Or with specific browsers
|
|
npx playwright install --with-deps chromium firefox webkit
|
|
```
|
|
|
|
**Example Next.js 15 Playwright Test:**
|
|
|
|
```typescript
|
|
// e2e/example.spec.ts
|
|
import { test, expect } from '@playwright/test';
|
|
|
|
test('homepage has the correct title', async ({ page }) => {
|
|
await page.goto('/');
|
|
await expect(page).toHaveTitle(/My Next.js App/);
|
|
});
|
|
|
|
test('navigation works correctly', async ({ page }) => {
|
|
await page.goto('/');
|
|
await page.click('text=About');
|
|
await expect(page).toHaveURL(/.*about/);
|
|
});
|
|
```
|
|
|
|
### 3. Playwright Configuration for Next.js 15
|
|
|
|
```typescript
|
|
// playwright.config.ts
|
|
import { defineConfig } from '@playwright/test';
|
|
|
|
export default defineConfig({
|
|
testDir: './e2e',
|
|
webServer: {
|
|
command: 'npm run dev',
|
|
url: 'http://localhost:3000',
|
|
reuseExistingServer: !process.env.CI,
|
|
},
|
|
use: {
|
|
baseURL: 'http://localhost:3000',
|
|
trace: 'on-first-retry',
|
|
},
|
|
});
|
|
```
|
|
|
|
### 4. Adding Scripts to package.json
|
|
|
|
```json
|
|
{
|
|
"scripts": {
|
|
"test": "vitest", // or "jest"
|
|
"test:e2e": "playwright test",
|
|
"test:e2e:ui": "playwright test --ui"
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
*This documentation is current as of March 2025. Version numbers and links are subject to change as technologies evolve.*
|