{"id":29028416,"url":"https://github.com/jaynightmare/digital-perception","last_synced_at":"2026-04-27T18:04:13.270Z","repository":{"id":301269918,"uuid":"1008707559","full_name":"JayNightmare/Digital-Perception","owner":"JayNightmare","description":"A website for the AP Org in order to display the information, aim, and goal of the org","archived":false,"fork":false,"pushed_at":"2025-06-26T01:42:57.000Z","size":5,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-26T02:37:06.869Z","etag":null,"topics":["cms","github-pages","nextjs","react"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JayNightmare.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2025-06-26T01:19:23.000Z","updated_at":"2025-06-26T01:43:00.000Z","dependencies_parsed_at":"2025-06-26T02:37:10.378Z","dependency_job_id":"87a0ce4a-14fd-46bf-a942-4ae68a12d5d0","html_url":"https://github.com/JayNightmare/Digital-Perception","commit_stats":null,"previous_names":["jaynightmare/digital-perception"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/JayNightmare/Digital-Perception","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayNightmare%2FDigital-Perception","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayNightmare%2FDigital-Perception/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayNightmare%2FDigital-Perception/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayNightmare%2FDigital-Perception/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JayNightmare","download_url":"https://codeload.github.com/JayNightmare/Digital-Perception/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayNightmare%2FDigital-Perception/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262018884,"owners_count":23245626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["cms","github-pages","nextjs","react"],"created_at":"2025-06-26T07:11:17.092Z","updated_at":"2026-04-27T18:04:13.264Z","avatar_url":"https://github.com/JayNightmare.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=center\u003e\n\n\u003cimg src=\"./src/assets/ap-eye-animated.gif\" width=\"100\" height=\"100\" alt=\"Animated Eye Icon\"\u003e\n\n# Augmented Perception Website\n\n\u003c/div\u003e\n\n\nReact website for Augmented Perception, an Open-Source Organisation that provides AI-powered solutions to the AR/VR community. This website is designed to show off the orgs capabilities and provide a platform for users to learn more about the org and its projects.\n\n## Features\n\n- **Homepage**: Welcome page introducing the organization\n- **Projects Page**: Displays projects from Firestore database with GitHub integration\n- **About Page**: Information about the organization and team\n- **Contact Page**: Contact form for reaching out\n- **Admin Dashboard**: Protected admin area with comprehensive project management\n- **Authentication**: Secure admin login using Firebase Authentication\n- **Project Management**: Full CRUD operations - create, read, update, delete projects\n- **GitHub Integration**: Sync projects with GitHub repositories automatically\n- **Pin Projects**: Highlight important projects at the top\n- **Modern UI**: Clean, responsive design using styled-components\n- **Error Handling**: Comprehensive error boundaries and user feedback\n- **Real-time Updates**: Live project data from Firestore\n\n## Tech Stack\n\n- **Frontend**: React 18 with React Router for navigation\n- **Database**: Firebase Firestore for project data storage\n- **Styling**: styled-components for modern CSS-in-JS\n- **Authentication**: Firebase Authentication (Email/Password)\n- **API Integration**: GitHub API for repository synchronization\n- **Build Tool**: Create React App with PWA template\n- **Package Manager**: npm\n\n## Prerequisites\n\n- Node.js (version 16 or higher)\n- npm or yarn\n- Firebase project (for authentication and Firestore)\n- GitHub organization access (for repository sync)\n\n## Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/Augmented-Perception/Digital-Perception.git\n   cd Digital-Perception\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   ```\n\n3. **Set up Firebase**\n   - Go to [Firebase Console](https://console.firebase.google.com/)\n   - Create a new project\n   - Enable Authentication with Email/Password sign-in method\n   - Enable Firestore Database (start in test mode for development)\n   - Add a web app to your project\n   - Copy the Firebase configuration\n\n4. **Configure environment variables**\n   Create a `.env` file in the root directory:\n   ```env\n   REACT_APP_API_KEY=your_api_key\n   REACT_APP_AUTH_DOMAIN=your_project.firebaseapp.com\n   REACT_APP_PROJECT_ID=your_project_id\n   REACT_APP_STORAGE_BUCKET=your_project.appspot.com\n   REACT_APP_MESSAGING_SENDER_ID=your_sender_id\n   REACT_APP_APP_ID=your_app_id\n   REACT_APP_MEASUREMENT_ID=your_measurement_id\n   ```\n\n5. **Set up Firestore (Optional)**\n   For detailed Firestore setup instructions including security rules, see [FIRESTORE_SETUP.md](./FIRESTORE_SETUP.md)\n\n6. **Create admin user**\n   - In Firebase Console, go to Authentication \u003e Users\n   - Add a new user with email and password\n   - This user will have admin access to the dashboard\n\n## Development\n\n**Start the development server**\n```bash\nnpm run start\n```\n\nThe app will open at [http://localhost:3000](http://localhost:3000).\n\n**Available Scripts**\n- `npm run start` - Start development server\n- `npm run build` - Build for production\n- `npm run test` - Run tests\n- `npm run lint` - Run ESLint\n\n## Project Structure\n\n```\nsrc/\n├── pages/           # Page components\n├── src/\n│   ├── components/\n│   │   ├── particles.js          # Animated background particles\n│   │   ├── AdminProjectDashboard.js # Comprehensive admin interface\n│   │   └── ErrorBoundary.js      # Error handling component\n│   ├── pages/\n│   │   ├── Home.js     # Homepage\n│   │   ├── Projects.js # Projects listing with Firestore integration\n│   │   ├── About.js    # About page\n│   │   ├── Contact.js  # Contact form\n│   │   └── Login.js    # Admin login\n│   ├── utils/\n│   │   ├── projectService.js # Firestore CRUD operations\n│   │   ├── testFirestore.js  # Testing utilities\n│   │   └── mouse.js          # Mouse tracking utilities\n│   ├── App.js          # Main app component with routing\n│   ├── firebase.js     # Firebase configuration\n│   └── index.js        # App entry point\n├── FIRESTORE_SETUP.md  # Detailed Firestore setup guide\n└── README.md           # This file\n```\n\n## Admin Features\n\n### Authentication\n- Secure login using Firebase Authentication\n- Protected admin routes with error boundaries\n- Automatic session management\n\n### Project Management Dashboard\n- **Comprehensive Statistics**: View total, pinned, GitHub, and custom project counts\n- **GitHub Synchronization**: Import and sync repositories from GitHub organization\n- **Real-time Updates**: Live project data from Firestore database\n- **Bulk Operations**: Manage multiple projects efficiently\n\n### CRUD Operations\n- **Create**: Add new custom projects with full validation\n- **Read**: View all projects with filtering and sorting\n- **Update**: Edit project details, descriptions, and URLs\n- **Delete**: Remove projects with confirmation dialogs\n- **Pin/Unpin**: Highlight important projects\n\n### GitHub Integration\n- **Auto-Import**: Import all repositories from GitHub organization\n- **Data Sync**: Update existing GitHub projects with latest repository data\n- **Repository Tracking**: Distinguish between GitHub repos and custom projects\n- **Metadata Storage**: Store GitHub-specific data (stars, language, etc.)\n\n### Error Handling \u0026 UX\n- **Error Boundaries**: Graceful handling of component crashes\n- **Loading States**: User feedback during async operations\n- **Success/Error Messages**: Clear feedback for all actions\n- **Form Validation**: Prevent invalid data submission\n\n### Access Control\n- Admin controls are only visible to authenticated users\n- Non-admin users can view projects but cannot modify them\n- Protected routes with automatic redirection\n\n## Deployment\n\n### GitHub Pages (Recommended)\nThe project includes GitHub Actions workflows for automatic deployment:\n\n1. **CI/CD Pipeline**: Runs on every push to main branch\n   - Lints code\n   - Runs tests\n   - Builds the project\n\n2. **Deployment**: Automatically deploys to GitHub Pages\n   - Builds the project\n   - Deploys to `gh-pages` branch\n\n3. **Releases**: Creates releases for tagged versions\n   - Triggers on version tags (e.g., `v1.0.0`)\n   - Builds and packages the app\n\n### Manual Deployment\n```bash\nnpm run build\n```\n\nThe built files will be in the `build/` directory, ready for deployment to any static hosting service.\n\n### SPA Routing Fix\n\nThis project includes a fix for Single Page Application (SPA) routing issues on GitHub Pages. When users refresh the page on any route other than the root (e.g., `/about`, `/contact`), GitHub Pages would normally show a 404 error because it looks for physical files at those paths.\n\n**Solution implemented:**\n- `public/404.html`: Redirects 404 errors to the main page with the original path preserved\n- `public/index.html`: Contains a script that restores the correct URL from the redirect\n\nThis ensures that all routes work correctly when users refresh the page or access URLs directly. The solution is based on the [spa-github-pages](https://github.com/rafgraph/spa-github-pages) approach.\n\n## Environment Variables\n\n| Variable | Description | Required |\n|----------|-------------|----------|\n| `REACT_APP_API_KEY` | Firebase API key | Yes |\n| `REACT_APP_AUTH_DOMAIN` | Firebase auth domain | Yes |\n| `REACT_APP_PROJECT_ID` | Firebase project ID | Yes |\n| `REACT_APP_STORAGE_BUCKET` | Firebase storage bucket | Yes |\n| `REACT_APP_MESSAGING_SENDER_ID` | Firebase messaging sender ID | Yes |\n| `REACT_APP_APP_ID` | Firebase app ID | Yes |\n| `REACT_APP_MEASUREMENT_ID` | Firebase measurement ID | Yes |\n\n## Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Support\n\nFor support, please contact the Augmented Perception team or create an issue in this repository.\n\n## Links\n\n- [Augmented Perception GitHub Organization](https://github.com/Augmented-Perception)\n- [Live Demo](https://augmented-perception.github.io/Digital-Perception) (after deployment) ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaynightmare%2Fdigital-perception","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaynightmare%2Fdigital-perception","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaynightmare%2Fdigital-perception/lists"}