An enviroment for learning the basics of SQL by using block-based coding
The project is part of my master's thesis
- React
- Vite (with react+javascript template)
- SQLite Wasm
- Blockly
- Tailwind CSS
- Prettier
- TanStack Router
- useLocalStorage
- React Confetti Explosion
- ReactPlayer
If you want to run a copy of this project locally follow the instructions below
Node.js actually includes npm, so just follow these instrucions
Open a terminal, navigate to the directory where you want to copy the repository an run
git clone https://github.com/kasperbjerg/sqlblocks.git
You need to download some extra stuff (for instance the Blockly library and the SQLite package). First navigate to the newly created directory
cd sqlblocks
and then run
npm install
In a terminal and in the same directory sqlblocks
run
npm run dev
Then, copy the localhost address, open a browser and go the address
In the file /src/routes/index.lazy.tsx
replace Velkommen til SQLBLOCKS!
with Hello, World!
and see the change in the browser
List of tutorials, videos, examples, repositories, etc., that has helped or inspired me in the process of building this project
- Vite React App Deploy On GitHub | Step By Step
- Setting up SQLite Wasm in main thread with Vite
- Demo of integrating Blockly in React
- BlocklySQL
- Sqlime
- SQL on Khan Academy
Any contributions are greatly appreciated, whether it's pointing out a bug or suggesting a new feature by creating a new issue or if you feel like helping out by working on some of the open issues already created
If you want to contribute by working on the existing issues you should fork the repository and make a pull request