https://github.com/utsavdotpro/voteit-blitzjs
Practice project for BlitzJS development
https://github.com/utsavdotpro/voteit-blitzjs
blitzjs fullstack practice-project prisma typescript
Last synced: about 2 months ago
JSON representation
Practice project for BlitzJS development
- Host: GitHub
- URL: https://github.com/utsavdotpro/voteit-blitzjs
- Owner: utsavdotpro
- Created: 2021-12-29T21:59:06.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-12-29T23:13:58.000Z (over 4 years ago)
- Last Synced: 2025-02-03T10:12:08.306Z (over 1 year ago)
- Topics: blitzjs, fullstack, practice-project, prisma, typescript
- Language: TypeScript
- Homepage: https://vote-it-blitz.vercel.app/
- Size: 329 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vote It
A simple web app built with [Blitz.js](https://github.com/blitz-js/blitz) that allows registered user to create questions with multiple choices and vote on those choices.
## Screenshots
## Getting Started
Run your app in the development mode.
```
blitz dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Environment Variables
Ensure the `.env.local` file has required environment variables:
```
DATABASE_URL=postgresql://@localhost:5432/vote-it
SHADOW_DATABASE_URL=postgresql://@localhost:5432/vote-it
```
[See more](#hosting-database) on hosting database
Ensure the `.env.test.local` file has required environment variables:
```
DATABASE_URL=postgresql://@localhost:5432/vote-it_test
```
## Tests
Runs your tests using Jest.
```
yarn test
```
Blitz comes with a test setup using [Jest](https://jestjs.io/) and [react-testing-library](https://testing-library.com/).
## Commands
Blitz comes with a powerful CLI that is designed to make development easy and fast. You can install it with `npm i -g blitz`
```
blitz [COMMAND]
dev Start a development server
build Create a production build
start Start a production server
export Export your Blitz app as a static application
prisma Run prisma commands
generate Generate new files for your Blitz project
console Run the Blitz console REPL
install Install a recipe
help Display help for blitz
test Run project tests
```
You can read more about it on the [CLI Overview](https://blitzjs.com/docs/cli-overview) documentation.
## Tools included
Blitz comes with a set of tools that corrects and formats your code, facilitating its future maintenance. You can modify their options and even uninstall them.
- **ESLint**: It lints your code: searches for bad practices and tell you about it. You can customize it via the `.eslintrc.js`, and you can install (or even write) plugins to have it the way you like it. It already comes with the [`blitz`](https://github.com/blitz-js/blitz/tree/canary/packages/eslint-config) config, but you can remove it safely. [Learn More](https://blitzjs.com/docs/eslint-config).
- **Husky**: It adds [githooks](https://git-scm.com/docs/githooks), little pieces of code that get executed when certain Git events are triggerd. For example, `pre-commit` is triggered just before a commit is created. You can see the current hooks inside `.husky/`. If are having problems commiting and pushing, check out ther [troubleshooting](https://typicode.github.io/husky/#/?id=troubleshoot) guide. [Learn More](https://blitzjs.com/docs/husky-config).
- **Prettier**: It formats your code to look the same everywhere. You can configure it via the `.prettierrc` file. The `.prettierignore` contains the files that should be ignored by Prettier; useful when you have large files or when you want to keep a custom formatting. [Learn More](https://blitzjs.com/docs/prettier-config).
## Hosting Database
### Hosting on [SuperBase](https://superbase.io)
- Login/Register for a free account
- Create a new Project (you might have to create an Organization first)
- Wait for the project to finish building
- Once done, navigate to **Database** from side bar
- Navigate to **Settings** > **Connection Polling**
- Scroll to the bottom of the page and copy the _Connection string_
- Save the string as `DATABASE_URL` in `env` file. Don't forget to replace the password
- **Repeat the same steps for `SHADOW_DATABASE_URL`**
_**Ref:** [Blog](https://cb-ashik.hashnode.dev/deploy-blitzjs-app-to-vercel) by Ashik Chapagain_
### Reset Database Password
- Navigate to **Dashboard SQL editor** on SuperBase
- Hit **+ New Query**
- Run the following query
```
alter user postgres
with password 'YOUR_NEW_PASSWORD';
```
## Credits
- **Watch and Learn**'s [tutorial](https://youtu.be/oe5pwktPWts) on YouTube