We're using the Next.js framework for its quick development opportunities and rich open-source community. Since our backend is handled by Django, we are serving the website as a static site using next build.
We're using the shadcn/ui open-source UI library. This is a widely used, simple, and customizable UI library that uses Tailwind CSS for globally consistent styling.
Try to stick to these shadcn/ui components as much as possible, and only create custom components when necessary. This is to keep accessibility standards and consistency.
- The latest Node.js LTS runtime must be installed on the machine you're using to develop.
- Run
npm installin the frontend directory to install Node dependencies. - Run
npm run devto spin up a localhost server and navigate to http://localhost:3000/ to see the homepage. The dev server will hot-reload whenever you save. - Make necessary edits, and review changes on both a desktop screen and a mobile screen. Test with many aspect ratios to make sure nothing clips or looks broken. You can also enter "test" in the chat box to test proper markdown rendering (this is important as users must be able to read ChatDKU's responses easily).
- Use
npm run testto run all tests for essential functionality. - Check that
npm run buildsucceeds before pushing to the main branch.
- Run
sudo bash deploy.shto run the deployment script. It will go through the entire test suite and deploy the frontend as well as create a backup of the previous deployment in case a rollback is needed.
This backup is stored at/var/www/chatdku_webapp_backups - Visit ChatDKU in incognito mode. Make sure the chat responses are clear and legible.