Powlli - Social Network

The App is made with React JS and Sanity (Headless CMS)

Dependencies

Sanity - Sanity.io is the platform for structured content. With Sanity.io you can manage your text, images, and other media with APIs.
npm install -g @sanity/cli

sanity init or npx sanity init

-Select project with no predefined schemas

react

-java library npx create-react-app .

Tailwind CSS

npm install -D tailwindcss 

npx tailwindcss init 

npm i cra-template-tailwindcss  

https://tailwindcss.com/docs/guides/create-react-app

react-google-login
react-icons
react-loader-spinner
react-masonry-css
react-router-dom
uuid

Dependencies that need to be installed to connect the frontend with the backend
npm i @sanity/client @sanity/image-url 

Frontend 

React Router Dom:
BrowserRouter: BrowserRouter is a router implementation that uses the HTML5 history API(pushState, replaceState and the popstate event) to keep your UI in sync with the URL. It is the parent component that is used to store all of the other components.

Google Authentication

import GoogleLogin from 'react-google-login'

Initial steps:

    clientId="client ID comes here"

    buttonText="Login"

    onSuccess={responseGoogle}

    onFailure={responseGoogle}

    cookiePolicy={'single_host_origin'}

  />

Or

<GoogleLogin

    clientId="CliendID comes here"

    render={renderProps => (

      <button onClick={renderProps.onClick} disabled={renderProps.disabled}>This is my custom Google button</button>

    )}

    buttonText="Login"

    onSuccess={responseGoogle}

    onFailure={responseGoogle}

    cookiePolicy={'single_host_origin'}

  />

How to connect the sanity from frontend to backend

1 - Create a client.js file inside
2 - import the packages

import sanityClient from '@sanity/client'

import imageUrlBuilder from '@sanity/image-url'

3 - Initialize the sanity client

export const client = sanityClient({

    options

})

Initializes a new Sanity Client. Required options are projectId, dataset, and apiVersion. Setting a value for useCdn is encouraged.

4 - Configure the sanity client

export const client = sanityClient({

    projectId: '',

    dataset: 'production',

    // use current UTC date - see "specifying API version"!

    apiVersion: '2021-11-16',

    // or leave blank for unauthenticated usage

    token: '',

    // `false` if you want to ensure fresh data

    useCdn: 'true',

})

How to get the token and projectId?

Go to the backend (cd backend) and run sanity manage

It will prompt the sanity studio in there you can get the projectId. For token go to API tab -> create token -> and generate a token.

5 - Image Url builder - Quickly generate image URLs from Sanity image records. The most common way to use this library in your project is to configure it by passing it to your configured sanityClient. That way it will automatically be preconfigured to your current project and dataset:

const builder = imageUrlBuilder(client)

export const urlFor = (source) => builder.image(source)

Feed.js

import { useParams } from 'react-router-dom'

useParams : this hook helps to access the URL parameter from a current route.

import { client } from '../client'

This is the sanity client
Create MasonaryLayout and Spinner JSX files