{"id":19840020,"url":"https://github.com/destructo570/deplace-maison-ecommerce-webapp","last_synced_at":"2025-09-18T10:33:22.451Z","repository":{"id":131572668,"uuid":"431405776","full_name":"destructo570/deplace-maison-ecommerce-webapp","owner":"destructo570","description":"A recreation of deplace maison ecoomerce website using React/Next JS with stripe payment integration and firebase for storing orders.","archived":false,"fork":false,"pushed_at":"2022-09-19T06:48:19.000Z","size":1997,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-12T12:32:50.079Z","etag":null,"topics":["css","ecommerce","firebase","html","javascript","nextjs","react","reactjs","stripe-api","webapp"],"latest_commit_sha":null,"homepage":"https://deplace-maison-ecommerce-webapp-951b22zlw-destructo570.vercel.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/destructo570.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":"2021-11-24T08:35:51.000Z","updated_at":"2024-10-29T21:52:49.000Z","dependencies_parsed_at":"2023-06-10T07:45:10.272Z","dependency_job_id":null,"html_url":"https://github.com/destructo570/deplace-maison-ecommerce-webapp","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/destructo570%2Fdeplace-maison-ecommerce-webapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/destructo570%2Fdeplace-maison-ecommerce-webapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/destructo570%2Fdeplace-maison-ecommerce-webapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/destructo570%2Fdeplace-maison-ecommerce-webapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/destructo570","download_url":"https://codeload.github.com/destructo570/deplace-maison-ecommerce-webapp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233473628,"owners_count":18681552,"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":["css","ecommerce","firebase","html","javascript","nextjs","react","reactjs","stripe-api","webapp"],"created_at":"2024-11-12T12:25:11.869Z","updated_at":"2025-09-18T10:33:16.981Z","avatar_url":"https://github.com/destructo570.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Deplace Maison Ecommerce Webapp NextJs and ReactJS\n\nA clone of deplace maison ecoomerce website using React/Next JS with stripe payment integration and firebase for storing orders.\n\n## [Live Demo](https://deplace-maison-ecommerce-webapp-951b22zlw-destructo570.vercel.app/)\n\n## Disclaimer\n\nThis project was made only for educational purposes, I do not own any of the content (product images, fonts etc.). All the credit goes to Deplace maison. This project was only meant to be created as part of frontend React/NextJs practice and learning. This project is not meant to be used for any other purposes.\n\nI found out about the website on [FrontendPractice](https://www.frontendpractice.com/)\nYou can checkout the original website [here.](https://www.deplacemaison.com/)\n\n## Features \u0026 Tech Stack\n\n- NextJs/ReactJS - Frontend and UI development\n- NodeJS - Backend development\n- Axios - Making asynchronus HTTP requests\n- NextAuth v4 - For user authentication via gmail\n- Stripe payment integration (webhooks)\n- StyledComponents - Styling all the react components.\n- Firebase Realtime DB - Getting products and other data.\n- Firebase Firestore DB - Storing  orders after processing payments.\n- ContextApi for app wide state management\n- Local storage for storing user cart\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ch3\u003e🌈Screenshots\u003c/h3\u003e\u003c/summary\u003e\n  \n  ![alt text](https://imgur.com/snvQ2FA.png)\n  ![alt text](https://imgur.com/KnTSLpO.png)\n  ![alt text](https://imgur.com/yFEEclR.png)\n  ![alt text](https://imgur.com/DfAypPV.png)\n  \u003cimg src=\"https://imgur.com/obSyX6J.png\" width=32%\u003e\n  \u003cimg src=\"https://imgur.com/aJBZddm.png\" width=32%\u003e\n  \u003cimg src=\"https://imgur.com/1djQz8u.png\" width=32%\u003e\n  \n\u003c/details\u003e\n\n\n## Installation\n\n- Download the code\n- Open a npm terminal in root directory\n\n```bash\nnpm install\n```\n\n## Environment variable file\n- In the root folder create a .env.local file and define these constants in there\n- You can checkout the respective docs of stripe, google, firebase etc. on how to get the public and private keys.\n- Stripe: https://stripe.com/docs/keys\n- Stripe CLI: https://stripe.com/docs/stripe-cli\n- Firebase Service Account: https://firebase.google.com/docs/admin/setup#set-up-project-and-service-account\n- Google cloud auth: https://support.google.com/cloud/answer/6158849?hl=en\n- Next Auth Secret: https://next-auth.js.org/configuration/options#secret\n\n```\n#Stripe\nSTRIPE_PUBLIC_KEY= \nSTRIPE_SECRET_KEY= \n\n#Stripe Terminal/CLI\nSTRIPE_SIGNING_SECRET= \n\nHOST=http://localhost:3000\n\n#Database\nFIREBASE_SERVICE_ACC_KEY= \n\n#Authentication\nGOOGLE_CLIENT_ID= \nGOOGLE_CLIENT_SECRET= \n\n//A random string used to hash tokens by NextAuth\nSECRET= \n```\n\n## Building the project\n- Run the below command to start the development server\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n- Open http://localhost:3000/ in your local machine to see the website live\n\n## Building for production\n- Run the below command to build the project for production\n\n```bash\nnpm run build\n```\n\n## Todo\n - Add animations\n - Add dark theme\n - Add page transitions\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdestructo570%2Fdeplace-maison-ecommerce-webapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdestructo570%2Fdeplace-maison-ecommerce-webapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdestructo570%2Fdeplace-maison-ecommerce-webapp/lists"}