Skip to content

amigoscode/full-stack-web

Repository files navigation

πŸš€ AmigosCode Project Starter Template

A modern, production-ready Next.js starter template with TypeScript, Tailwind CSS 4, and developer-friendly tooling.

✨ Features

  • ⚑ Next.js 15 - Latest App Router with React 19
  • 🎨 Tailwind CSS 4 - Latest version with Lightning CSS
  • πŸ”§ TypeScript - Full type safety
  • πŸ“¦ Axios - HTTP client with interceptors and error handling
  • 🎯 ESLint - Code linting and quality
  • πŸ’… Prettier - Code formatting with import sorting
  • 🐢 Husky - Git hooks for code quality
  • 🎭 Custom Components - Reusable UI components and icons
  • πŸ“± Responsive Design - Mobile-first approach
  • πŸ”’ Type Safety - Full TypeScript support

πŸ› οΈ Tech Stack

Technology Version Purpose
Next.js 15.0.3 React framework
React 19.0.0-rc.1 UI library
TypeScript 5.x Type safety
Tailwind CSS 4.0.0 Styling
Axios 1.10.0 HTTP client
ESLint 8.x Code linting
Prettier 3.2.4 Code formatting
Husky 8.0.3 Git hooks

πŸ“‹ Prerequisites

Before you begin, ensure you have the following installed:

πŸš€ Quick Start

  1. Clone the repository

    git clone https://github.com/amigoscode/amigoscode-starter-web.git
    cd amigoscode-starter-web
  2. Install dependencies

    pnpm install
  3. Start the development server

    pnpm dev
  4. Open your browser Navigate to http://localhost:3000

πŸ“ Project Structure

β”œβ”€β”€ app/                    # Next.js App Router
β”‚   β”œβ”€β”€ layout.tsx         # Root layout
β”‚   └── page.tsx           # Home page
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ components/        # Reusable components
β”‚   β”œβ”€β”€ hooks/            # Custom React hooks
β”‚   β”œβ”€β”€ services/         # API services
β”‚   β”œβ”€β”€ icons/            # SVG icons
β”‚   β”œβ”€β”€ fonts.ts          # Font configuration
β”‚   └── globals.css       # Global styles
β”œβ”€β”€ public/               # Static assets
β”œβ”€β”€ docs/                 # Documentation
└── config files          # Various configuration files

🎯 Available Scripts

Script Description
pnpm dev Start development server
pnpm build Build for production
pnpm start Start production server
pnpm lint Run ESLint
pnpm prettier:format Format code with Prettier

πŸ”§ Configuration

Environment Variables

Create a .env.local file in the root directory:

# API Configuration
NEXT_PUBLIC_API_URL=https://your-api.com

# Add other environment variables as needed

Tailwind CSS

The template uses Tailwind CSS 4 with custom configuration:

  • Custom fonts (Inter, Montserrat)
  • Custom animations and keyframes
  • Responsive design utilities

TypeScript

Full TypeScript support with:

  • Strict type checking
  • Path aliases (@/ for src/)
  • Type-safe API calls

πŸ“š Documentation

🌟 Key Features

🎨 Modern Styling

  • Tailwind CSS 4 with Lightning CSS engine
  • Custom animations and keyframes
  • Responsive design patterns
  • Dark mode ready

πŸ”Œ API Integration

  • Axios client with interceptors
  • Type-safe API calls
  • Error handling and logging
  • Authentication support

🧩 Component Library

  • Reusable components (ProductCard, Orb, etc.)
  • Icon system with SVG components
  • Custom hooks for common patterns
  • TypeScript interfaces

πŸ› οΈ Developer Experience

  • ESLint configuration
  • Prettier with import sorting
  • Husky pre-commit hooks
  • TypeScript strict mode

🀝 Contributing

We welcome contributions! Please follow these steps:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feat/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feat/amazing-feature)
  5. Open a Pull Request

Branch Naming Convention

  • Feature: feat/feature-name
  • Bug Fix: fix/bug-description
  • Documentation: docs/documentation-update
  • Refactor: refactor/component-name

πŸ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.

πŸ™ Acknowledgments

  • AmigosCode - For the amazing learning platform
  • Next.js - For the incredible React framework
  • Tailwind CSS - For the utility-first CSS framework
  • Vercel - For the deployment platform

πŸ“ž Support

Releases

No releases published

Packages

 
 
 

Contributors

Languages