Frontend Development

Overview

This guide provides an overview of the technologies used in our frontend, their structure, and the development cycle. The goal is to help you understand the architecture and workflow of our frontend development.

Tech Stack

1. Next.js: A React framework for server-side rendering and generating static websites.
2. React: Library for building user interfaces.
3. TailwindCSS: Utility-first CSS framework for styling.
4. GraphQL Code Generator: Generates TypeScript types and hooks from GraphQL queries and mutations.
5. urql: GraphQL client for React.

Frontend Development Cycle

1. GraphQL APIs

   • Define GraphQL queries and mutations.
   • Example Mutation:

     mutation CreateStudyCategory($studyCategory: StudyCategoryInput!) {
       createStudyCategory(studyCategory: $studyCategory) {
         id
         title
       }
     }

   • Example Update Mutation:

     mutation UpdateStudyCategory($id: ID!, $studyCategory: StudyCategoryInput!) {
       updateStudyCategory(id: $id, studyCategory: $studyCategory) {
         id
         title
         isActive
       }
     }

   • Use generated hooks in components:

     const [createStudyCategory] = useCreateStudyCategoryMutation();
     const [updateStudyCategory] = useUpdateStudyCategoryMutation();

2. Generate Types (GraphQL Codegen)

   • GraphQL Code Generator takes the defined queries and mutations in your frontend and generates corresponding TypeScript types and hooks.
   • It fetches the GraphQL schema from the backend using introspection, which involves sending a query to the backend to get the schema definition in JSON format.
   • It scans and parses the .graphql files in your frontend to extract the operations and their corresponding fields and variables.
   • Run the codegen script to generate TypeScript types:

     npm run codegen

   • The generated types and hooks are output in a file, typically `graphql-types.ts`.

3. State Management

   • Use Jotai or other state management libraries.
   • Example:

     import { atom, useAtom } from 'jotai';
     
     const userAtom = atom(null);
     const [user, setUser] = useAtom(userAtom);

4. Styling with TailwindCSS

   • Use utility classes for styling.
   • Example:

     <button className="bg-indigo-600 text-white py-2 px-4 rounded">
       Sign in
     </button>

   • For more details, refer to the TailwindCSS Documentation.

5. Using Toasts and Modals

   • Toasts: Use for displaying notifications.
   • Example:

     const { addToast } = useToast();
     addToast({ type: 'success', content: 'Operation successful.' });

   • Modals: Use for displaying dialog boxes.
   • Example:

     const { showModal, hideModal } = useModalContext();
     showModal({
       type: 'default',
       title: 'Modal Title',
       content: <YourComponent />,
     });
     hideModal();

Access the API

• GraphQL Testing Playground: Use the GraphQL testing playground available at http://localhost:8000/graphql
• Frontend: Access the frontend at http://localhost/

Conclusion

This guide provides a succinct overview of our frontend development architecture and workflow. For detailed implementation, please refer to the specific files and documentation within the repository. Happy coding!