Update documentation
This commit is contained in:
parent
fcc5817da7
commit
7e6b414c6f
3 changed files with 176 additions and 176 deletions
145
README.html
145
README.html
|
|
@ -1,145 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Next.js Portfolio Template with Docker</title>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 20px;
|
|
||||||
font-family: system-ui, -apple-system, sans-serif;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
background: #f6f8fa;
|
|
||||||
padding: 16px;
|
|
||||||
border-radius: 6px;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
font-family: monospace;
|
|
||||||
background: #f6f8fa;
|
|
||||||
padding: 2px 4px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>Next.js Portfolio Template with Docker</h1>
|
|
||||||
|
|
||||||
<p>Modern portfolio website template built with Next.js, Tailwind CSS, and Docker.</p>
|
|
||||||
|
|
||||||
<h2>Features</h2>
|
|
||||||
<ul>
|
|
||||||
<li>Next.js 14+ with App Router</li>
|
|
||||||
<li>Tailwind CSS for styling</li>
|
|
||||||
<li>Docker multi-stage builds</li>
|
|
||||||
<li>PNPM package manager</li>
|
|
||||||
<li>Production-ready configuration</li>
|
|
||||||
<li>Contact form component</li>
|
|
||||||
<li>Responsive design</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>Core Dependencies</h2>
|
|
||||||
<ul>
|
|
||||||
<li>Next.js 14 (App Router)</li>
|
|
||||||
<li>React 18</li>
|
|
||||||
<li>Tailwind CSS 3</li>
|
|
||||||
<li>PNPM 8</li>
|
|
||||||
<li>TypeScript 5</li>
|
|
||||||
<li>Lucide React Icons</li>
|
|
||||||
<li>PostCSS 8</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>Configuration Files</h2>
|
|
||||||
|
|
||||||
<h3>Git Configuration</h3>
|
|
||||||
<h4>.gitignore</h4>
|
|
||||||
<pre><code>node_modules/
|
|
||||||
.next/
|
|
||||||
.env*
|
|
||||||
.DS_Store
|
|
||||||
*.pem
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
.pnpm-debug.log*
|
|
||||||
.vercel</code></pre>
|
|
||||||
|
|
||||||
<h3>Docker Configuration</h3>
|
|
||||||
<h4>.dockerignore</h4>
|
|
||||||
<pre><code>node_modules
|
|
||||||
.next
|
|
||||||
.git
|
|
||||||
.env*</code></pre>
|
|
||||||
|
|
||||||
<h4>docker-compose.yml (Production)</h4>
|
|
||||||
<pre><code>version: '3.8'
|
|
||||||
services:
|
|
||||||
web:
|
|
||||||
build:
|
|
||||||
context: .
|
|
||||||
dockerfile: Dockerfile
|
|
||||||
ports:
|
|
||||||
- "805:805"
|
|
||||||
environment:
|
|
||||||
- NODE_ENV=production
|
|
||||||
- PORT=805
|
|
||||||
restart: unless-stopped</code></pre>
|
|
||||||
|
|
||||||
<h4>docker-compose.dev.yml (Development)</h4>
|
|
||||||
<pre><code>version: '3.8'
|
|
||||||
services:
|
|
||||||
web-dev:
|
|
||||||
build:
|
|
||||||
context: .
|
|
||||||
dockerfile: Dockerfile.dev
|
|
||||||
ports:
|
|
||||||
- "3000:3000"
|
|
||||||
volumes:
|
|
||||||
- .:/app
|
|
||||||
- /app/node_modules
|
|
||||||
- /app/.next
|
|
||||||
environment:
|
|
||||||
- NODE_ENV=development
|
|
||||||
command: pnpm dev</code></pre>
|
|
||||||
|
|
||||||
<h2>Development Setup</h2>
|
|
||||||
<ol>
|
|
||||||
<li>Install PNPM: <code>corepack enable && corepack prepare pnpm@latest --activate</code></li>
|
|
||||||
<li>Install dependencies: <code>pnpm install</code></li>
|
|
||||||
<li>Run development server: <code>docker compose -f docker-compose.dev.yml up</code></li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<h2>Production Deployment</h2>
|
|
||||||
<ol>
|
|
||||||
<li>Build and run: <code>docker compose up -d</code></li>
|
|
||||||
<li>Access site on port 805</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<h2>Portainer Deployment Steps</h2>
|
|
||||||
<ol>
|
|
||||||
<li>Add stack in Portainer</li>
|
|
||||||
<li>Configure GitHub repository access</li>
|
|
||||||
<li>Set compose path to docker-compose.yml</li>
|
|
||||||
<li>Deploy and monitor through Portainer UI</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<h2>Project Structure</h2>
|
|
||||||
<ul>
|
|
||||||
<li><code>/src/app</code> - Next.js pages and routes</li>
|
|
||||||
<li><code>/src/components</code> - Reusable React components</li>
|
|
||||||
<li><code>/src/styles</code> - Global styles and Tailwind config</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>Best Practices</h2>
|
|
||||||
<ul>
|
|
||||||
<li>Use PNPM for consistent dependency management</li>
|
|
||||||
<li>Follow Next.js App Router patterns</li>
|
|
||||||
<li>Maintain separate Docker configurations for dev/prod</li>
|
|
||||||
<li>Keep sensitive data in .env files (not in repository)</li>
|
|
||||||
<li>Use multi-stage builds for production</li>
|
|
||||||
</ul>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
165
README.md
165
README.md
|
|
@ -1,44 +1,147 @@
|
||||||
# Next.js Portfolio Template with Docker
|
# Finlion Website
|
||||||
|
|
||||||
Modern portfolio website template built with Next.js, Tailwind CSS, and Docker.
|
A modern, responsive business website built with Next.js, featuring a contact form, services showcase, and responsive design.
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
- Next.js 14+ with App Router
|
- Modern, responsive design with Tailwind CSS
|
||||||
|
- Server-side rendering with Next.js 15+
|
||||||
|
- Contact form with email integration
|
||||||
|
- Rate limiting for API routes
|
||||||
|
- Redis integration for caching and rate limiting
|
||||||
|
- Docker containerization for both development and production
|
||||||
|
- Animated UI components with Framer Motion
|
||||||
|
- Toast notifications system
|
||||||
|
- Responsive navigation with mobile support
|
||||||
|
- Services showcase section
|
||||||
|
- About page
|
||||||
|
- Contact page with form validation
|
||||||
|
|
||||||
|
## Technology Stack
|
||||||
|
### Frontend
|
||||||
|
- Next.js 15.0.4 with App Router
|
||||||
|
- React 19.0.0
|
||||||
|
- TypeScript
|
||||||
- Tailwind CSS for styling
|
- Tailwind CSS for styling
|
||||||
- Docker multi-stage builds
|
- Framer Motion for animations
|
||||||
|
- HeadlessUI for UI components
|
||||||
|
- Lucide React & React Icons for icons
|
||||||
|
|
||||||
|
### Backend
|
||||||
|
- Next.js API Routes
|
||||||
|
- Nodemailer for email functionality
|
||||||
|
- Upstash Redis for rate limiting
|
||||||
|
- Environment variables management
|
||||||
|
|
||||||
|
### Development & Build Tools
|
||||||
|
- PNPM 9.14.2 package manager
|
||||||
|
- ESLint for code linting
|
||||||
|
- TypeScript for type safety
|
||||||
|
- Docker & Docker Compose
|
||||||
|
- PostCSS & Autoprefixer
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
- Node.js 18+ installed
|
||||||
- PNPM package manager
|
- PNPM package manager
|
||||||
- Production-ready configuration
|
- Docker and Docker Compose (for containerized development)
|
||||||
- Responsive design
|
- Redis (handled through Upstash)
|
||||||
|
|
||||||
## Core Dependencies
|
### Environment Variables
|
||||||
- Next.js 14 (App Router)
|
Create a `.env` file in the root directory with the following variables:
|
||||||
- React 18
|
```env
|
||||||
- Tailwind CSS 3
|
# Email Configuration
|
||||||
- PNPM 8
|
SMTP_HOST=your-smtp-host
|
||||||
- TypeScript 5
|
SMTP_PORT=your-smtp-port
|
||||||
- Lucide React Icons
|
SMTP_USER=your-smtp-user
|
||||||
- PostCSS 8
|
SMTP_PASS=your-smtp-password
|
||||||
|
FROM_EMAIL=your-from-email
|
||||||
|
TO_EMAIL=your-to-email
|
||||||
|
|
||||||
## Development Setup
|
# Redis Configuration (for rate limiting)
|
||||||
1. Install PNPM: `corepack enable && corepack prepare pnpm@latest --activate`
|
UPSTASH_REDIS_REST_URL=your-redis-url
|
||||||
2. Install dependencies: `pnpm install`
|
UPSTASH_REDIS_REST_TOKEN=your-redis-token
|
||||||
3. Run development server: `docker compose -f docker-compose.dev.yml up`
|
```
|
||||||
|
|
||||||
## Production Deployment
|
### Development Setup
|
||||||
1. Build and run: `docker compose up -d`
|
|
||||||
2. Access site on port 805
|
|
||||||
|
|
||||||
## Docker Configurations
|
1. Install PNPM (if not already installed):
|
||||||
|
```bash
|
||||||
|
corepack enable && corepack prepare pnpm@latest --activate
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Install dependencies:
|
||||||
|
```bash
|
||||||
|
pnpm install
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Start the development server:
|
||||||
|
|
||||||
|
Using Docker:
|
||||||
|
```bash
|
||||||
|
docker compose -f docker-compose.dev.yml up
|
||||||
|
```
|
||||||
|
|
||||||
|
Without Docker:
|
||||||
|
```bash
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
The site will be available at `http://localhost:3000`
|
||||||
|
|
||||||
|
### Production Deployment
|
||||||
|
|
||||||
|
1. Build and run using Docker:
|
||||||
|
```bash
|
||||||
|
docker compose up -d
|
||||||
|
```
|
||||||
|
|
||||||
|
The production site will be available at `http://localhost:805`
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
```
|
||||||
|
├── public/ # Static files
|
||||||
|
│ ├── images/ # Image assets
|
||||||
|
│ └── ...
|
||||||
|
├── src/
|
||||||
|
│ ├── app/ # Next.js app router pages
|
||||||
|
│ │ ├── api/ # API routes
|
||||||
|
│ │ ├── about/ # About page
|
||||||
|
│ │ ├── contact/ # Contact page
|
||||||
|
│ │ └── services/ # Services page
|
||||||
|
│ ├── components/ # React components
|
||||||
|
│ │ ├── home/ # Home page components
|
||||||
|
│ │ ├── layout/ # Layout components
|
||||||
|
│ │ ├── providers/ # Context providers
|
||||||
|
│ │ ├── shared/ # Shared components
|
||||||
|
│ │ └── ui/ # UI components
|
||||||
|
│ ├── data/ # Static data
|
||||||
|
│ ├── lib/ # Utility functions
|
||||||
|
│ ├── styles/ # Global styles
|
||||||
|
│ └── types/ # TypeScript types
|
||||||
|
```
|
||||||
|
|
||||||
|
## API Routes
|
||||||
|
- `/api/contact` - Contact form submission endpoint with rate limiting
|
||||||
|
|
||||||
|
## Available Scripts
|
||||||
|
- `pnpm dev` - Start development server
|
||||||
|
- `pnpm build` - Build production application
|
||||||
|
- `pnpm start` - Start production server
|
||||||
|
- `pnpm lint` - Run ESLint
|
||||||
|
|
||||||
|
## Docker Configuration
|
||||||
|
Three Docker Compose configurations are available:
|
||||||
- `docker-compose.yml` - Production deployment
|
- `docker-compose.yml` - Production deployment
|
||||||
- `docker-compose.dev.yml` - Local development with hot reload
|
- `docker-compose.dev.yml` - Development environment with hot reload
|
||||||
- `docker-compose.staging.yml` - Staging environment
|
- `docker-compose.staging.yml` - Staging environment
|
||||||
|
|
||||||
## Portainer Deployment
|
## Contributing
|
||||||
1. Add repository to Portainer
|
1. Fork the repository
|
||||||
2. Use `docker-compose.yml` as compose path
|
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
|
||||||
3. Deploy stack
|
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
|
||||||
|
4. Push to the branch (`git push origin feature/amazing-feature`)
|
||||||
|
5. Open a Pull Request
|
||||||
|
|
||||||
## Structure
|
## License
|
||||||
- `/src/app` - Next.js pages and routes
|
This project is proprietary and confidential.
|
||||||
- `/src/components` - Reusable React components
|
|
||||||
- `/src/styles` - Global styles and Tailwind config
|
|
||||||
|
|
|
||||||
42
Tech_Stack
Normal file
42
Tech_Stack
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
Technology Stack Overview:
|
||||||
|
|
||||||
|
Core Framework & Language:
|
||||||
|
- Next.js 15.0.4 (React Framework)
|
||||||
|
- React 19.0.0
|
||||||
|
- TypeScript
|
||||||
|
- Node.js
|
||||||
|
|
||||||
|
Styling & UI:
|
||||||
|
- Tailwind CSS
|
||||||
|
- @headlessui/react (UI components)
|
||||||
|
- Framer Motion (Animation library)
|
||||||
|
- Lucide React (Icon library)
|
||||||
|
- React Icons
|
||||||
|
|
||||||
|
Package Management:
|
||||||
|
- PNPM (v9.14.2)
|
||||||
|
|
||||||
|
Frontend Libraries:
|
||||||
|
- @emotion/is-prop-valid (Prop validation)
|
||||||
|
- Framer Motion (Animations)
|
||||||
|
|
||||||
|
Backend & API:
|
||||||
|
- Next.js API Routes
|
||||||
|
- Nodemailer (Email functionality)
|
||||||
|
- Upstash Redis (Rate limiting, caching)
|
||||||
|
|
||||||
|
Development & Build Tools:
|
||||||
|
- ESLint (Code linting)
|
||||||
|
- TypeScript
|
||||||
|
- PostCSS
|
||||||
|
- Autoprefixer
|
||||||
|
|
||||||
|
Containerization & Deployment:
|
||||||
|
- Docker
|
||||||
|
- Docker Compose
|
||||||
|
|
||||||
|
Project Structure:
|
||||||
|
- App Router architecture (Next.js 13+ structure)
|
||||||
|
- TypeScript for type safety
|
||||||
|
- Modular component organization
|
||||||
|
- Separation of concerns (components, lib, types)
|
||||||
Loading…
Add table
Reference in a new issue