Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fostimus/next-firebase-starter


https://github.com/fostimus/next-firebase-starter

Last synced: about 1 month ago
JSON representation

Awesome Lists containing this project

README 

        

## 👉 Get Started

Install dependencies

```

npm install

```

Update your `.env` file with values for each environment variable

```

API_KEY=AIzaSyBkkFF0XhNZeWuDmOfEhsgdfX1VBG7WTas

etc ...

```

Run the development server

```

npm run dev

```

When the above command completes you'll be able to view your website at `http://localhost:3000`



## 🥞 Stack

This project uses the following libraries and services:

- Framework - [Next.js](https://nextjs.org)

- UI Kit - [Bootstrap](https://react-bootstrap.github.io)

- Authentication - [Firebase Auth](https://firebase.google.com/products/auth)

- Database - [Cloud Firestore](https://firebase.google.com/products/firestore)

- Payments - [Stripe](https://stripe.com)

- Newsletter - [Mailchimp](https://mailchimp.com)

- Contact Form - [Google Sheets](https://www.google.com/sheets/about/)

- Analytics - [Google Analytics](https://googleanalytics.com)

- Hosting - [Vercel](https://vercel.com)



## 📚 Guide



 Styles 
 You can edit Bootstrap SASS variables in the global stylesheet located at src/styles/global.scss. Variables allow you to control global styles (like colors and fonts), as well as element specific styles (like button padding). Before overriding Bootstrap elements with custom style check the Bootstrap docs to see if you can do what need by tweaking a SASS variable. 
 
 Custom styles are located in their related component's directory. For example, if any custom style is applied to the Navbar component you'll find it in src/components/Navbar.scss. We ensure custom styles are scoped to their component by prepending the classname with the component name (such as .Navbar__brand). This ensures styles never affect elements in other components. If styles need to be re-used in multiple components consider creating a new component that encapsulates that style and structure and using that component in multiple places. 
 



Routing



  This project uses the built-in Next.js router and its convenient useRouter hook. Learn more in the Next.js docs.



```js

import Link from 'next/link';

import { useRouter } from 'next/router';



function MyComponent(){

  // Get the router object

  const router = useRouter();



  // Get value from query string (?postId=123) or route param (/:postId)

  console.log(router.query.postId);



  // Get current pathname

  console.log(router.pathname)



  // Navigate with the  component or with router.push()

  return (

    


      About

       router.push('/about')}>About

    


  );

}

```



Authentication



  This project uses Firebase Auth and includes a convenient useAuth hook (located in src/util/auth.js) that wraps Firebase and gives you common authentication methods. Depending on your needs you may want to edit this file and expose more Firebase functionality.



```js

import { useAuth } from './../util/auth.js';



function MyComponent(){

  // Get the auth object in any component

  const auth = useAuth();



  // Depending on auth state show signin or signout button

  // auth.user will either be an object, null when loading, or false if signed out

  return (

    


      {auth.user ? (

         auth.signout()}>Signout

      ) : (

         auth.signin('[email protected]', 'yolo')}>Signin

      )}

    


  );

}

```



Database



  This project uses Cloud Firestore and includes some data fetching hooks to get you started (located in src/util/db.js). You'll want to edit that file and add any additional query hooks you need for your project.



```js

import { useAuth } from './../util/auth.js';

import { useItemsByOwner } from './../util/db.js';

import ItemsList from './ItemsList.js';



function ItemsPage(){

  const auth = useAuth();



  // Fetch items by owner

  // Returned status value will be "idle" if we're waiting on 

  // the uid value or "loading" if the query is executing.

  const uid = auth.user ? auth.user.uid : undefined;

  const { data: items, status } = useItemsByOwner(uid);



  // Once we have items data render ItemsList component

  return (

    


      {(status === "idle" || status === "loading") ? (

        One moment please

      ) : (

        

      )}

    


  );

}

```



Deployment



Install the Vercel CLI



```

npm install -g vercel

```



Add each variable from `.env` to your Vercel project with the following command. You'll be prompted to enter its value and then choose one or more environments (development, preview, or production).

Learn more here.



```

vercel env add VARIABLE_NAME

```



Run this command to deploy a preview (for testing a live deployment)



```

vercel

```



Run this command to deploy to production



```

vercel --prod

```



See the Vercel docs for more details.




Other



  The Next.js documentation covers many other topics.

  This project was initially created using Divjoy, a React codebase generator. Feel free to ask questions in the Divjoy forum and we'll do our best to help you out.