From 7e6b414c6f2660f0b28cf8451f54eb55871dd43f Mon Sep 17 00:00:00 2001 From: TheMaddax Date: Wed, 11 Dec 2024 07:19:19 -0600 Subject: [PATCH] Update documentation --- README.html | 145 --------------------------------------------- README.md | 165 ++++++++++++++++++++++++++++++++++++++++++---------- Tech_Stack | 42 +++++++++++++ 3 files changed, 176 insertions(+), 176 deletions(-) delete mode 100644 README.html create mode 100644 Tech_Stack diff --git a/README.html b/README.html deleted file mode 100644 index f0d39e2..0000000 --- a/README.html +++ /dev/null @@ -1,145 +0,0 @@ - - - - - Next.js Portfolio Template with Docker - - - -

Next.js Portfolio Template with Docker

- -

Modern portfolio website template built with Next.js, Tailwind CSS, and Docker.

- -

Features

- - -

Core Dependencies

- - -

Configuration Files

- -

Git Configuration

-

.gitignore

- 
node_modules/
-.next/
-.env*
-.DS_Store
-*.pem
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-.vercel
- -

Docker Configuration

-

.dockerignore

- 
node_modules
-.next
-.git
-.env*
- -

docker-compose.yml (Production)

- 
version: '3.8'
-services:
-  web:
-    build:
-      context: .
-      dockerfile: Dockerfile
-    ports:
-      - "805:805"
-    environment:
-      - NODE_ENV=production
-      - PORT=805
-    restart: unless-stopped
- -

docker-compose.dev.yml (Development)

- 
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
- -

Development Setup

-
    -
  1. Install PNPM: corepack enable && corepack prepare pnpm@latest --activate
    2. -
  2. Install dependencies: pnpm install
    3. -
  3. Run development server: docker compose -f docker-compose.dev.yml up
    4. -
- -

Production Deployment

-
    -
  1. Build and run: docker compose up -d
    2. -
  2. Access site on port 805
    3. -
- -

Portainer Deployment Steps

-
    -
  1. Add stack in Portainer
    2. -
  2. Configure GitHub repository access
    3. -
  3. Set compose path to docker-compose.yml
    4. -
  4. Deploy and monitor through Portainer UI
    5. -
- -

Project Structure

- - -

Best Practices

- - - diff --git a/README.md b/README.md index be5e75e..a88ea63 100644 --- a/README.md +++ b/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. diff --git a/Tech_Stack b/Tech_Stack new file mode 100644 index 0000000..b6942f5 --- /dev/null +++ b/Tech_Stack @@ -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)