next-blog-firestore - Example of blog built with React, Next

  •        11

This blog uses Next.js for SSR & Firebase Firestore API for storing and fetching data. Create and edit your content in simple custom content management system built with React, Mobx State Tree and Styled Components. Clone this repo and use it as starting point to create your own fancy blog.

https://github.com/suevalov/next-blog-firestore

Dependencies:

@firebase/app : 0.1.6
@firebase/auth : 0.3.2
@firebase/firestore : 0.2.3
@firebase/polyfill : 0.1.4
antd : 2.13.10
cash-dom : 1.3.6
express : 4.16.2
fontfaceobserver : 2.0.13
isomorphic-unfetch : 2.0.0
lodash.assign : 4.2.0
lodash.debounce : 4.0.8
lodash.keys : 4.2.0
lodash.sortby : 4.7.0
lodash.values : 4.3.0
lru-cache : 4.1.1
marksy : 6.0.3
mobx : 3.4.1
mobx-react : 4.3.5
mobx-state-tree : 1.3.1
next-routes : ^1.1.0
nprogress : 0.2.0
polished : 1.9.0
react : 16.2.0
react-burger-menu : 2.2.3
react-dom : 16.2.0
react-icon-base : 2.1.2
react-lazyload : 2.3.0
react-medium-image-zoom : 3.0.9
react-no-ssr : 1.1.0
react-player : 0.25.3
react-scroll-up : 1.3.3
react-share : 1.19.0
react-simplemde-editor : 3.6.11
react-styled-flexboxgrid : 2.1.1
react-visibility-sensor : 3.11.0
serve-static : 1.13.1
styled-components : 2.4.0
tinytime : 0.2.6
xmlhttprequest : 1.8.0

Tags
Implementation
License
Platform

   




Related Projects

react-firebase-hooks - React Hooks for Firebase.

  •    TypeScript

A set of reusable React Hooks for Firebase. Official support for Hooks was added to React Native in v0.59.0. React Firebase Hooks works with both the Firebase JS SDK and React Native Firebase, although some of the Flow and Typescript typings may be incorrect - we are investigating ways to improve this for React Native Firebase users.

redux-firestore - Redux bindings for Firestore

  •    Javascript

This assumes you are using npm as your package manager. It is common to make react components "functional" meaning that the component is just a function instead of being a class which extends React.Component. This can be useful, but can limit usage of lifecycle hooks and other features of Component Classes. recompose helps solve this by providing Higher Order Component functions such as withContext, lifecycle, and withHandlers.

ngx-auth-firebaseui - Angular Material UI component for firebase authentication

  •    TypeScript

Angular UI component for firebase authentication. This library is an angular module (including angular components and services) that allows to authenticate your users with your firebase project. NgxAuthFirebseUI is compatible with angular material and angular flexLayout.

nextein - A static site generator with markdown + react for Next.js

  •    Javascript

nextein is a wrapper around next.js that allows you to write static sites using markdown and react. NodeJS v8.x+ is required to run nextein commands.


ran - :zap: RAN! React

  •    Javascript

:zap: RAN! React . GraphQL . Next.js Toolkit :zap: - SEO-Ready, Production-Ready, SSR, Hot-Reload, CSS-in-JS, Caching, CLI commands and more...

coderplanets_web - the most sexiest community for developers, build with React, Mobx/MST, GraphQL, Styled-Components, Rxjs, Ramda

  •    Javascript

the most sexiest community for developers, build with React, Mobx/MST, GraphQL, Styled-Components, Rxjs, Ramda ... and ❤️

create-next-app - Create Next.js apps in one command

  •    Javascript

Open http://localhost:3000 to view your running app. When you're ready for production, run npm run build then npm run start. You don't need to install or setup Webpack or Babel. They come packaged with next, so you can just start coding.

next-boilerplate - A well-structured production ready Next

  •    TypeScript

Next.js is a minimalistic React framework that runs in the browser and the server. It offers developers an easy way to get started, and as it uses React.js for templating it is also a straightforward way for developers with React experience to get productive fast. The advantages of this approach is to be able to create Rich User experiences in a uniform way, without compromising Search Engine Optimisation (SEO) factors that are key to good ranking on Google and other search engines.

next-blog - Markdown based blog using next.js, supporting static export

  •    Javascript

Markdown based blog using next. It also uses processmd to compile the markdown files and watch for changes (disclaimer: another project of mine). Clone this repo and use it as a starting point for your own blog.

fluttergram - A working Instagram clone written in Flutter using Firebase / Firestore

  •    Dart

A working Instagram clone written in Flutter using Firebase / Firestore

mobx-react-lite - Lightweight React bindings for MobX based on React 16.8 and Hooks

  •    TypeScript

This is a next iteration of mobx-react coming from introducing React hooks which simplifies a lot of internal workings of this package. Class based components are not supported except using <Observer> directly in class render method. If you want to transition existing projects from classes to hooks (as most of us do), you can use this package alongside the mobx-react just fine. The only conflict point is about the observer HOC. Subscribe to this issue for a proper migration guide.

reactql - Universal React+GraphQL starter kit: React 16, Apollo 2, Webpack 4, Styled Components 4, React Router 4, PostCSS, SSR

  •    TypeScript

Universal front-end React + GraphQL starter kit, written in Typescript. Hot code reloading. Make a change anywhere in your code base (outside of the Webpack config), and changes will be pushed down the browser automatically - without page reloads. This happens for React, Styled Components, SASS - pretty much anything.

next-offline - make your Next.js application work offline using service workers via Google's workbox

  •    Javascript

Use Workbox with Next.js and easily enable offline functionality in your application. Then create a server.js, because we'll need to serve out service worker.

nativescript-plugin-firebase - :fire: NativeScript plugin for Firebase, the leading realtime JSON :cloud: app platform

  •    TypeScript

Head on over to https://console.firebase.google.com/ and sign up for a free account. Your first 'Firebase' will be automatically created and made available via an URL like https://n-plugin-test.firebaseio.com. This will launch an install script which will guide you through installing additional components. Check the doc links above to see what's what. You can always change your choices later.

ReactStateMuseum - A whirlwind tour of React state management systems by example

  •    Javascript

Every app is meant to be small, simple, and the same as each other. The only difference should be the state management decisions of each. The repeated React and ReactNative app is a Packing List, with the name based on the state technology.

parket - A library to manage application state, heavily inspired by mobx-state-tree

  •    TypeScript

I was disappointed with all the current state management solutions. Then I found mobx-state-tree, which seemed like a godsend to me (ok not really, but I liked the concept), but it was pretty big in terms of file size (mobx alone is big: 16.5kB). So I thought it's surely possible to make a smaller version of it, that's how this started. And after 2 failed attempts I can finally say: Here it is in all of its "glory". Note: This library uses Proxies and Symbols. Proxies cannot be fully polyfilled so you have to target modern browers which support Proxies.

hoverboard - GDG DevFest website template

  •    HTML

Project Hoverboard is the conference website template that helps you to set up mobile first conference website with blog, speakers and schedule management in a few minutes. The template is created based on 7 years of GDG Lviv team experience of running conferences and feedback from more than 500 event organizers from all around the world who were using previous Hoverboard versions.