README.md

Incridea client repo

Tech Stack

Docs

• Next JS
• Typescript
• TailwindCSS
• Headless UI
• Apollo Client
• Framer Motion

Local setup

1. Clone the repository

git clone https://github.com/incridea-23/incridea-client.git

2. Install all dependencies

npm i

3. Run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Apollo client workflow

1. Write a query or mutation under /src/graphql folder. Refer Playground for syntax.

   Query Example

   query GetAllUsers {
   users {
     id
     name
     email
   }
   }

   Mutation Example

   mutation SignUp($email: String!, $name: String!, $password: String!) {
   signUp(data: { email: $email, name: $name, password: $password }) {
     __typename
     ... on Error {
       message
     }
     ... on MutationSignUpSuccess {
       __typename
     }
   }
   }

2. Run the below command to generate the types for your queries/mutations.

npm run codegen

3. Refer the below examples for queries and mutations.

Querying example

Data fetching options in Next.js

1. CSR

import { useQuery } from '@apollo/client';
import { NextPage } from 'next';
import { GetAllUsersDocument } from '../generated/generated';

const CSR: NextPage = () => {
  const { data, loading, error } = useQuery(GetAllUsersDocument);
  const users = data?.users;

  return (
    <div>
        {loading && <div>Loading...</div>}
        {error && <div>Error: {error.message}</div>}
      {users?.map((user) => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
};

export default CSR;

2. SSG

import { NextPage } from 'next';
import { GetAllUsersDocument } from '../generated/generated';
import { initializeApollo } from '../lib/apollo';

const SSG: NextPage<{
  users: {
    id: string;
    name: string;
  }[];
}> = ({ users }) => {
  return (
    <div>
      {users.map((user) => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
};

export const getStaticProps = async () => {
  const apolloClient = initializeApollo();
  const res = await apolloClient.query({
    query: GetAllUsersDocument,
  });
  return {
    props: {
      users: res.data.users,
    },
  };
};

export default SSG;

3. SSR

Replace getStaticProps to getServerSideProps.

4. ISR

Add an invalidate option to SSG.

5. On-demand ISR

Read about it here.

Mutation example

Example

import { SignUpDocument } from '@/src/generated/generated';
import { useMutation } from '@apollo/client';  

signUpMutation({
    variables: {
      name: userInfo.name,
      email: userInfo.email,
      password: userInfo.password,
    },
  })
    .then((res) => {
      if (res.data?.signUp.__typename === 'MutationSignUpSuccess') {
        router.push('/auth/verify-email');
      }
    })
    .catch((err) => {
      return err;
    });

Note Refer Sign up mutation for full code.

Branching and Making PRs

1. After cloning and setting up the environment, checkout to a new branch (name is related to your task, for eg: feat/user-login, fix/image-overflow)

git checkout -b ＜branch_name＞

2. Make the required changes according to your task.

//Staging changes
git add .
//Commiting changes
git commit -m <short message about task>
//Pushing changes
git push origin <branch_name>

3. Make a Pull request to main branch, and wait for it to get reviewed by someone in the team. If there are review comments, make a new commit making those changes to the same branch to address those comments.

Development Notes

• Please join Incridea org on Trello from the invite link shared on Discord.
• Use the HeadComponent while developing a new page and provide it with suitable title and description for better SEO.
• Use semantic commit messages to keep the commit history clean.

Semantic commits

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

• feat – a new feature is introduced with the changes
• fix – a bug fix has occurred
• chore – changes that do not relate to a fix or feature and don't modify src or test files (for example updating dependencies)
• refactor – refactored code that neither fixes a bug nor adds a feature
• docs – updates to documentation such as a the README or other markdown files
• style – changes that do not affect the meaning of the code, likely related to code formatting such as white-space, missing semi-colons, and so on.
• test – including new or correcting previous tests
• perf – performance improvements
• ci – continuous integration related
• build – changes that affect the build system or external dependencies
• revert – reverts a previous commit