{"id":48786562,"url":"https://github.com/eryckassis/space-industries","last_synced_at":"2026-04-13T17:17:30.131Z","repository":{"id":322723342,"uuid":"1090629934","full_name":"eryckassis/space-industries","owner":"eryckassis","description":"Space Industries is a premium web experience that combines modern web technologies with stunning visual animations and immersive audio to create an engaging space exploration journey. Built with Next.js 16 and React 19","archived":false,"fork":false,"pushed_at":"2025-12-14T02:48:29.000Z","size":48963,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-12-16T02:23:28.417Z","etag":null,"topics":["clean-architecture","cleancode","css","nextjs","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://space-industries-26gn2s5qd-eryck-assis-projects.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eryckassis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-05T23:32:23.000Z","updated_at":"2025-12-14T02:47:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"23cf58de-e692-44ed-8755-faed7fecf7eb","html_url":"https://github.com/eryckassis/space-industries","commit_stats":null,"previous_names":["eryckassis/space-industries"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eryckassis/space-industries","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eryckassis%2Fspace-industries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eryckassis%2Fspace-industries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eryckassis%2Fspace-industries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eryckassis%2Fspace-industries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eryckassis","download_url":"https://codeload.github.com/eryckassis/space-industries/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eryckassis%2Fspace-industries/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31762065,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T15:25:13.801Z","status":"ssl_error","status_checked_at":"2026-04-13T15:25:09.162Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clean-architecture","cleancode","css","nextjs","reactjs","typescript"],"created_at":"2026-04-13T17:17:29.424Z","updated_at":"2026-04-13T17:17:30.124Z","avatar_url":"https://github.com/eryckassis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Space Industries\n\n\u003e A modern, interactive web experience showcasing space exploration with cutting-edge animations and immersive audio\n\n\u003cdiv align=\"center\"\u003e\n  \n  \u003c!-- PROJECT BANNER PLACEHOLDER --\u003e\n  \n  ![Demo Preview](https://github.com/user-attachments/assets/eb42ce5b-beda-418d-8726-ccd30720801d)\n\n  \n  \u003c!-- BADGES --\u003e\n  ![Next.js](https://img.shields.io/badge/Next.js-16.0.1-black?style=for-the-badge\u0026logo=nextdotjs)\n  ![React](https://img.shields.io/badge/React-19.2.0-61DAFB?style=for-the-badge\u0026logo=react)\n  ![TypeScript](https://img.shields.io/badge/TypeScript-5.9.3-3178C6?style=for-the-badge\u0026logo=typescript)\n  ![GSAP](https://img.shields.io/badge/GSAP-3.13.0-88CE02?style=for-the-badge\u0026logo=greensock)\n  \n  \u003c!-- DEPLOYMENT STATUS --\u003e\n  [![Vercel](https://img.shields.io/badge/Deployed-Vercel-000000?style=for-the-badge\u0026logo=vercel)](https://space-industries-26gn2s5qd-eryck-assis-projects.vercel.app)\n  \n\u003c/div\u003e\n\n---\n\n## 📑 Table of Contents\n\n| Section                                     | Description                                |\n| ------------------------------------------- | ------------------------------------------ |\n| [🌟 Overview](#-overview)                   | Project introduction and features          |\n| [🏗️ Architecture](#️-architecture)          | Technical architecture and design patterns |\n| [🛠️ Tech Stack](#️-tech-stack)              | Technologies and tools used                |\n| [🚀 Getting Started](#-getting-started)     | Installation and setup                     |\n| [📁 Project Structure](#-project-structure) | Directory organization                     |\n| [🎭 Features](#-features)                   | Key functionalities                        |\n| [🎨 Design Patterns](#-design-patterns)     | Architecture principles                    |\n| [🧪 Testing](#-testing)                     | Quality assurance                          |\n| [📋 Scripts](#-scripts)                     | Available commands                         |\n| [🌐 Deployment](#-deployment)               | Production deployment                      |\n| [🤝 Contributing](#-contributing)           | How to contribute                          |\n\n---\n\n## 🌟 Overview\n\nSpace Industries is a **premium web experience** that combines modern web technologies with stunning visual animations and immersive audio to create an engaging space exploration journey. Built with **Next.js 16** and **React 19**, this project demonstrates advanced front-end development techniques including:\n\n- 🎬 **GSAP ScrollTrigger Animations**\n- 🎵 **Dynamic Audio Management**\n- 🎥 **Video Integration**\n- 📱 **Responsive Design**\n- ⚡ **Performance Optimization**\n\n---\n\n## 🏗️ Architecture\n\n```mermaid\ngraph TB\n    A[Next.js App Router] --\u003e B[Page Components]\n    B --\u003e C[Reusable Components]\n    B --\u003e D[Custom Hooks]\n\n    C --\u003e E[ScrollSection]\n    C --\u003e F[Footer]\n\n    D --\u003e G[useAudioManager]\n    D --\u003e H[useScrollAnimations]\n\n    I[GSAP] --\u003e J[ScrollTrigger]\n    I --\u003e K[Timeline Animations]\n\n    L[Lenis] --\u003e M[Smooth Scrolling]\n\n    N[Public Assets] --\u003e O[Audio Files]\n    N --\u003e P[Video Files]\n    N --\u003e Q[Images]\n```\n\n### Design Principles\n\n| Principle                  | Implementation                                     |\n| -------------------------- | -------------------------------------------------- |\n| **Separation of Concerns** | Hooks for business logic, components for UI        |\n| **Component Composition**  | Reusable ScrollSection with flexible props         |\n| **Performance First**      | Lazy loading, optimized assets, minimal re-renders |\n| **Type Safety**            | Full TypeScript coverage with strict mode          |\n| **Accessibility**          | Semantic HTML, keyboard navigation, screen readers |\n\n---\n\n## 🛠️ Tech Stack\n\n### **Core Framework**\n\n| Technology                               | Version | Purpose                         |\n| ---------------------------------------- | ------- | ------------------------------- |\n| [Next.js](https://nextjs.org)            | 16.0.1  | React framework with App Router |\n| [React](https://reactjs.org)             | 19.2.0  | UI library with latest features |\n| [TypeScript](https://typescriptlang.org) | 5.9.3   | Type-safe JavaScript            |\n\n### **Animation \u0026 Interaction**\n\n| Technology                                | Version | Purpose                     |\n| ----------------------------------------- | ------- | --------------------------- |\n| [GSAP](https://greensock.com/gsap/)       | 3.13.0  | High-performance animations |\n| [Lenis](https://lenis.studiofreight.com/) | 1.3.14  | Smooth scrolling experience |\n\n### **Development Tools**\n\n| Category          | Tools                        |\n| ----------------- | ---------------------------- |\n| **Linting**       | ESLint 9, Prettier 3.6.2     |\n| **Testing**       | Jest 30.2.0, Testing Library |\n| **Git Hooks**     | Husky 9.1.7, Commitlint      |\n| **Type Checking** | TypeScript 5.9.3             |\n\n### **Quality Assurance**\n\n| Tool           | Configuration              | Purpose          |\n| -------------- | -------------------------- | ---------------- |\n| **ESLint**     | Next.js + TypeScript rules | Code quality     |\n| **Prettier**   | Consistent formatting      | Code style       |\n| **Jest**       | JSDOM environment          | Unit testing     |\n| **Husky**      | Pre-commit hooks           | Git workflow     |\n| **Commitlint** | Conventional commits       | Commit standards |\n\n---\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n```bash\nNode.js \u003e= 18.0.0\nnpm \u003e= 9.0.0\n```\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone \u003crepository-url\u003e\ncd space-industries\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n```\n\n### Environment Setup\n\n```bash\n# Development\nnpm run dev          # Start dev server at http://localhost:3000\n\n# Production\nnpm run build        # Build for production\nnpm run start        # Start production server\n```\n\n---\n\n## 📁 Project Structure\n\n```\nspace-industries/\n├── 📁 app/                    # Next.js App Router\n│   ├── 📄 globals.css         # Global styles\n│   ├── 📄 layout.tsx          # Root layout\n│   └── 📄 page.tsx            # Main page component\n├── 📁 components/             # Reusable UI components\n│   ├── 📁 sections/           # Page sections\n│   │   └── 📄 ScrollSection.tsx\n│   └── 📁 ui/                 # UI components\n│       └── 📄 Footer.tsx\n├── 📁 hooks/                  # Custom React hooks\n│   ├── 📄 useAudioManager.ts  # Audio system management\n│   └── 📄 useScrollAnimations.ts # GSAP animations\n├── 📁 lib/                    # Utility libraries\n├── 📁 public/                 # Static assets\n│   ├── 📁 audio/              # Audio files\n│   ├── 📁 images/             # Image assets\n│   └── 📁 videos/             # Video files\n├── 📁 .husky/                 # Git hooks\n├── 📄 tsconfig.json           # TypeScript config\n├── 📄 next.config.mjs         # Next.js config\n├── 📄 package.json            # Dependencies\n└── 📄 README.md               # Documentation\n```\n\n---\n\n## 🎭 Features\n\n### **Visual Experience**\n\n| Feature                  | Technology         | Description                       |\n| ------------------------ | ------------------ | --------------------------------- |\n| **Scroll Animations**    | GSAP ScrollTrigger | Parallax effects, element reveals |\n| **Geometric Animations** | GSAP Timeline      | SVG path animations               |\n| **Text Reveals**         | GSAP SplitText     | Character-by-character animations |\n| **Video Integration**    | HTML5 Video        | Autoplay background videos        |\n\n### **Audio System**\n\n| Component             | Files         | Purpose                       |\n| --------------------- | ------------- | ----------------------------- |\n| **Background Music**  | space-bg.mp3  | Ambient space soundtrack      |\n| **UI Sounds**         | Various       | Button hovers, scroll effects |\n| **Interactive Audio** | 7 total files | Immersive audio experience    |\n\n### **Performance**\n\n| Optimization           | Implementation                  |\n| ---------------------- | ------------------------------- |\n| **Image Optimization** | Next.js Image component         |\n| **Code Splitting**     | Automatic by Next.js            |\n| **Bundle Analysis**    | Built-in webpack analyzer       |\n| **Lazy Loading**       | React.lazy for heavy components |\n\n---\n\n## 🎨 Design Patterns\n\n### **Architectural Patterns**\n\n#### **Custom Hooks Pattern**\n\n```typescript\n// Separation of business logic from UI\nconst useAudioManager = () =\u003e {\n  // Audio state and methods\n  return { playSound, pauseSound, isPlaying };\n};\n```\n\n#### **Component Composition**\n\n```typescript\n// Flexible, reusable components\n\u003cScrollSection\n  backgroundVideo=\"/videos/space.mp4\"\n  backgroundColor=\"black\"\n  opacity={0.7}\n/\u003e\n```\n\n#### **Factory Pattern**\n\n```typescript\n// Audio element creation\nconst createAudioElement = (src: string) =\u003e {\n  const audio = new Audio(src);\n  audio.preload = \"auto\";\n  return audio;\n};\n```\n\n### **State Management**\n\n| Pattern          | Usage                 | Benefit                  |\n| ---------------- | --------------------- | ------------------------ |\n| **useState**     | Component-level state | Simple, localized state  |\n| **useCallback**  | Event handlers        | Performance optimization |\n| **useEffect**    | Side effects          | Lifecycle management     |\n| **Custom Hooks** | Shared logic          | Reusability              |\n\n---\n\n## 🧪 Testing\n\n### **Testing Strategy**\n\n| Type                  | Framework              | Coverage          |\n| --------------------- | ---------------------- | ----------------- |\n| **Unit Tests**        | Jest + Testing Library | Components, hooks |\n| **Integration Tests** | Testing Library        | User interactions |\n| **Type Checking**     | TypeScript             | Static analysis   |\n\n### **Running Tests**\n\n```bash\n# Run all tests\nnpm test\n\n# Watch mode\nnpm run test:watch\n\n# Coverage report\nnpm run test:coverage\n```\n\n---\n\n## 📋 Scripts\n\n| Script          | Command          | Description               |\n| --------------- | ---------------- | ------------------------- |\n| **Development** | `npm run dev`    | Start development server  |\n| **Build**       | `npm run build`  | Build for production      |\n| **Start**       | `npm run start`  | Start production server   |\n| **Lint**        | `npm run lint`   | Check code quality        |\n| **Format**      | `npm run format` | Format code with Prettier |\n| **Test**        | `npm test`       | Run test suite            |\n\n---\n\n## 🌐 Deployment\n\n### **Vercel Deployment**\n\n```bash\n# Deploy to Vercel\nnpx vercel\n\n# Production deployment\nnpx vercel --prod\n```\n\n### **Live Demo**\n\n🔗 **[https://space-industries-26gn2s5qd-eryck-assis-projects.vercel.app](https://space-industries-26gn2s5qd-eryck-assis-projects.vercel.app)**\n\n### **Deployment Configuration**\n\n```json\n{\n  \"buildCommand\": \"npm run build\",\n  \"outputDirectory\": \".next\",\n  \"framework\": \"nextjs\",\n  \"nodejs\": \"18.x\"\n}\n```\n\n---\n\n## 🤝 Contributing\n\n### **Development Workflow**\n\n1. **Fork** the repository\n2. **Create** a feature branch\n3. **Commit** using conventional commits\n4. **Test** your changes\n5. **Submit** a pull request\n\n### **Commit Standards**\n\n```bash\nfeat: add new animation effect\nfix: resolve audio loading issue\ndocs: update README documentation\nstyle: improve code formatting\ntest: add component unit tests\n```\n\n### **Code Quality**\n\n- ✅ **ESLint** passes\n- ✅ **Prettier** formatted\n- ✅ **TypeScript** compiles\n- ✅ **Tests** pass\n- ✅ **Conventional** commits\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n### **Built with ❤️ using modern web technologies**\n\n![Next.js](https://img.shields.io/badge/-Next.js-000000?style=flat-square\u0026logo=nextdotjs)\n![React](https://img.shields.io/badge/-React-61DAFB?style=flat-square\u0026logo=react\u0026logoColor=white)\n![TypeScript](https://img.shields.io/badge/-TypeScript-3178C6?style=flat-square\u0026logo=typescript\u0026logoColor=white)\n![GSAP](https://img.shields.io/badge/-GSAP-88CE02?style=flat-square\u0026logo=greensock\u0026logoColor=white)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feryckassis%2Fspace-industries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feryckassis%2Fspace-industries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feryckassis%2Fspace-industries/lists"}