Next.js ConnectRPC Firebase

Next.js serverless APP with Firebase, React Hooks and ConnectRPC Server, It's a demonstration of how to write RPC.

Motivation

Previously, I extensively utilized GRPC across various projects, but I hadn't had the opportunity to implement solutions holistically like a full-stack developer. This role entails managing tasks from proto changes to production deployment, encompassing both frontend and backend development tasks.

Docs

API Docs

• Buf Docs

Tech Stack

• NextJS
• React
• Typescript
• React hooks
• Firebase (Auth + Datastore)
• Tailwind
• Components - shadcn/ui
• Protobuf
• ConnectRPC
• react-beautiful-dnd

Code Structure

./src
├── cloud
│   ├── todo
│   └── validate
├── components
│   ├── dashboard
│   ├── header
│   ├── home
│   ├── theme
│   └── ui
├── configurations.ts
├── core
│   └── ThemeProvider.tsx
├── firebase
│   ├── adminApp.ts
│   ├── auth
│   └── clientApp.ts
├── globals.css
├── lib
│   ├── genericUtils.tsx
│   ├── hooks
│   ├── server
│   ├── tasks
│   └── utils.ts
├── pages
│   ├── _app.tsx
│   ├── api
│   └── index.tsx
└── services
    └── cloud.ts`

Getting Started

• Update .env file with all the firebase secret

• Install all dependancy

npm install 

• Run as a dev server

npm run dev 

Open : localhost

• Build

npm run build 

• Serve

npm run start