{"id":16518000,"url":"https://github.com/ayush-kanduri/blog-webapp-react","last_synced_at":"2026-03-09T12:04:41.156Z","repository":{"id":186395990,"uuid":"675077308","full_name":"Ayush-Kanduri/Blog-WebApp-React","owner":"Ayush-Kanduri","description":"Blogster Hub is a Blogging Web App which is built on ReactJS, TailwindCSS \u0026 Firebase. This app uses the React Router 6 Navigation \u0026 Routing \u0026 React Hooks, Custom Hooks. This app uses the Firestore DB along with the Firebase Hosting.","archived":false,"fork":false,"pushed_at":"2024-08-12T18:31:40.000Z","size":151,"stargazers_count":2,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-06T14:35:13.558Z","etag":null,"topics":["css-modules","firebase","firebase-hosting","firestore","firestore-react","material-ui","react","react-hooks","react-router","react-router-dom","reactjs","styled-components","tailwind","tailwind-css","tailwindcss"],"latest_commit_sha":null,"homepage":"https://blog-webapp-react.web.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/Ayush-Kanduri.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}},"created_at":"2023-08-05T17:39:45.000Z","updated_at":"2023-10-14T09:03:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"f7cc8332-8072-4546-acfe-682fbe41484e","html_url":"https://github.com/Ayush-Kanduri/Blog-WebApp-React","commit_stats":null,"previous_names":["ayush-kanduri/blog-webapp-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ayush-Kanduri/Blog-WebApp-React","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayush-Kanduri%2FBlog-WebApp-React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayush-Kanduri%2FBlog-WebApp-React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayush-Kanduri%2FBlog-WebApp-React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayush-Kanduri%2FBlog-WebApp-React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ayush-Kanduri","download_url":"https://codeload.github.com/Ayush-Kanduri/Blog-WebApp-React/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayush-Kanduri%2FBlog-WebApp-React/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30294713,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T11:12:22.024Z","status":"ssl_error","status_checked_at":"2026-03-09T11:10:54.577Z","response_time":61,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["css-modules","firebase","firebase-hosting","firestore","firestore-react","material-ui","react","react-hooks","react-router","react-router-dom","reactjs","styled-components","tailwind","tailwind-css","tailwindcss"],"created_at":"2024-10-11T16:34:32.911Z","updated_at":"2026-03-09T12:04:41.142Z","avatar_url":"https://github.com/Ayush-Kanduri.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 𝐁𝐥𝐨𝐠𝐬𝐭𝐞𝐫 𝐇𝐮𝐛: 𝐁𝐥𝐨𝐠𝐠𝐢𝐧𝐠 𝐖𝐞𝐛𝐀𝐩𝐩 𝐑𝐞𝐚𝐜𝐭 🚀\n\n\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/Ayush-Kanduri/GitHub-Tutorial/assets/76626529/e59e9ab3-659a-496a-9a92-fc90cf85637d\"\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n## ⭐ Introduction\n\nBlogster Hub is a Blogging Web App which is built on ReactJS, TailwindCSS \u0026 Firebase. This app uses the React Router 6 Navigation \u0026 Routing \u0026 React Hooks, Custom Hooks. This app uses the Firestore DB along with the Firebase Hosting.\n\n-   Users can create new posts \u0026 that post consists of a thumbnail image, title, author's name, content, createdAt timestamp.\n-   Users can view the list of posts posted by various people on the platform, on their homepage in form of cards.\n-   Users can navigate to the main blog article page, where they can read the article.\n-   Error 404 page has also been handled in case the User gets lost.  \n    \u003cbr/\u003e\n    \u003cbr/\u003e\n\n## 🔥 Getting Started With The Project\n\n-   Fork the Project.\n\nClick the gray `Fork` button in the top right of this page. This creates _your_ copy of the project and saves it as a new repository in your github account.\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n-   Clone the Forked Repository in your Local System.\n\nClick on the green `Code` button, then either the HTTPS or SSH option and, click the icon to copy the URL.\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n-   Run the following commands in your code editor's terminal:\n    \u003cbr/\u003e\n\n```bash\n  git clone \u003cPaste the copied link\u003e\n```\n\n\u003cbr/\u003e\nSwitch to the cloned folder.\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n```bash\n  cd \u003cRepository Name\u003e\n```\n\n\u003cbr/\u003e\nMake a new branch.\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n```bash\n  git checkout -b \u003cyour-username\u003e\n```\n\n\u003cbr/\u003e\n\n-   Download, Install \u0026 Configure `NodeJS` in your system.\n\nMake sure that `NPM` is also installed.\u003cbr/\u003e\nSee the section about [NodeJS](https://nodejs.org/en/#download) for more information.\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n-   Install Dependencies\n\n```bash\nnpm install\n```\n\n\u003cbr/\u003e\n\n-   Configure the `ENV VARIABLES` for the Firestore Configuration by creating a _.env_ file at the root \u0026 put your firestore variables in it.\n    Variable should start with `VITE_`. Example: VITE_apikey=firebasekey\n\nAfter this, when you run the app, you will be connected to your _firestore_.\n\u003cbr/\u003e\nFor reference, this is the documentation: https://firebase.google.com/docs/firestore?authuser=0\u0026hl=en\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n-   To run the project in Development mode, run this command in your code editor's terminal to Fire Up the Local Server:\n\n```bash\nnpm run dev\n```\n\nThis runs the app in the development mode locally.\nNow open http://localhost:8000 in your browser to view the Live Website.\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n-   To run the project in Production mode, first build the project to make it production ready:\n\n```bash\nnpm run build\n```\n\n```bash\nnpm run build:tailwind:prod\n```\n\nNow, run this command in your code editor's terminal to Fire Up the Local Server:\n\n```bash\nnpm run preview\n```\n\nThis runs the app in the production mode locally.\nNow open http://localhost:4173 in your browser to view the Live Website.\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## 🔨 Tools Used\n\n\u003cbr/\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://skillicons.dev\"\u003e\n    \u003cimg width=\"2000\" src=\"https://skillicons.dev/icons?i=vite,react,materialui,css,styledcomponents,js,nodejs,vscode,github,emotion,babel,firebase,tailwind,github,git\u0026theme=dark\u0026perline=5\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n-   Library:\n    -   react-toastify\n    -   styled-components\n    -   react-spinners\n    -   react-router-dom\n    -   react-icons\n    -   react\n    -   react-dom\n    -   firebase\n    -   @emotion/react\n    -   @emotion/styled\n    -   @mui/icons-material\n    -   @mui/material\n    -   @mui/styled-engine-sc\n    -   @types/node\n    -   firebase-tools\n-   Plugins:\n    -   @tailwindcss/forms\n    -   autoprefixer\n    -   postcss\n    -   tailwindcss\n-   Version Control System: Git\n-   Version Control System Hosting: GitHub\n-   Programming / Scripting: JavaScript \u0026 JSX\n-   Front-End: ReactJS\n-   Styling: CSS Module, Styled Components, Material UI, Emotion, TailwindCSS\n-   Runtime Environment: NodeJS\n-   Integrated Development Environment: VSCode\n-   Hosting: Firebase Hosting\n-   Tech Stack: React, Styled Components, Material UI, React Toastify, TailwindCSS, React Router V6, Firebase\n    \u003cbr/\u003e\n    \u003cbr/\u003e\n\n## 🔗 Links\n\n### **_Checkout the Live Website:_** [Blogging WebApp React](https://blog-webapp-react.web.app)\n\n### **_Checkout the Demo Video:_** [YouTube](https://youtu.be/1ue-z3b4Ywc)\n\n\u003cbr /\u003e\n\n## 💻 Screens\n\n\u003cp align=\"justify\"\u003e\n\u003cimg src=\"https://github.com/Ayush-Kanduri/GitHub-Tutorial/assets/76626529/e59e9ab3-659a-496a-9a92-fc90cf85637d\"\u003e\n\u003cimg src=\"https://github.com/Ayush-Kanduri/GitHub-Tutorial/assets/76626529/02d59536-6575-46f6-bcf0-72272e881bcb\"\u003e\n\u003cimg src=\"https://github.com/Ayush-Kanduri/GitHub-Tutorial/assets/76626529/257036b9-d9b6-4207-bf26-fc21e4fde7c5\"\u003e\n\u003cimg src=\"https://github.com/Ayush-Kanduri/GitHub-Tutorial/assets/76626529/6765d076-2e88-4304-a697-f4cdc6fb15d5\"\u003e\n\u003cimg src=\"https://github.com/Ayush-Kanduri/GitHub-Tutorial/assets/76626529/2a323126-b8c1-4355-acce-750e921acfc9\"\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n## :heart: Follow Me:\n\n\u003e [Twitter](https://twitter.com/ayush_codes)\n\n\u003e [LinkedIn](https://www.linkedin.com/in/ayushkanduri)\n\n\u003e [YouTube](https://www.youtube.com/@AyushKanduri)\n\n#### I hope you like the project. Thanks for reading! 😀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayush-kanduri%2Fblog-webapp-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayush-kanduri%2Fblog-webapp-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayush-kanduri%2Fblog-webapp-react/lists"}