➡️ 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-topublic/
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 asnext.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
, changeDATABASE_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
Discussion (0)