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
|
||||
- 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
|
||||
- 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
|
||||
- Production-ready configuration
|
||||
- Responsive design
|
||||
- Docker and Docker Compose (for containerized development)
|
||||
- Redis (handled through Upstash)
|
||||
|
||||
## Core Dependencies
|
||||
- Next.js 14 (App Router)
|
||||
- React 18
|
||||
- Tailwind CSS 3
|
||||
- PNPM 8
|
||||
- TypeScript 5
|
||||
- Lucide React Icons
|
||||
- PostCSS 8
|
||||
### Environment Variables
|
||||
Create a `.env` file in the root directory with the following variables:
|
||||
```env
|
||||
# Email Configuration
|
||||
SMTP_HOST=your-smtp-host
|
||||
SMTP_PORT=your-smtp-port
|
||||
SMTP_USER=your-smtp-user
|
||||
SMTP_PASS=your-smtp-password
|
||||
FROM_EMAIL=your-from-email
|
||||
TO_EMAIL=your-to-email
|
||||
|
||||
## Development Setup
|
||||
1. Install PNPM: `corepack enable && corepack prepare pnpm@latest --activate`
|
||||
2. Install dependencies: `pnpm install`
|
||||
3. Run development server: `docker compose -f docker-compose.dev.yml up`
|
||||
# Redis Configuration (for rate limiting)
|
||||
UPSTASH_REDIS_REST_URL=your-redis-url
|
||||
UPSTASH_REDIS_REST_TOKEN=your-redis-token
|
||||
```
|
||||
|
||||
## Production Deployment
|
||||
1. Build and run: `docker compose up -d`
|
||||
2. Access site on port 805
|
||||
### Development Setup
|
||||
|
||||
## 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.dev.yml` - Local development with hot reload
|
||||
- `docker-compose.dev.yml` - Development environment with hot reload
|
||||
- `docker-compose.staging.yml` - Staging environment
|
||||
|
||||
## Portainer Deployment
|
||||
1. Add repository to Portainer
|
||||
2. Use `docker-compose.yml` as compose path
|
||||
3. Deploy stack
|
||||
## Contributing
|
||||
1. Fork the repository
|
||||
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
|
||||
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
|
||||
- `/src/app` - Next.js pages and routes
|
||||
- `/src/components` - Reusable React components
|
||||
- `/src/styles` - Global styles and Tailwind config
|
||||
## License
|
||||
This project is proprietary and confidential.
|
||||
|
|
|
|||
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