IdeaPJ is the Serverless Fullstack framework which is desgned to scale with the company.

Idea PJ allow developer to:

• easily configure SEO
• built secure websites
• built better UI & UX for the users
• develop and maintain client side( Browsers ) code
• develop and maintain server side code

Router

NextJS come with two router which is page router and app router. Both page router and app router come with benefits and drawback.

Page Router come first, because of that most of our ( idea pj ) tech stack revolve around the page router.

State Management

State is a special variable in a React component that, when updated, automatically informs (or triggers) the component to re-render with the new value.

We group the state into categories, which are

• Global State

  A type of state defined outside of React components, typically in standalone stores (e.g. Zustand) or external data layers (e.g. TanStack Query). This state is then connected back to React components for rendering and interaction.

  In global state, data is managed outside the React component tree and shared across multiple components as needed.

  >Learn more

• Local State

  A type of state that is defined and managed directly within a React component using hooks like useState or useReducer. This state is scoped to the component where it's declared and is not accessible by other components unless passed down as props or shared via the Context API.

  In local state, the data lives and updates inside a single component, making it ideal for handling component-specific logic such as input fields, toggle switches, modal visibility, or temporary UI feedback.

  >Learn more

Data Fetching & Mutations

When fetching or mutating data from an API (separate backend), there’s one key consideration:

Does the data need to be available during the initial render (i.e., server-side rendering)?

• If yes ?

  Fetch the data using getServerSideProps to ensure the page is pre-rendered with the required data.

• If no ?

  Use useFetchQuery (an extension of TanStack Query’s useQuery) to handle client-side data fetching after the page loads.

Most mutations happen on the client side, so you generally don’t need to handle mutations in server-side logic.

Styling

We focus on structure, design token, typography & accessbility in design stage and copy the flow to development stage.

We’ll create a custom design system that combines the structure and discipline of frameworks like Material UI and Ant Design, with the creativity and agility of shadcn/ui and tweakcn.

This approach allows us to maintain consistency and scalability while staying flexible for creative, brand-driven design needs.

We primarily rely on AWS Cloud Services for hosting. In most cases, we use AWS Amplify for rapid deployment and scalability. However, depending on client needs, we also support Docker or EC2-based VM hosting for more customized infrastructure setups.

• Amplify
• Virtual Machine
• Docker