Skip to content

etherOnGitHub/aetherport

BranchesTags

Repository files navigation

Aetherport

A full-stack portfolio and project hub for aetherwave — showcasing projects, interactive experiences, and personal branding. Built with a modern turborepo monorepo architecture.

🛠️ Tech Stack

Frontend (apps/web)

Technology Purpose
Next.js 16 React framework with App Router, SSR & ISR
React 19 UI library with React Compiler support
TypeScript 5 Type-safe development
Tailwind CSS 4 Utility-first styling
ESLint Linting and code quality

Backend (apps/api/backend)

Technology Purpose
Django 5.2 Python web framework
Django REST Framework RESTful API toolkit
Simple JWT Token-based authentication
PostgreSQL 15 Relational database
Gunicorn Production WSGI server
WhiteNoise Static file serving

Infrastructure & Tooling

Technology Purpose
Turborepo Monorepo build orchestration
Docker Compose Local containerized development
Fly.io Backend deployment platform
Vercel Frontend deployment

🏗️ Architecture Overview

┌─────────────────────────────────────────────────────────────────┐
│                        TURBOREPO MONOREPO                       │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌─────────────────────────┐    ┌─────────────────────────────┐ │
│  │      apps/web           │    │      apps/api/backend       │ │
│  │    (Next.js 16)         │    │       (Django 5.2)          │ │
│  │                         │    │                             │ │
│  │  • Server Components    │──▶ │  • REST API (/api/v1/)     │ │
│  │  • Client Components    │    │  • JWT Authentication       │ │
│  │  • Server Actions       │    │  • Projects & Tags CRUD     │ │
│  │  • Tailwind CSS         │    │  • PostgreSQL Database      │ │
│  └─────────────────────────┘    └─────────────────────────────┘ │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────────┐│
│  │                      packages/                              ││
│  │  • config/     - Shared Tailwind configuration              ││
│  │  • tsconfig/   - Shared TypeScript configuration            ││
│  │  • images/     - Shared image assets                        ││
│  │  • ui/         - Shared UI components                       ││
│  └─────────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────────┘

Data Flow

  1. Next.js frontend makes server-side requests to the Django API
  2. Server fetch (lib/server-api/) fetches data with ISR caching (5s revalidation)
  3. Django REST API serves JSON data from PostgreSQL via ViewSets
  4. JWT tokens handle authentication for protected routes

📄 Site Components

Pages

Route Description
/ Home page with splash screen and bio section
/projects Portfolio grid displaying all projects
/projects/[slug] Individual project detail page

UI Components

Component Purpose
Navbar Responsive navigation with mobile hamburger menu
Bars Decorative UI element
Splash Hero/splash section on homepage
Bio About/introduction section with canvas effects
Projects Grid layout for project cards
CanvasContext Interactive canvas with pixel sort effects
ApiStatus Real-time API health indicator
AuthModal Authentication modal dialog

API Endpoints (/api/v1/)

Endpoint Method Description
/projects/ GET List all projects
/projects/{slug}/ GET Get project by slug
/tags/ GET, POST List/create tags
/auth/token/ POST Obtain JWT token pair
/auth/token/refresh/ POST Refresh access token

Data Models

  • Project: Portfolio items with title, slug, tagline, description, images, tags, links, and metadata
  • Tag: Categorization for projects (many-to-many relationship)

🚀 Getting Started

Prerequisites

  • Node.js 18+
  • Python 3.11+
  • Docker & Docker Compose (for containerized development)
  • PostgreSQL 15 (or use Docker)

Option 1: Docker Development (Recommended)

# Clone the repository
git clone https://github.com/yourusername/aetherport.git
cd aetherport

# Start all services
docker-compose up --build

# Access the application
# Frontend: http://localhost:3000
# Backend:  http://localhost:8000/api/v1/

Option 2: Local Development

Backend Setup

cd apps/api/backend

# Create virtual environment
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Set environment variables
cp .env.example .env  # Create and configure .env

# Run migrations
python manage.py migrate

# Start development server
python manage.py runserver

Frontend Setup

# From root directory
npm install

# Start development (uses Turborepo)
npm run dev

# Or just the web app
cd apps/web
npm run dev

Environment Variables

Frontend (apps/web)

API_BASE_URL=http://localhost:8000/api/v1       # Server-side API URL
NEXT_PUBLIC_API_URL=http://localhost:8000/api/v1 # Client-side API URL

Backend (apps/api/backend)

SECRET_KEY=your-secret-key
DATABASE_URL=postgres://user:pass@localhost:5432/aetherport
DEBUG=True

📦 Project Structure

aetherport/
├── apps/
│   ├── web/                    # Next.js frontend
│   │   ├── src/app/            # App Router pages & components
│   │   ├── lib/                # API clients & types
│   │   └── public/             # Static assets
│   └── api/backend/            # Django backend
│       ├── aether/             # Django project settings
│       ├── projects/           # Projects app (models, views, serializers)
│       ├── accounts/           # User accounts app
│       └── core/               # Core utilities
├── packages/
│   ├── config/                 # Shared Tailwind config
│   ├── tsconfig/               # Shared TypeScript config
│   ├── images/                 # Shared image assets
│   └── ui/                     # Shared UI components
├── docker-compose.yml          # Local development containers
├── turbo.json                  # Turborepo configuration
└── package.json                # Root workspace config

🌐 Deployment

Backend (Fly.io)

The backend is configured for Fly.io deployment with automatic migrations on release.

cd apps/api/backend
fly deploy

Frontend (Vercel)

The frontend is configured for Vercel with preview deployments for PRs.

# Automatic via GitHub integration, or manually:
vercel --prod

📝 License

See LICENSE for details.

Made with 💜 by etherchild

About

aetherwave.dev

Resources

Readme

License

MIT license
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages