{"id":13423718,"url":"https://github.com/suevalov/next-blog-firestore","last_synced_at":"2025-10-30T07:17:27.735Z","repository":{"id":72908839,"uuid":"117963382","full_name":"suevalov/next-blog-firestore","owner":"suevalov","description":"Example of blog built with React, Next.js, Firebase Firestore, Styled-Component, Mobx State Tree and other cool technologies","archived":false,"fork":false,"pushed_at":"2018-10-25T07:41:34.000Z","size":528,"stargazers_count":269,"open_issues_count":2,"forks_count":47,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-27T00:13:59.306Z","etag":null,"topics":["firebase-auth","firestore","marksy","mobx-state-tree","nextjs","react","ssr","styled-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/suevalov.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}},"created_at":"2018-01-18T09:45:51.000Z","updated_at":"2024-06-13T21:43:02.000Z","dependencies_parsed_at":"2023-05-26T01:00:16.554Z","dependency_job_id":null,"html_url":"https://github.com/suevalov/next-blog-firestore","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/suevalov%2Fnext-blog-firestore","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suevalov%2Fnext-blog-firestore/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suevalov%2Fnext-blog-firestore/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suevalov%2Fnext-blog-firestore/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/suevalov","download_url":"https://codeload.github.com/suevalov/next-blog-firestore/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248686384,"owners_count":21145479,"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-auth","firestore","marksy","mobx-state-tree","nextjs","react","ssr","styled-components"],"created_at":"2024-07-31T00:00:41.168Z","updated_at":"2025-10-30T07:17:27.646Z","avatar_url":"https://github.com/suevalov.png","language":"JavaScript","funding_links":[],"categories":["Boilerplates","JavaScript","Nextjs Templates"],"sub_categories":[],"readme":"# Next Blog Firestore\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357\u0026colorA=db748e)](https://github.com/styled-components/styled-components)\n\n\u003cp align='center'\u003e  \n  \u003cimg src='https://raw.githubusercontent.com/suevalov/next-blog-firestore/master/docs/logo.png' width='300' alt='Next Blog Firestore'\u003e\n\u003c/p\u003e\n\nThis blog uses Next.js for SSR \u0026 Firebase Firestore API for storing and fetching data. Create and edit your content in simple custom content management\nsystem built with React, Mobx State Tree and Styled Components.\n\nClone this repo and use it as starting point to create your own fancy blog.\n\n## Technology stack:\n\n  * [React](https://github.com/facebook/react)\n  * [Next.js](https://github.com/zeit/next.js)\n  * [Firebase Firestore \u0026 Auth](https://firebase.google.com/)\n  * [Styled-Components](https://github.com/styled-components/styled-components)\n  * [Mobx-State-Tree](https://github.com/mobxjs/mobx-state-tree)\n  * [Ant Design](https://github.com/ant-design/ant-design)\n  * [Marksy](https://github.com/storybooks/marksy)\n  * [ESLint](https://github.com/eslint/eslint)\n  * [Prettier](https://github.com/prettier/prettier)\n  * [Webpack](https://github.com/webpack/webpack)\n  * [Husky](https://github.com/typicode/husky) \u0026 [Lint-Staged](https://github.com/okonet/lint-staged)\n\n## What you get:\n\n  * Posts feed\n  * Featured posts\n  * Posts by tags and category\n  * Multi language support\n  * Multi author support\n  * Markdown with ability to use custom React components\n  * Simple and convenient CMS inspired by Ghost\n  * CMS is protected by Firebase Auth\n  * Quick and SEO-friendly responses with SSR\n  * Good results in Lighthouse\n\n## Getting started\n\n#### Step 1. Create [Firebase account](https://console.firebase.google.com)\n\n\u003cp align='center'\u003e  \n  \u003cimg src='https://raw.githubusercontent.com/suevalov/next-blog-firestore/master/docs/create-firebase-project.png' width='300' alt='Create Firebase account'\u003e\n\u003c/p\u003e\n\n#### Step 2. Setup Authentication Method\n \n  * Click **Set up sign-in method** on Authentication section.\n  * Enable **just** Google authentication provider.\n  * Add your domain (if you have one) to **Authorized domains**. \n  \n\u003cp align='center'\u003e  \n  \u003cimg src='https://raw.githubusercontent.com/suevalov/next-blog-firestore/master/docs/setup-authentication.png' width='300' alt='Setup authentication'\u003e\n\u003c/p\u003e\n \n#### Step 3. Create Firestore database\n\n* Go to **Database** section and create Firestore instance.\n\n\u003cp align='center'\u003e  \n  \u003cimg src='https://raw.githubusercontent.com/suevalov/next-blog-firestore/master/docs/create-firestore.png' width='300' alt='Create Firestore database'\u003e\n\u003c/p\u003e\n\n*Firestore is still in beta, but it doesn't make it less awesome.*\n \n#### Step 4. Database configuration.\n \n* Go to **Rules** section in your database and paste configuration from [.firebase-rules](./.firebase-rules) in project root.\n* Publish new rules.\n \n#### Step 5. Set up Firebase secret keys for our app.\n\n* Create **`.env`** at the root of the project. Do not commit this file. It is personal data that should not be available for everyone.\n* Go to **Project settings** in Firebase console (click on the gear icon next to **Project Overview**). \n* Copy data from this page to **`.env`** in the following format:\n \n ```bash\n F_PROJECT_ID=\u003cyour Project ID\u003e\n F_AUTH_DOMAIN=\u003cyour Project ID\u003e.firebaseapp.com\n F_API_KEY=\u003cyour Web API Key\u003e\n ```\n\n#### Step 6. Set up Firebase Admin SDK key for importing/exporting data from database.\n\nIn order to be able to initialize database with initial seed we need to generate private Firebase Admin service key.\n\n* Go to **Project Settings** \u003e **Service Accounts** and click **Generate new private key** button.\n* Save downloaded file as **`firebase-service-key.json`** at project root. \n** Do not commit this file. It's added to `.gitignore` by default.\n\n#### Step 7. Initialize database with initial data.\n\nWe almost finished. Let's initialize our database with initial data.\n\n```bash\nyarn\nyarn run seed\n```\n\n#### Step 8. Setup database indexes.\n\nWe need manually setup indexes in our Firestore database to be able to make REST requests to our Firebase.\n\n* Go to **Database** \u003e **Indexes** and create the following index.\n\n\u003cp align='center'\u003e  \n  \u003cimg src='https://raw.githubusercontent.com/suevalov/next-blog-firestore/master/docs/create-indexes.png' width='400' alt='Create indexes'\u003e\n\u003c/p\u003e\n\n#### Step 9. Run blog locally.\n\nWe're ready to launch our blog locally.\n\n```bash\nyarn dev\n```\n\nBlog is up and running on [http://localhost:3000](http://localhost:3000).\n\n#### Step 10. Sign in to admin part.\n\nWait.. But what's about CMS part?\n\n* Go to [http://localhost:3000/admin](http://localhost:3000/admin) and click on **\"Click to start writing\"**.\n* Sign-in with your Google Account in popup window.\n* Go to [Firebase Console](https://console.firebase.google.com) and add author rights to account you just signed in with.\n  * Copy **User UID** in **Authentication** section.\n  * Create `authors` collection in **Database**\n  * Create a record in `authors` collection, where `documentId` is UID of the user and `name` is `id` of user in `config.js` file.\n\n\u003cp align='center'\u003e  \n  \u003cimg src='https://raw.githubusercontent.com/suevalov/next-blog-firestore/master/docs/map-author.png' width='400' alt='Map author and user'\u003e\n\u003c/p\u003e\n\n#### Step 11. Ready to go!\n\n* Go to [http://localhost:3000/admin](http://localhost:3000/admin)\n* Create new post or edit existing and publish changes.\n\n## License\n\nLicensed under the MIT License, Copyright © 2018-present Alexander Suevalov\n\nSee [LICENSE](./LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuevalov%2Fnext-blog-firestore","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuevalov%2Fnext-blog-firestore","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuevalov%2Fnext-blog-firestore/lists"}