Puzzlaffic, a coding puzzle game written in Typescript React with Redux and Blockly with Vite.js tooling.
To run the application, you need to first initialize a firebase firestore instance and add corresponding fields in a .env file inside blockly-react directory with an all uppercase, separated by "_" format with "VITE_" prefix. For example: VITE_API_KEY=*******
Fields inside the .env file are going to be used for firebase firestore connection inside src/firebase/firebaseConfig.ts
fields imported inside src/firebase/firebaseConfig.ts
apiKey: import.meta.env.VITE_API_KEY,
authDomain: import.meta.env.VITE_AUTH_DOMAIN,
projectId: import.meta.env.VITE_PROJECT_ID,
storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
appId: import.meta.env.VITE_APP_ID,
measurementId: import.meta.env.VITE_MEASUREMENT_ID,
After creating a firestore instance and connecting to it, you could populate the instance by running the node.js script src/scripts/populateFirestore/index.js
For the script to be able to populate the same firestore instance, you would simply need to create a new .env file inside populateFirestore directory, with the same regex rule as above without the "VITE_" prefix.
fields imported inside src/scripts/populateFirestore/index.js
apiKey: process.env.API_KEY,
authDomain: process.env.AUTH_DOMAIN,
projectId: process.env.PROJECT_ID,
storageBucket: process.env.STORAGE_BUCKET,
messagingSenderId: process.env.MESSAGING_SENDER_ID,
appId: process.env.APP_ID,
measurementId: process.env.MEASUREMENT_ID,
After creating .env files and populating the firestore, you could run the application using
npm run dev
You could create a production build using
npm run build
and preview the production build using
npm run preview
You could add new levels to the game by simply adding a new level document to populateFirestore script.