{"id":28242033,"url":"https://github.com/xelo04/mindful-media","last_synced_at":"2025-10-04T13:57:25.433Z","repository":{"id":292053147,"uuid":"979662946","full_name":"Xelo04/Mindful-Media","owner":"Xelo04","description":"Mindful Media is a personal project built with React, TypeScript, and Vite that showcases modern web development practices through a positive mental health platform. It features reusable components, advanced state management, responsive design, and client-side routing. Users can browse, filter real-life stories and explore educational content. ","archived":false,"fork":false,"pushed_at":"2025-08-29T19:08:12.000Z","size":3835,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-29T21:43:51.522Z","etag":null,"topics":["emailjs","hashtag-mindful-media","react","react-router","react-select","scss","typescript","vite"],"latest_commit_sha":null,"homepage":"https://hashtag-mindful-media.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Xelo04.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-05-07T21:47:47.000Z","updated_at":"2025-08-29T19:08:16.000Z","dependencies_parsed_at":"2025-08-19T15:15:24.868Z","dependency_job_id":"621c25ae-2d53-424e-85b8-84dd0e193dc1","html_url":"https://github.com/Xelo04/Mindful-Media","commit_stats":null,"previous_names":["xelo04/mindful-media"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Xelo04/Mindful-Media","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xelo04%2FMindful-Media","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xelo04%2FMindful-Media/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xelo04%2FMindful-Media/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xelo04%2FMindful-Media/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Xelo04","download_url":"https://codeload.github.com/Xelo04/Mindful-Media/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xelo04%2FMindful-Media/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278322146,"owners_count":25967874,"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","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["emailjs","hashtag-mindful-media","react","react-router","react-select","scss","typescript","vite"],"created_at":"2025-05-19T05:09:22.506Z","updated_at":"2025-10-04T13:57:25.428Z","avatar_url":"https://github.com/Xelo04.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mindful Media\n\n**Mindful Media** is a web application that highlights the positive impact of social media on mental health, community support, and self-expression. The project allows users to read real-life stories, explore educational content, and share their own experiences through an interactive and accessible platform.\n\n**You can visit the live website at [https://hashtag-mindful-media.netlify.app](https://hashtag-mindful-media.netlify.app)**\n\n---\n\n## 📖 Table of Contents\n\n- [🚀 Features](#-features)\n- [📂 Project Structure](#-project-structure)\n- [🛠️ Technologies Used](#️-technologies-used)\n- [🌟 Key Functionalities](#-key-functionalities)\n- [⚙️ Installation and Usage](#️-installation-and-usage)\n- [🤝 Contributing](#-contributing)\n- [📜 License](#-license)\n\n---\n\n## 🚀 Features\n\n- **Real-Life Stories**: Browse and filter user-submitted stories about positive experiences with social media.\n- **Tabbed Educational Panel**: Explore themed content on building community, learning about mental health, and self-expression.\n- **Team Member Carousel**: Meet the project team with a slider component.\n- **Share Your Story**: Submit your own story via a secure form with EmailJS integration.\n- **Responsive Design**: Optimized for desktop and mobile devices.\n- **Dynamic Navbar**: Navigation adapts to the current page and highlights the \"Share Your Story\" section.\n- **Accessible UI**: Uses semantic HTML and accessible components.\n\n---\n\n## 📂 Project Structure\n\n```bash\nMindful-Media/\n├── .env\n├── .gitignore\n├── index.html\n├── LICENSE\n├── netlify.toml\n├── package.json\n├── README.md\n├── tsconfig.json\n├── vite.config.ts\n├── public/\n│   ├── logo-icon.png\n│   ├── logo.png\n│   ├── sitemap.xml\n│   ├── star.svg\n│   ├── translate.svg\n│   ├── contact-page/\n│   ├── real-life-examples/\n│   └── team-members/\n└── src/\n    ├── App.tsx\n    ├── data.ts\n    ├── main.tsx\n    ├── tabbedPanelData.tsx\n    ├── vite-env.d.ts\n    ├── components/\n    │   ├── filtered-list/\n    │   ├── filters/\n    │   ├── footer/\n    │   ├── navbar/\n    │   ├── popping-star/\n    │   ├── tabbed-panel/\n    │   ├── team-member-slider/\n    │   └── user-story-form/\n    ├── styles/\n    └── pages/\n        ├── about/\n        ├── contact/\n        ├── our-stories/\n        └── your-story/\n```\n\n---\n\n## 🛠️ Technologies Used\n\n- **React**: UI library for building interactive interfaces.\n- **Vite**: Fast build tool and development server.\n- **TypeScript**: Type-safe JavaScript.\n- **Sass (SCSS)**: For modular and maintainable styles.\n- **React Router**: Client-side routing.\n- **React Select**: Accessible dropdowns for filters and forms.\n- **EmailJS**: Secure form submissions via email.\n- **Netlify**: Hosting and continuous deployment.\n- **Google Fonts \u0026 Material Icons**: Modern typography and icons.\n\n---\n\n## 🌟 Key Functionalities\n\n1. **Story Filtering and Pagination**\n\n   - Users can filter stories by age, gender, sexuality, and nationality.\n   - Paginated display for easy browsing.\n\n2. **Tabbed Educational Content**\n\n   - Themed tabs with real-life examples and resources.\n\n3. **Team Member Slider**\n\n   - Carousel to meet and learn about the project team.\n\n4. **User Story Submission**\n\n   - Secure form with validation and EmailJS integration.\n   - Optional email field for further contact.\n\n5. **Responsive \u0026 Accessible Design**\n\n   - Mobile-friendly layout.\n   - Semantic HTML and ARIA labels for accessibility.\n\n6. **SPA Routing \u0026 Sitemap**\n   - Netlify configuration for proper SPA routing and sitemap.xml for SEO.\n\n---\n\n## ⚙️ Installation and Usage\n\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/Xelo04/NASA-Daily-Photo\n   cd NASA-Daily-Photo\n   ```\n2. Install dependencies:\n   ```bash\n   npm install\n   ```\n3. Set up environment variables:\n   Create a .env file in the root directory.\n   Add your EmailJS keys:\n   ```bash\n   VITE_EMAILJS_SERVICE_ID=your_service_id\n   VITE_EMAILJS_TEMPLATE_ID=your_template_id\n   VITE_EMAILJS_PUBLIC_KEY=your_public_key\n   ```\n4. Start the development server:\n   ```bash\n   npm run dev\n   ```\n5. Open the app in your browser at http://localhost:5173.\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! If you have suggestions or improvements, feel free to fork the repository and submit a pull request.\n\n---\n\n## 📜 License\n\nThis project is under the MIT License - see the [LICENSE](./LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxelo04%2Fmindful-media","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxelo04%2Fmindful-media","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxelo04%2Fmindful-media/lists"}