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

```