/nextjs-typescript-firebase

Next.js + TypeScript + Firebase

Primary LanguageTypeScript

Description

A boilerplate for Next.js App.

Contents

Global Requisites

  • next (>=7.0.2)
  • firebase (>=5.7.2)

App Structure

Note: I am mentioning only files/folders which you need to configure if required

├── pages
│   ├── profile
│   │   ├── details-update.tsx
│   │   └── picture-update.tsx
│   ├── _app.tsx
│   ├── dashboard.tsx
│   ├── forgot-password.tsx
│   ├── index.tsx
│   ├── reset-password.tsx
│   ├── signin.tsx
│   └── signout.tsx
├── src
│   ├── components
│   │   ├── Auth
│   │   │   ├── CheckAuth.tsx
│   │   │   ├── FotgotPassword.tsx
│   │   │   ├── RefreshToken.tsx
│   │   │   ├── Signin.tsx
│   │   │   └── Signup.tsx
│   │   ├── Navigation
│   │   │   └── NavBar.tsx
│   │   └── Profile
│   │       ├── ProfileDetailsUpdate.tsx
│   │       └── ProfilePictueUpdate.tsx
│   ├── firebase
│   │   ├── auth.ts
│   │   └── userInterfaces.ts
│   ├── interfaces
│   │   ├── auth.ts
│   │   └── index.ts
│   ├── redux
│   │   ├── actions
│   │   │   ├── index.ts
│   │   │   └── userActions.ts
│   │   ├── reducer
│   │   │   ├── authReducers.ts
│   │   │   ├── index.ts
│   │   │   └── userReducers.ts
│   │   └── store
│   │       └── index.ts
├── styles
│   ├── bootstrap
│   └── main.scss
├── .babelrc
├── .gitignore
├── .tsconfig.json
├── firebaseConfig.json
├── next.config.json
├── package.json
├── README.md
├── typings.d.ts

Install, Configure & Run

Below mentioned are the steps to install, configure & run in your platform/distributions.

Note: It is preassumed here that you have mongoose running in background & you have created the database.

# Clone the repo.
git clone https://git.geekyants.com/products/nextjs-typescript-firebase;

# Goto the cloned project folder.
cd nextjs-typescript-firebase;

# Install NPM dependencies.
# Note: You can review the list of dependencies from the below link.
# https://github.com/faizahmedfarooqui/nodets/network/dependencies
npm install;

# Edit your firebaseConfig.json file using any editor of your choice.
# Please Note: You should add all the configuration values provided by
# firebase console , otherwise App will crash
vim firebaseConfig.json;

# Run the app
npm run dev;

Further Steps

Adding a page

  • To add a new page , create a new file named <your-page-name>.tsx
  • You can further import your own React Components and use it under render fnction

Setting Up Firebase

  • Create a new project in Firebase Console , if you haven't already
  • Enable Authentication (Password Based) , Database and Storage on your project
  • copy and paste your api credentials in firebaseConfig.json
  • To add a table of your own go to your Firebase project -> database -> create database , again , if you haven't already
  • Use the following code under your project to update/create a table
import firebase from 'src/firebase';
const ref = firebase
  .database()
  .ref()
  .child('table-name');
ref.child('unique-name-for--the-entry').set(/* table fields*/);
  • To get the data from firebase table use
var Id = id; //unique-name-for--the-entry
firebase
  .database()
  .ref('/table-name/' + userId)
  .once('value')
  .then(function(snapshot) {
    const data = snapshot.val();
    //perform operation on data here
  });

Note

if you wish to fetch data in getInitialProps of a page , make sure you have enabled CORS on your server , alternatively you can use this chrome extension Allow-Control-Allow-Origin: *

Screens

SignIn Page

SignIn Page

Note: This page contains signin form and prefetched data from https://cat-fact.herokuapp.com/facts

SignUp Page

SignUp Page

ForgotPassword Page

ForgotPassword

Dashboard Page

Dashboard Page

With Dropdown Menu

Dashboard Page with Dropdown Menu

Profile Details Update Page

Profile Details Update

Profile Picture Update Page

Profile Picture Update

Reset Passsword Page

Reset Passsword