Smartscroll is an interactive learning app. It teaches based on short interactive courses that can be navigated like you are used to from social media platforms. This will keep you engaged during your learning session.
The application is based on Next.js and Blitz.js. Here are links to their docs to help you to get started:
smartscroll.mp4
- Node v18.2.0 or newer
- NPM v8.9.0 or newer
# clone the repository
git clone https://github.com/thomasdax98/smartscroll_techfest_albania
cd smartscroll_techfest_albania
# install the dependencies
npm install
# migrate the database
npx prisma migrate dev
# import content
npx blitz db seed
# start the app in development mode
npx blitz dev
Open http://localhost:3000 in your browser to see the app.
You can sign in with the following credentials:
E-Mail: luca@test.com
Password: verysecret
The application can be configured via env variables. All environment variables are configured with sensible defaults. If you need to adjust them they can be overwritten using a .env.local
file.
# this is the default path for the SQLite database
DATABASE_URL=file:./db.sqlite
Blitz comes with a powerful CLI that is designed to make development easy and fast.
npx 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 documentation.
Here is the starting structure of your app.
smartscroll
├── 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
│ │ └── layouts/
│ │ └── Layout.tsx
│ ├── pages/
│ │ ├── _app.tsx
│ │ ├── _document.tsx
│ │ ├── 404.tsx
│ │ ├── index.test.tsx
│ │ └── index.tsx
│ └── users/
│ ├── hooks/
│ │ └── useCurrentUser.ts
│ └── queries/
│ └── getCurrentUser.ts
├── db/
│ ├── migrations/
│ ├── index.ts
│ ├── schema.prisma
│ └── seeds.ts
├── integrations/
├── mailers/
│ └── forgotPasswordMailer.ts
├── public/
│ ├── favicon.ico
│ └── logo.png
├── test/
│ ├── setup.ts
│ └── utils.tsx
├── .eslintrc.js
├── babel.config.js
├── blitz.config.ts
├── jest.config.ts
├── package.json
├── README.md
├── tsconfig.json
└── types.ts
These files are:
-
The
app/
folder is a container for most of your project. This is where you’ll put any pages or API routes. -
db/
is where your database configuration goes. If you’re writing models or checking migrations, this is where to go. -
public/
is a folder where you will put any static assets. If you have images, files, or videos which you want to use in your app, this is where to put them. -
integrations/
is a folder to put all third-party integrations like with Stripe, Sentry, etc. -
test/
is a folder where you can put test utilities and integration tests. -
package.json
contains information about your dependencies and devDependencies. If you’re using a tool likenpm
oryarn
, you won’t have to worry about this much. -
tsconfig.json
is our recommended setup for TypeScript. -
.babel.config.js
,.eslintrc.js
,.env
, etc. ("dotfiles") are configuration files for various bits of JavaScript tooling. -
blitz.config.ts
is for advanced custom configuration of Blitz. Here you can learn how to use it. -
jest.config.js
contains config for Jest tests. You can customize it if needed.
You can read more about it in the File Structure section of the documentation.
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 theblitz
config, but you can remove it safely. Learn More. - Husky: It adds 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 guide. Learn More. - 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.