Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/rjnemo/react-saas-sample

React Software as a Service website sample
https://github.com/rjnemo/react-saas-sample

bulma react

Last synced: 4 days ago
JSON representation

React Software as a Service website sample

Awesome Lists containing this project

README 

        
### 
This project was created with [Divjoy](https://divjoy.com?ref=readme) ✨



## 👉 Get Started

Install dependencies

```

npm install

```



Run the development server

```

npm run start

```

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 - [Create React App](https://create-react-app.dev) with React Router

- Styling - [Bulma](https://bulma.io) with custom SASS styles

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

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

- Hosting - [ZEIT Now](https://zeit.co)



## 📚 Guide



  Styles

  


    You can edit Bulma 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 Bulma elements with custom style check the Bulma 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/styles.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 React Router and includes a convenient useRouter hook (located in src/util/router.js) that wraps React Router and gives all the route methods and data you need.

  

  ```jsx

  import { Link, useRouter } from './../util/router.js';



  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

        )}

      


    );

  }

  ```

  



  Deployment

  


  Install the ZEIT Now CLI



```

npm install -g now

```



Then run this command in your project directory to deploy to ZEIT Now



```

now

```



See the ZEIT docs for more details.

  



  Other

  


    The Create React App documention 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.