Idea PJ

Web

IdeaPJ's technical foundation is rooted in a robust, modern stack leveraging both TanStack and AWS Amplify.

TanStack, consist of open-source libraries & framework which are essential to the web development. TanStack is led by Tanner Linsley and backed by strategic partners such as Cloudflare and Sentry, provides the core web framework.

AWS Amplify for is a comprehensive serverless backend infrastructure, which seamlessly integrates essential Amazon Web Services components like CloudFront for content delivery (CDN), S3 for static asset storage, and Lambda for scalable serverless functions.

Installation

Follow the steps below.

>Terminal
// install cli globally if you haven't installed it yet
npm i @ideapj/cli -g 
// create project using pj create cmd
pj create 
// enter your project name
? What is your project name? my-web 
// choose the framework suitable for your project
? Choose your Web type: 
> Web 
> API

Stack

TanStack Router

With TanStack Router, Project create by Idea PJ have following features:

  • Full-document SSR

    Page is render on server before it is send to the client ( aka browser)

  • Server Routes & API Routes

    You can build backend api endpoints alongside your React Code ( aka view )

  • Server Functions

    Able to preform Type-safe RPCs between client and server

  • Middleware & Context

    Able to add Middleware between request & response func. Data can be injected using middleware before it reach the target func.

Query & Mutations

Most of the modern website required querying & mutations. For that we use TanStack Query

  • Querying:  is process of fetching data when user interact with your website.

  • Mutation:  is when user action is one of the following, creating, changing, updating or modification.

Forms & Validation

Every website that need to collect data from user required form. Form without validation is just bad UX. We use TanStack Form to handle forms & valdiation.

Note:  We use Zod for schema validation

Amplify

Amplify is fully serverless solution for web development. It has CDN, Server Side process & Object Storage out of the box. More importantly it has build in Security Defenses.

Out of the box features
  • CDN:  Amplify uses CloudFront under the hood for CDN.
  • SSR:  Every request will come to CloudFront. It the request required SSR, CloudFront will trigger Lambda Function via "Lambda Function URL" to render SSR Content.
  • DDoS Protection:  Website hosted on amplify are protected using AWS Shield. AWS Shield automatically detect and inline mitigation of malicious traffic.
  • Static Website Hosting:  Amplify use S3 to store all the static file which are create after build.

Most people will use Amplify for just hosting alone. But Amplify is more than just an hosting service. Amplify is an AWS service which is use by Enterprise business to build production ready APP.

amplify
Out of the box features of amplify

Compliance

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.