{"id":18431854,"url":"https://github.com/mathiasmendozav/mypurplespacenetwork","last_synced_at":"2026-04-11T05:31:31.731Z","repository":{"id":247468254,"uuid":"825924741","full_name":"mathiasmendozav/MyPurpleSpaceNetwork","owner":"mathiasmendozav","description":"💻🌐 My Purple Space: An advanced social media platform, crafted with React.js and powered by Supabase. Seamlessly register with email, engage in interactive post interactions, and fine-tune your profile. Step into the world of My Purple Space for a cutting-edge social experience. 💜🚀","archived":false,"fork":false,"pushed_at":"2024-07-08T19:42:18.000Z","size":34863,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-14T03:16:23.741Z","etag":null,"topics":["framer-motion","postgresql","reactjs","social-network","sql","supabase","threejs","typescript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/mathiasmendozav.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}},"created_at":"2024-07-08T19:09:27.000Z","updated_at":"2024-07-08T19:42:26.000Z","dependencies_parsed_at":"2024-07-09T00:30:27.053Z","dependency_job_id":null,"html_url":"https://github.com/mathiasmendozav/MyPurpleSpaceNetwork","commit_stats":null,"previous_names":["mathiasmendozav/mypurplespacenetwork"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mathiasmendozav/MyPurpleSpaceNetwork","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathiasmendozav%2FMyPurpleSpaceNetwork","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathiasmendozav%2FMyPurpleSpaceNetwork/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathiasmendozav%2FMyPurpleSpaceNetwork/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathiasmendozav%2FMyPurpleSpaceNetwork/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mathiasmendozav","download_url":"https://codeload.github.com/mathiasmendozav/MyPurpleSpaceNetwork/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathiasmendozav%2FMyPurpleSpaceNetwork/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31669592,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"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":["framer-motion","postgresql","reactjs","social-network","sql","supabase","threejs","typescript"],"created_at":"2024-11-06T05:26:42.145Z","updated_at":"2026-04-11T05:31:31.694Z","avatar_url":"https://github.com/mathiasmendozav.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# My Purple Space Social Media App 📱🫂💜\n\nWelcome to My Purple Space, a social media app built with React.js, Supabase, and vanilla CSS. This app allows users to create accounts using their email addresses and set up passwords. Once logged in, users can explore various sections within the app, each offering unique functionalities to enhance their social media experience. 🚀🔮🌟\n\n## Features 🚀\n\n### Home Page 🏠\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://ik.imagekit.io/r67xuhpwk/Screenshot%202023-11-01%20105848.png?updatedAt=1698892074758\" alt=\"project-image\"\u003e\u003c/p\u003e\n- The Home Page displays posts from the app.\n- Users can scroll through and interact with posts, including liking, disliking, and commenting.\n\n### Profile Page 📝\n\u003cimg src=\"https://ik.imagekit.io/r67xuhpwk/Screenshot%202023-11-01%20112009.png?updatedAt=1698892105657\" width='30%'\u003e\n- The Profile Page is personalized for each user.\n- Users can view their own profile, edit their profile information, upload new posts, and switch between viewing their own posts and saved posts.\n\n### Friends Page 👫\n\u003cimg src=\"https://github.com/MathiasMendozaVargas/mypurplespace/blob/main/friendsPage.gif\" width='30%'\u003e\n- The Friends Page displays the current user's friends.\n- Each friend is presented as a Friend Card component, showcasing their information, profile picture, and an option to delete the friend.\n\n### Edit Profile Page 🖋️\n\u003cimg src=\"https://ik.imagekit.io/r67xuhpwk/Screenshot%202023-11-01%20135319.png?updatedAt=1698893206048\" width='30%'\u003e\n- Users can update their profile information, including username, first name, last name, gender, age, and profile photo.\n\n## Main Components and Modals 🔍\n\n### Post Card Component 📃\n\u003cimg src=\"https://ik.imagekit.io/r67xuhpwk/Screenshot%202023-11-01%20194918.png?updatedAt=1698893402328\" width='30%'\u003e\n\n- Displays the author's username, profile photo, and the date of the post.\n- Features an options icon that opens a modal with custom functions, depending on the user's authority over the post.\n- Shows the post content, including text and emojis.\n- Displays post images if the user has included one.\n- Offers like, dislike, and comment buttons, each indicating the number of corresponding interactions on the post.\n\n### Create Post Modal 📝\n\u003cimg src=\"https://ik.imagekit.io/r67xuhpwk/Screenshot%202023-11-01%20195651.png?updatedAt=1698893868000\" width='30%'\u003e\n\n- Allows users to create and publish new posts.\n\n### Edit Profile Photo Modal 📸\n\u003cimg src=\"https://github.com/MathiasMendozaVargas/mypurplespace/blob/main/EditProfilePhoto.gif\" width='30%'\u003e\n- Enables users to update their profile photo.\n\n### Edit Post Modal 📝\n\u003cimg src=\"https://github.com/MathiasMendozaVargas/mypurplespace/blob/main/EditPost.gif\" width='30%'\u003e\n- Allows users to edit and update their existing posts.\n\n## Installation 🛠️\n\nTo run My Purple Space on your local machine, follow these steps:\n\n1. Clone this repository to your local system:\n\n   ```\n   git clone https://github.com/your-username/my-purple-space.git\n   ```\n\n2. Change directory to the project folder:\n\n   ```\n   cd my-purple-space\n   ```\n\n3. Install the required dependencies:\n\n   ```\n   npm install\n   ```\n\n4. Set up a Supabase project and obtain the necessary credentials. Update the Supabase configuration in the app.\n\n5. Start the development server:\n\n   ```\n   npm start\n   ```\n\nThe app should now be running locally, and you can access it at `http://localhost:3000`.\n\n## Live Demo 🌐\n\nYou can explore My Purple Space in action by visiting our  \u003ca href=\"https://mypurplespace.netlify.app/\" target=\"_blank\"\u003elive demo\u003c/a\u003e.\n\n## Technologies Used 💻\n\n- \u003cimg src='https://skillicons.dev/icons?i=react' width='30px'\u003e React.js: Front-end framework for building the user interface.\n- \u003cimg src='https://skillicons.dev/icons?i=supabase' width='30px'\u003e Supabase: Backend-as-a-Service to handle user authentication and data storage.\n- \u003cimg src='https://skillicons.dev/icons?i=css' width='30px'\u003e Vanilla CSS: Custom styling for a unique app design.\n\n## Contributing 🤝\n\nWe welcome contributions to My Purple Space! If you'd like to enhance or fix any part of the app.\n\n## License 📜\n\nThis project is licensed under the MIT License.\n\nHappy socializing in your own Purple Space! 💜🚀","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathiasmendozav%2Fmypurplespacenetwork","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmathiasmendozav%2Fmypurplespacenetwork","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathiasmendozav%2Fmypurplespacenetwork/lists"}