ABCD KBD

A Interactive game for kids ; building in Astro

main codebase for abcdkbd.com

The tech Stacks

• Astro js
• Shadcn for component
• tailwind for styling
• Zustand for state management
• TypeScript for type safety
• Zod for form type safe form validation

How To Start

pre-requisite

• Node v 18 or higher
• open vscode and open startup.vscode-workspace file

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

.
├── astro.config.mjs
├── astro-i18next.config.mjs
├── CHANGELOG.MD
├── components.json
├── docs
│   ├── README.md
│   └── pages.md        # Documentation for all pages and their functionality
├── jsconfig.json
├── LICENSE
├── package.json
├── package-lock.json
├── postcss.config.js
├── public
│   ├── 192x192.png
│   ├── 512x512.png
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── favicon.svg
│   ├── logo-white.svg
│   ├── manifest.webmanifest
│   ├── profile-placeholder.jpg
│   ├── robots.txt
│   ├── sitemap-index.html
├── README.md
├── src
│   ├── assets
│   ├── components
│   ├── content
│   ├── env.d.ts
│   ├── hooks
│   ├── icons
│   ├── layouts
│   ├── libs
│   ├── locales
│   ├── mocks
│   ├── models
│   ├── pages
│   ├── postcss.config.cjs
│   ├── site.config.ts
│   ├── types.ts
│   └── utils
├── tailwind.config.ts
├── todo.md
├── tsconfig.eslint.json
├── tsconfig.json
└── <project>.code-workspace

and src

Installation

npm install

Development

To start the development server, run:

npm run dev

test and lint

run

npm run lint

Deployment

run in local

npm run lint
npm run build

and then check with

npm run preview