{"id":16192598,"url":"https://github.com/ricardogesteves/storyscape","last_synced_at":"2025-03-19T04:30:26.438Z","repository":{"id":212968430,"uuid":"730556710","full_name":"RicardoGEsteves/Storyscape","owner":"RicardoGEsteves","description":"Storyscape is social media platform. Allow users to capture, share, and connect with the world. Businesses can leverage its influence to showcase products, connect with audiences, and craft compelling brand narratives.","archived":false,"fork":false,"pushed_at":"2024-10-29T08:17:39.000Z","size":22772,"stargazers_count":6,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-29T09:37:17.691Z","etag":null,"topics":["appwrite","canvas","context-api","debounce","image-js","javascript","momentjs","nextjs","nodejs","raw-loader","react","react-advanced-crppper","react-icons","social-media","social-media-app","social-network","tailwindcss","typescript","zustand"],"latest_commit_sha":null,"homepage":"","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/RicardoGEsteves.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}},"created_at":"2023-12-12T07:22:14.000Z","updated_at":"2024-10-29T08:17:42.000Z","dependencies_parsed_at":"2023-12-28T03:24:04.403Z","dependency_job_id":"6173bc5d-1405-408c-a0cb-a93ca03c365d","html_url":"https://github.com/RicardoGEsteves/Storyscape","commit_stats":null,"previous_names":["ricardogesteves/insight","ricardogesteves/storyscape"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RicardoGEsteves%2FStoryscape","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RicardoGEsteves%2FStoryscape/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RicardoGEsteves%2FStoryscape/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RicardoGEsteves%2FStoryscape/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RicardoGEsteves","download_url":"https://codeload.github.com/RicardoGEsteves/Storyscape/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244357236,"owners_count":20440298,"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":["appwrite","canvas","context-api","debounce","image-js","javascript","momentjs","nextjs","nodejs","raw-loader","react","react-advanced-crppper","react-icons","social-media","social-media-app","social-network","tailwindcss","typescript","zustand"],"created_at":"2024-10-10T08:10:48.680Z","updated_at":"2025-03-19T04:30:25.194Z","avatar_url":"https://github.com/RicardoGEsteves.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Storyscape - Redefining Social Media Engagement\n\n\u003e **(UPDATE)** - with the latest dependencies updates, you will have to do some small config changes.\n\nStoryscape is an innovative social media platform designed to facilitate seamless content sharing, connectivity, and engagement on a global scale. This repository serves as the central hub for technical documentation and resources essential for understanding and integrating with Storyscape's robust functionalities.\n\n## Table of Contents\n\n- [Introduction](#introduction)\n- [Technologies Used](#technologies-used)\n- [Features and Functionalities](#features-and-functionalities)\n- [Demo](#demo)\n- [Installation](#installation)\n- [Environment Variables](#environment-variables)\n- [AppWrite Schema](#appwrite-schema)\n  - [Database Name: Storyscape](#database-name-storyscape)\n  - [Profile Collection](#profile-collection)\n  - [Post Collection](#post-collection)\n  - [Like Collection](#like-collection)\n  - [Comment Collection](#comment-collection)\n  - [Storage Name: Storyscape](#storage-name-storyscape)\n  - [Bucket](#bucket)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Introduction\n\nStoryscape leverages cutting-edge technologies to provide users with an immersive social media experience. By utilizing TypeScript, React, Next.js, Tailwind CSS, and other advanced tools, Storyscape aims to redefine user interaction with content, fostering meaningful connections within a vibrant online community.\n\n## Technologies Used\n\nStoryscape utilizes a variety of technologies to deliver its comprehensive set of features. The primary technologies include:\n\n- **TypeScript**: A typed superset of JavaScript that enhances code quality and developer productivity.\n- **React**: A popular JavaScript library for building user interfaces.\n- **Next.js**: A React framework that enables server-side rendering and efficient, SEO-friendly web applications.\n- **Tailwind CSS**: A utility-first CSS framework for creating custom designs.\n- **Zustand**: A minimalistic state management library for React applications.\n- **AppWrite**: An open-source backend server providing API services for authentication, database, and storage.\n- **Debounce**: A utility for optimizing performance by limiting the frequency of function calls.\n- **Image-js**: A JavaScript library for handling image processing tasks.\n- **Moment**: A library for parsing, validating, manipulating, and displaying dates and times.\n- **React-advanced-cropper**: A React component for image cropping.\n- **React-icons**: A library providing popular icon packs for React applications.\n- **Context API**: A React feature for managing global state.\n- **Canvas**: A web technology for dynamically generating graphics and visual effects.\n- **Raw-loader**: A webpack loader for handling raw file imports.\n\n## Features and Functionalities\n\nStoryscape offers a suite of innovative features and functionalities that cater to the needs of modern social media users:\n\n- **Seamless Content Sharing:** Share text, images, videos, and other multimedia content with the community effortlessly.\n- **Real-time Connection:** Maintain real-time connections with friends, followers, and groups, fostering engagement and interaction.\n- **Engaging Experiences:** Create and engage with interactive stories, polls, and live events.\n- **Personalization:** Customize your profile, explore personalized content, and receive tailored recommendations.\n- **Community Building:** Join or create groups with shared interests, build meaningful connections, and participate in discussions.\n- **Safety and Security:** Employ robust security measures to protect user privacy and ensure a safe and secure environment.\n- **Accessibility:** Adhere to accessibility guidelines to provide an inclusive and user-friendly experience for all.\n\n## Demo\n\nFind below a list of sample images showcasing Storyscape's interface and features:\n\n#### Desktop\n\n\u003e Log in\n\u003e\n\u003e ![Demo log in](/public/demo-images/loginModal.png)\n\u003e\n\u003e Register\n\u003e\n\u003e ![Demo register](/public/demo-images/registerModal.png)\n\u003e\n\u003e Home page\n\u003e\n\u003e ![Demo home logged in](/public/demo-images/homePageLoggedIn.png)\n\u003e\n\u003e Home page logged out\n\u003e\n\u003e ![Demo home logged out](/public/demo-images/homePageLoggedOut.png)\n\u003e\n\u003e Home page zoomed out\n\u003e\n\u003e ![Demo home zoomed out](/public/demo-images/homePageZoomOut.png)\n\u003e\n\u003e Profile page\n\u003e\n\u003e ![Demo profile page](/public/demo-images/profilePage.png)\n\u003e\n\u003e Upload page\n\u003e\n\u003e ![Demo upload page](/public/demo-images/uploadPage.png)\n\u003e\n\u003e Single post\n\u003e\n\u003e ![Demo single post](/public/demo-images/post.png)\n\u003e\n\u003e Upload video\n\u003e\n\u003e ![Demo upload video](/public/demo-images/uploadVideo.png)\n\u003e\n\u003e Crop image\n\u003e\n\u003e ![Demo crop image](/public/demo-images/croppeImage.png)\n\u003e\n\u003e Edit profile\n\u003e\n\u003e ![Demo edit profile](/public/demo-images/editProfile.png)\n\u003e\n\u003e Personal feed\n\u003e\n\u003e ![Demo personal feed](/public/demo-images/feed.png)\n\u003e\n\u003e Search results\n\u003e\n\u003e ![Demo search results](/public/demo-images/searchProfiles.png)\n\u003e\n\u003e Dropdown menu\n\u003e\n\u003e ![Demo dropdown menu](/public/demo-images/dropdownMenu.png)\n\n#### Mobile\n\n\u003e Home page\n\u003e\n\u003e ![Demo home logged in](/public/demo-images/homePageMobile.png)\n\u003e\n\u003e Profile page\n\u003e\n\u003e ![Demo profile page](/public/demo-images/profilePageMobile.png)\n\u003e\n\u003e Upload page\n\u003e\n\u003e ![Demo upload page](/public/demo-images/uploadPageMobile.png)\n\u003e\n\u003e Single post\n\u003e\n\u003e ![Demo single post](/public/demo-images/postMobile1.png) ![Demo single post](/public/demo-images/postMobile2.png)\n\u003e\n\u003e Personal feed\n\u003e\n\u003e ![Demo personal feed](/public/demo-images/feedMobile.png)\n\n## Installation\n\nTo set up Storyscape locally, follow these steps:\n\n1. Clone this repository to your local machine.\n2. Navigate to the project directory.\n\n```bash\ncd storyscape\n```\n\n3. Install the dependencies.\n\n```bash\nnpm install\n# or\nyarn install\n# or\npnpm install\n# or\nbun install\n```\n\n4. Start the development server.\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\n5. Access Storyscape at `http://localhost:3000`.\n\n## Environment Variables\n\nConfigure the following environment variables in your `.env` file:\n\n```bash\nNEXT_PUBLIC_APPWRITE_URL='https://cloud.appwrite.io/v1'\nNEXT_PUBLIC_ENDPOINT=''\nNEXT_PUBLIC_DATABASE_ID=''\n\nNEXT_PUBLIC_COLLECTION_ID_PROFILE=''\nNEXT_PUBLIC_COLLECTION_ID_POST=''\nNEXT_PUBLIC_COLLECTION_ID_LIKE=''\nNEXT_PUBLIC_COLLECTION_ID_COMMENT=''\n\nNEXT_PUBLIC_BUCKET_NAME=\"Storyscape\"\nNEXT_PUBLIC_BUCKET_ID=''\nNEXT_PUBLIC_PLACEHOLDER_DEFAULT_IMAGE_ID=''\n```\n\n## AppWrite Schema\n\n### Database Name: Storyscape\n\n### Profile Collection:\n\n| Key           | Type   |\n| ------------- | ------ |\n| `Document ID` | String |\n| `image`       | String |\n| `bio`         | String |\n| `user_id`     | String |\n| `name`        | String |\n\nProfile Indexes:\n| KEY | TYPE | ATTRIBUTE | ASC/DESC |\n| ------------- | ------------- | ------------- | ------------- |\n| user_id | key | user_id | asc |\n| name | fulltext | name | asc |\n\nProfile Settings (Update Permissions):\n| Add Role | PERMISSIONS |\n| ------------- | ------------- |\n| All guests | Read |\n| All users | Create, Read, Update, Delete |\n\n### Post Collection:\n\n| Key           | Type   |\n| ------------- | ------ |\n| `Document ID` | String |\n| `user_id`     | String |\n| `video_url`   | String |\n| `text`        | String |\n| `created_at`  | String |\n\nPost Indexes:\n| KEY | TYPE | ATTRIBUTE | ASC/DESC |\n| ------------- | ------------- | ------------- | ------------- |\n| user_id | key | user_id | asc |\n\nProfile Settings (Update Permissions):\n| Add Role | PERMISSIONS |\n| ------------- | ------------- |\n| All guests | Read |\n| All users | Create, Read, Update, Delete |\n\n### Like Collection:\n\n| Key           | Type   |\n| ------------- | ------ |\n| `Document ID` | String |\n| `user_id`     | String |\n| `post_id`     | String |\n\nLike Indexes:\n| KEY | TYPE | ATTRIBUTE | ASC/DESC |\n| ------------- | ------------- | ------------- | ------------- |\n| user_id | key | user_id | asc |\n| id | unique | id | asc |\n| post_id | key | post_id | asc |\n\nLike Settings (Update Permissions):\n| Add Role | PERMISSIONS |\n| ------------- | ------------- |\n| All guests | Read |\n| All users | Create, Read, Update, Delete |\n\n### Comment Collection:\n\n| Key           | Type   |\n| ------------- | ------ |\n| `Document ID` | String |\n| `user_id`     | String |\n| `post_id`     | String |\n| `text`        | String |\n| `created_at`  | String |\n\nComment Indexes:\n| KEY | TYPE | ATTRIBUTE | ASC/DESC |\n| ------------- | ------------- | ------------- | ------------- |\n| post_id | key | post_id | asc |\n\nComment Settings (Update Permissions):\n| Add Role | PERMISSIONS |\n| ------------- | ------------- |\n| All guests | Read |\n| All users | Create, Read, Update, Delete |\n\n### Storage Name: Storyscape\n\n### Bucket:\n\nbucket Settings (Update Permissions):\n| Add Role | PERMISSIONS |\n| ------------- | ------------- |\n| All guests | Read |\n| All users | Create, Read, Update, Delete |\n\n## Contributing\n\nContributions to Storyscape are welcome! To contribute, follow these steps:\n\n1. Fork the repository.\n2. Create a new branch (`git checkout -b feature/improvement`).\n3. Make your changes and commit them (`git commit -am 'Add feature/improvement'`).\n4. Push to the branch (`git push origin feature/improvement`).\n5. Create a pull request explaining your changes.\n\n## License\n\nStoryscape is licensed under the `MIT` License. See [LICENSE](https://github.com/storyscape/storyscape/blob/main/LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fricardogesteves%2Fstoryscape","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fricardogesteves%2Fstoryscape","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fricardogesteves%2Fstoryscape/lists"}