Skip to content

README.md

Latest commit

 

History

History
195 lines (174 loc) · 8.39 KB

README.md

File metadata and controls

195 lines (174 loc) · 8.39 KB

happy-moments-3d-webgl

Share cherished memories in a whimsical, interactive 3D web application.

Developed with the software and tools below.

React Frontend Node.js Three.js
git-last-commit GitHub commit activity GitHub top language

📑 Table of Contents

  • 📍 Overview
  • 📦 Features
  • 📂 Structure
  • 💻 Installation
  • 🏗️ Usage
  • 🌐 Hosting
  • 📜 API Documentation
  • 📄 License
  • 👏 Authors

📍 Overview

This repository contains a Minimum Viable Product (MVP) for a web application called "Happy Moments Companion", designed to share and celebrate cherished memories in an interactive 3D environment. The application leverages React with TypeScript for a type-safe and component-based architecture, Three.js for 3D rendering, and CSS for styling. The application presents a whimsical and engaging user experience using 3D models, animations, and scroll-triggered interactions.

📦 Features

Feature Description
🖼️ 3D Environment Immersive 3D environment for presenting happy moments using Three.js.
🗺️ Interactive Sections Sections for showcasing "Our Story," "Shared Hobbies," and "Future Adventures" with interactive 3D elements.
📜 Scroll Animations Scroll-triggered animations to create a dynamic and engaging user experience.
🎨 Whimsical Design Organic and whimsical aesthetic with soft pastel colors and rounded shapes.
📱 Responsive Design Fully responsive layout adapting to different screen sizes and devices.
⚙️ Component Architecture Modular React components for easy maintenance and scalability.
🚀 Performance Optimization Optimized 3D model loading, texture compression, and animation techniques to ensure smooth performance.
📦 Dependency Management Uses npm for managing project dependencies, ensuring easy setup and configuration.

📂 Structure

 happy-moments-3d-webgl/
├── public/
│   ├── models/
│   │   └── memory-box.glb
│   └── textures/
│       └── wood-texture.jpg
├── src/
│   ├── components/
│   │   ├── CTASection.tsx
│   │   ├── FutureSection.tsx
│   │   ├── HobbiesSection.tsx
│   │   ├── Hero.tsx
│   │   ├── MemoryBox.tsx
│   │   └── StorySection.tsx
│   ├── hooks/
│   │   └── useScrollAnimation.ts
│   ├── utils/
│   │   └── animationUtils.ts
│   ├── App.tsx
│   ├── index.tsx
│   └── types.ts
├── .env
├── .gitignore
├── package.json
├── README.md
├── tsconfig.json
└── vite.config.ts

💻 Installation

Warning

🔧 Prerequisites

  • Node.js v18 or higher
  • npm v8 or higher

🚀 Setup Instructions

  1. Clone the repository: 
    git clone https://github.com/coslynx/happy-moments-3d-webgl.git
cd happy-moments-3d-webgl
  2. Install dependencies: 
    npm install
  3. Configure environment variables: 
    cp .env.example .env
    Update the .env file with the required variables.

🏗️ Usage

🏃‍♂️ Running the MVP

  1. Start the development server: 
    npm run dev
  2. Access the application:
    • Open your browser and navigate to http://localhost:5173.

Tip

⚙️ Configuration

  • The application title can be configured in the .env file using the VITE_APP_TITLE variable.
  • The path to the 3D model can be configured using the VITE_THREE_MODEL_PATH variable.

📚 Examples

  • View the 3D Memory Box in the Hero Section.
  • Scroll through the "Our Story" section to see key milestones.
  • Explore shared hobbies in the "Shared Hobbies" section.
  • Select a future adventure in the "Future Adventures" section.
  • Click the CTA button to share a memory.

🌐 Hosting

🚀 Deployment Instructions

Deploying to Netlify

  1. Create a Netlify Account: Sign up for a free account at Netlify.
  2. Install Netlify CLI: Install the Netlify Command Line Interface globally using npm:
npm install -g netlify-cli
  1. Authenticate with Netlify: Log in to your Netlify account through the CLI:
netlify login
  1. Build the Project: Build the React application using Vite:
npm run build
  1. Deploy to Netlify: Navigate to the dist directory created by the build process and deploy it to Netlify:
cd dist
netlify deploy --prod
  1. Set up environment variables: Set up your environment variable such as VITE_APP_TITLE to Happy Moments Companion on the netlify console.

🔑 Environment Variables

  • VITE_APP_TITLE: The title of the application (e.g., Happy Moments Companion).
  • VITE_API_URL: The base URL for the API (e.g., http://localhost:3000).
  • VITE_THREE_MODEL_PATH: The path to the 3D model files (e.g., /models/).

📜 API Documentation

🔍 Endpoints

There are no dedicated APIs for this MVP, as it is frontend focused using 3D rendering. This section will be updated when external API or more features are added.

🔒 Authentication

Since there are no dedicated APIs for this MVP, this section will be updated when authentication is added.

📝 Examples

Since there are no dedicated APIs for this MVP, this section will be updated when API examples are available.

Note

📜 License & Attribution

📄 License

This Minimum Viable Product (MVP) is licensed under the GNU AGPLv3 license.

🤖 AI-Generated MVP

This MVP was entirely generated using artificial intelligence through CosLynx.com.

No human was directly involved in the coding process of the repository: happy-moments-3d-webgl

📞 Contact

For any questions or concerns regarding this AI-generated MVP, please contact CosLynx at:

🌐 CosLynx.com

Create Your Custom MVP in Minutes With CosLynxAI!

3D Model Files Required

This project requires the following 3D model files that need to be created manually:

  • public/models/memory-box.glb

These placeholder files need to be replaced with actual binary 3D model files.