147 lines
3.9 KiB
Markdown
147 lines
3.9 KiB
Markdown
# Finlion Website
|
|
|
|
A modern, responsive business website built with Next.js, featuring a contact form, services showcase, and responsive design.
|
|
|
|
## Features
|
|
- 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
|
|
- 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
|
|
- Docker and Docker Compose (for containerized development)
|
|
- Redis (handled through Upstash)
|
|
|
|
### 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
|
|
|
|
# Redis Configuration (for rate limiting)
|
|
UPSTASH_REDIS_REST_URL=your-redis-url
|
|
UPSTASH_REDIS_REST_TOKEN=your-redis-token
|
|
```
|
|
|
|
### Development Setup
|
|
|
|
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` - Development environment with hot reload
|
|
- `docker-compose.staging.yml` - Staging environment
|
|
|
|
## 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
|
|
|
|
## License
|
|
This project is proprietary and confidential.
|