Wizard Passport is a Web App created around Harry Potter, Wizard Universe. It allows users to share your love for Harry Potter in a fun way with friends. You can choose things like Hogwarts House, Wand Type, Pertonus Type, Etc... and generate a custom "Wizard Passport" based on them. Then the generated "Wizard Passport" can be Shared, Downloaded, Viewed in multiple ways. Such as Direct Link, IFrame, Markdown, SVG, JPG, PNG, Facebook, Twitter, Etc...
Below is a live example of "Wizard Passport", embed in Markdown.
This full-stack project is mainly powered by TypeScript, React & Serverless Functions.
See Live Demo at WizardPassport.com
Main technologies and tools used for this project.
| FrontEnd | BackEnd | Tools | DevOps + Other |
|---|---|---|---|
| Type Script | Serverless Functions (NodeJS) | ESLint + Prettier + StyleLint | Vercel |
| React | React Server Side Rendering (SSR) | Husky + LintStaged | Google Analytics |
| React Location | PreCommit Hooks | SVG Manipulation | |
| React Hook Form | Babel | Image Conversion | |
| React Query | Offline Detection | ||
| Zustand | Encoding | ||
| Immer | |||
| Yup | |||
| HTML2Canvas | |||
| SimpleScrollBar | |||
| LogLevel | |||
| ReactHotToast | |||
| Chakra UI |
- First of all, Create
.envfile with relevant fields and values. Check.env.examplefor necessary fields. - Make sure NodeJS are installed on system.
- Then run
npm installto install all dependencies. - Then run
npm startto start normal server. (Runnpm run vercel-dev-serverif want to run serverless functions locally as well.) - Now you can interact with program through http://localhost:3000.
- Linting Only : Run
npm run lint-all. (This runs Prettier, ESLint, StyleLint) - Type Script : Run
npm run manual-tscheck - Full Code Quality Check : Run
full-code-quality-check