Full-stack React in BlitzJs and Chakra UI Part 2

➡️ Continuing from Part 1...

So scratched my head a little and decided on building a Voting application🗳️ with Blitz-Js.

It's gonna be the basic type. User can Signup and login. User can create poll, view his polls, edit his polls and delete his polls.
Then other users can vote on his polls.

So in this post, I'll just be setting up the project.

Blitz

Blitz has a pretty powerful CLI that can be installed globally on your system.

npm install -g blitz

Confirm your installation by checking your blitz version

blitz -v

Now let's create a new Blitz App.

blitz new blote

Replace blote with any name for your App.
I use blote 'cause it means BLitz vOTE

Blitz will create a blote folder in your current folder. You will be prompted to pick a form library. Blitz recommends React Final Form.

Let's understand the project's directory structure.

blote
├── app/
│   ├── api/
│   ├── auth/
│   │   ├── components/
│   │   │   ├── LoginForm.tsx
│   │   │   └── SignupForm.tsx
│   │   ├── mutations/
│   │   │   ├── changePassword.ts
│   │   │   ├── forgotPassword.test.ts
│   │   │   ├── forgotPassword.ts
│   │   │   ├── login.ts
│   │   │   ├── logout.ts
│   │   │   ├── resetPassword.test.ts
│   │   │   ├── resetPassword.ts
│   │   │   └── signup.ts
│   │   ├── pages/
│   │   │   ├── forgot-password.tsx
│   │   │   ├── login.tsx
│   │   │   ├── reset-password.tsx
│   │   │   └── signup.tsx
│   │   └── validations.ts
│   ├── core/
│   │   ├── components/
│   │   │   ├── Form.tsx
│   │   │   └── LabeledTextField.tsx
│   │   ├── hooks/
│   │   │   └── useCurrentUser.ts
│   │   └── layouts/
│   │       └── Layout.tsx
│   ├── pages/
│   │   ├── 404.tsx
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   ├── index.test.tsx
│   │   └── index.tsx
│   └── users/
│       └── queries/
│           └── getCurrentUser.ts
├── db/
│   ├── index.ts
│   ├── schema.prisma
│   └── seeds.ts
├── integrations/
├── mailers/
│   └── forgotPasswordMailer.ts
├── public/
│   ├── favicon.ico*
│   └── logo.png
├── test/
│   ├── setup.ts
│   └── utils.tsx
├── README.md
├── babel.config.js
├── blitz.config.js
├── jest.config.js
├── package.json
├── tsconfig.json
├── types.d.ts
├── types.ts
└── yarn.lock

These files are:

• The app/ directory is our project's brain. This is where you’ll put any pages or API routes.

• The app/pages/ directory is the primary pages folder. If you've used Next.js you'll immediately notice this is different. In Blitz, you can have many pages folders at different Nesting levels and all will be merged together at build time.

• The app/core/ directory is the main place to put components, hooks, etc that are used throughout your app.

• db/ is where your database configuration goes. If you’re writing models or creating migrations, this is your go-to

• public/ like in all frameworks I've known is the directory where you keep any static assets; images, files, or videos.

• .babelrc.js, .env, etc. ("dotfiles") are configuration files for various bits of JavaScript tooling.

• blitz.config.js is for advanced custom configuration of Blitz. It's the same format as next.config.js but on Steroids ✨ .

• tsconfig.json is our recommended setup for TypeScript.

Chakra UI

It's too simple. Pretty straightforward.

blitz install chakra-ui

It'll ask you some questions, you know what to do.😉

Database

We'll be using PostgreSQL.

• Setup PosgreSQL on your device
• Open db/schema.prisma and change the db provider value from "sqlite" to "postgres" as follows:

datasource db {
  provider = "postgres"
  url      = env("DATABASE_URL")
}

• In .env.local, change DATABASE_URL. For convenience, there is a commented-out PostgreSQL DATABASE_URL there already. Depending on your setup, you may need to modify the URL.
• Delete the db/migrations folder
• Run blitz prisma migrate dev --preview-feature. This command will create the database (if it does not already exist) and tables based on your schema.

Now run your app with:

blitz dev

It should serve on localhost port 3000

You can now Sign Up and Login as you wish. Because BLitz-Js already handles that for you.

You should know that you can view your db data with the prisma studio.

blitz prisma studio

It open up your db in the browser. You can view and edit records there.

You can find the code on Github