{"id":15649589,"url":"https://github.com/sashenjayathilaka/photo-sharing-application","last_synced_at":"2025-04-30T17:33:17.974Z","repository":{"id":113435370,"uuid":"533392967","full_name":"SashenJayathilaka/Photo-Sharing-Application","owner":"SashenJayathilaka","description":"Full Stack Photo Sharing Application with React Js (like as pinterest) (Google Authentication, create, edit, delete and save posts and comment on other people's posts, search and filter images)","archived":false,"fork":false,"pushed_at":"2022-11-21T04:43:25.000Z","size":19908,"stargazers_count":49,"open_issues_count":0,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-30T18:22:57.916Z","etag":null,"topics":["firebase","framer-motion","google-authentication","javascript","learn","netlify-deployment","react","react-dom","react-firebase-hooks","react-hot-toast","react-icons","react-loader-spinner","react-masonry-css","react-router-dom-v6","react-scripts","sanity-client","sanity-io","tailwindcss","uuid-generator","web-vitals"],"latest_commit_sha":null,"homepage":"https://photo-sharingo.netlify.app","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/SashenJayathilaka.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":"2022-09-06T15:42:34.000Z","updated_at":"2025-03-25T03:59:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"a406bdf1-da94-47fa-81e8-8a2df799ead6","html_url":"https://github.com/SashenJayathilaka/Photo-Sharing-Application","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SashenJayathilaka%2FPhoto-Sharing-Application","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SashenJayathilaka%2FPhoto-Sharing-Application/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SashenJayathilaka%2FPhoto-Sharing-Application/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SashenJayathilaka%2FPhoto-Sharing-Application/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SashenJayathilaka","download_url":"https://codeload.github.com/SashenJayathilaka/Photo-Sharing-Application/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251751031,"owners_count":21637842,"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":["firebase","framer-motion","google-authentication","javascript","learn","netlify-deployment","react","react-dom","react-firebase-hooks","react-hot-toast","react-icons","react-loader-spinner","react-masonry-css","react-router-dom-v6","react-scripts","sanity-client","sanity-io","tailwindcss","uuid-generator","web-vitals"],"created_at":"2024-10-03T12:30:21.664Z","updated_at":"2025-04-30T17:33:17.933Z","avatar_url":"https://github.com/SashenJayathilaka.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n  \u003cimg src=\"https://lh5.ggpht.com/2l5qy4S93Ywq1CZbEubVofMbS1vvFyAMMGoGGb6awOQXsb1rd9VpwqEEoO6KYlYlAMw=w300\" alt=\"logo\" width=\"200\" height=\"auto\" /\u003e\n  \n# Photo Sharing Application with REACT.JS!\n  \n  \u003cp\u003e\nFull Stack Photo Sharing Application with React Js (like as pinterest) (Google Authentication, create, edit, delete and save posts and comment on other people's posts, search and filter images)\n  \u003c/p\u003e\n  \n  \n\u003c!-- Badges --\u003e\n\n\u003ca href=\"https://photo-sharingo.netlify.app\" target=\"_blank\"\u003e![](https://img.shields.io/website-up-down-green-red/http/monip.org.svg)\u003c/a\u003e\n![](https://img.shields.io/badge/Maintained-Yes-indigo)\n![](https://img.shields.io/github/forks/SashenJayathilaka/Photo-Sharing-Application.svg)\n![](https://img.shields.io/github/stars/SashenJayathilaka/Photo-Sharing-Application.svg)\n![](https://img.shields.io/github/issues/SashenJayathilaka/Photo-Sharing-Application)\n![](https://img.shields.io/github/last-commit/SashenJayathilaka/Photo-Sharing-Application)\n\n\u003ch4\u003e\n    \u003ca href=\"https://photo-sharingo.netlify.app\"\u003eView Demo\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n    \u003ca href=\"https://github.com/SashenJayathilaka/Photo-Sharing-Application/blob/master/README.md\"\u003eDocumentation\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n    \u003ca href=\"https://github.com/SashenJayathilaka/Photo-Sharing-Application/issues\"\u003eReport Bug\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n    \u003ca href=\"https://github.com/SashenJayathilaka/Photo-Sharing-Application/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/h4\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003c!-- Table of Contents --\u003e\n\n## :notebook_with_decorative_cover: Table of Contents\n\n- [About the Project](#star2-about-the-project)\n  - [Screenshots](#camera-screenshots)\n  - [Tech Stack](#space_invader-tech-stack)\n  - [Environment Variables](#key-environment-variables)\n- [Getting Started](#toolbox-getting-started)\n  - [Prerequisites](#bangbang-prerequisites)\n  - [Installation](#gear-installation)\n  - [Run Locally](#running-run-locally)\n- [Contact](#handshake-contact)\n\n\u003c!-- About the Project --\u003e\n\n## :star2: About the Project\n\n\u003c!-- Screenshots --\u003e\n\n### :camera: Screenshots\n\n\u003cdiv align=\"center\" display='flex'\u003e\n\u003ca href=\"https://photo-sharingo.netlify.app\"\u003e\u003cimg src='./assets/ezgif-3-4059e17b09.gif' alt='image'/\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n## \u003ca href=\"https://photo-sharingo.netlify.app\" target=\"_blank\"\u003eLIVE DEMO 💥\u003c/a\u003e\n\n![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)\n![forthebadge](https://forthebadge.com/images/badges/for-you.svg)\n![forthebadge](https://forthebadge.com/images/badges/powered-by-coffee.svg)\n\n### :space_invader: Tech Stack\n\n\u003cdetails\u003e\n  \u003csummary\u003eClient\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://#/\"\u003eJavascript\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://reactjs.org/\"\u003eReact.js\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://tailwindcss.com/\"\u003eTailwindCSS\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eDatabase\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://www.sanity.io\"\u003eSanity\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n\u003cbr /\u003e\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n\u003ca href=\"#\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original.svg\" alt=\"\" width=\"30\" height=\"30\" /\u003e\u003c/a\u003e\n        \u003c/td\u003e\n                        \u003ctd\u003e\n\u003ca href=\"#\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-plain.svg\" alt=\"Google\" width=\"30\" height=\"30\" /\u003e\u003c/a\u003e\n        \u003c/td\u003e\n                        \u003ctd\u003e\n\u003ca href=\"#\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/99184393/179383376-874f547c-4e6f-4826-850e-706b009e7e2b.png\" alt=\"\" width=\"30\" height=\"30\" /\u003e\u003c/a\u003e\n        \u003c/td\u003e\n                        \u003ctd\u003e\n\u003ca href=\"#\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/99184393/180462270-ea4a249c-627c-4479-9431-5c3fd25454c4.png\" alt=\"\" width=\"30\" height=\"30\" /\u003e\u003c/a\u003e\n        \u003c/td\u003e\n                                \u003ctd\u003e\n\u003ca href=\"#\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/99184393/183095729-0ae04014-a62c-4013-93ff-6861fbff308e.png\" alt=\"\" width=\"30\" height=\"30\" /\u003e\u003c/a\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n## :toolbox: Getting Started\n\n### :bangbang: Prerequisites\n\n- Sign up for a Firebase account \u003ca href='https://firebase.google.com'\u003eHERE\u003c/a\u003e\n- Sign up for a Sanity account \u003ca href='https://www.sanity.io'\u003eHERE\u003c/a\u003e\n- Install Node JS in your computer \u003ca href='https://nodejs.org/en/'\u003eHERE\u003c/a\u003e\n\n\u003c!-- Env Variables --\u003e\n\n### :key: Environment Variables\n\nTo run this project, you will need to add the following environment variables to your .env file\n\n`SANITY_API_TOKEN`\n\n`NEXT_PUBLIC_SANITY_PROJECT_ID`\n\n`NEXT_PUBLIC_SANITY_DATASET`\n\n`NEXT_PUBLIC_FIREBASE_API_KEY`\n\n`NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN`\n\n`NEXT_PUBLIC_FIREBASE_PROJECT_ID`\n\n`NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET`\n\n`NEXT_PUBLIC_FIREBASE_MESSAGING_SET`\n\n`NEXT_PUBLIC_FIREBASE_APP_ID`\n\n`NEXT_PUBLIC_BASE_URL`\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n### :gear: Installation\n\n![](https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)\n\nInstall my-project with npm\n\n```\nnpx create-react-app my-project\n```\n\n```\ncd my-project\n```\n\nInstall dependencies\n\n### :test_tube: Install Tailwind CSS with Next.js\n\n#### Install Tailwind CSS\n\n![](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)\n\nInstall tailwindcss and its peer dependencies via npm, and then run the init command to generate both `tailwind.config.js` and `postcss.config.js`.\n\n```\nnpm install -D tailwindcss postcss autoprefixer\n```\n\n```\nnpx tailwindcss init -p\n```\n\n#### Configure your template paths\n\nAdd the paths to all of your template files in your `tailwind.config.js` file.\n\u003cbr\u003e\n\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: [\n    \"./src/**/*.{js,jsx,ts,tsx}\",\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}\n```\n\n#### Add the Tailwind directives to your CSS\n\nAdd the `@tailwind` directives for each of Tailwind’s layers to your `./src/index.css` file.\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nInstall dependencies\n\n\u003ca href=\"https://github.com/SashenJayathilaka/Photo-Sharing-Application/network/dependencies\" target=\"_blank\"\u003e🔶 Dependency Info\u003c/a\u003e\n\n\u003c!-- Run Locally --\u003e\n\n### :running: Run Locally\n\n![](https://img.shields.io/badge/GIT-E44C30?style=for-the-badge\u0026logo=git\u0026logoColor=white)\n\nClone the project\n\n```bash\n  git https://github.com/SashenJayathilaka/Photo-Sharing-Application.git\n```\n\nchange directory\n\n```bash\n  cd Photo-Sharing-Application\n```\n\nInstall dependencies\n\n```bash\n  npm install\n```\n\nStart the server\n\n```bash\n  npm start\n```\n\n\u003chr /\u003e\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in your browser.\n\nThe page will reload when you make changes.\\\nYou may also see any lint errors in the console.\n\n#### `npm test`\n\nLaunches the test runner in the interactive watch mode.\\\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n#### `npm run build`\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\\\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n#### `npm run eject`\n\n**Note: this is a one-way operation. Once you `eject`, you can't go back!**\n\nIf you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.\n\nInstead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.\n\nYou don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.\n\n#### Learn More\n\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n\n#### Code Splitting\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)\n\n#### Analyzing the Bundle Size\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)\n\n#### Making a Progressive Web App\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)\n\n#### Advanced Configuration\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)\n\n#### Deployment\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)\n\n#### `npm run build` fails to minify\n\n## :handshake: Contact\n\nSashen - [@twitter_handle](https://twitter.com/SashenHasinduJ) - sashenjayathilaka95@gmail.com\n\nProject Link: [https://github.com/SashenJayathilaka/Photo-Sharing-Application.git](https://github.com/SashenJayathilaka/Photo-Sharing-Application.git)\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://photo-sharingo.netlify.app\"\u003e\u003cimg src='https://user-images.githubusercontent.com/99184393/202158184-b4145ff9-e920-4dee-bbd0-2dd82e0b474b.png' alt='image'/\u003e\u003c/a\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsashenjayathilaka%2Fphoto-sharing-application","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsashenjayathilaka%2Fphoto-sharing-application","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsashenjayathilaka%2Fphoto-sharing-application/lists"}