Written by Ajay Gandecha for COMP 426: Modern Web Programming.
Hello students! We have seen some amazing prototypes so far and are excited to see your projects as they progress! I wanted to share a few extra resources that may help you as you work on your final project. These resources and notes span across many different areas, so feel free to skip around and look at some of the resources that may interest you. If you have any questions about any of these resources, please see us in office hours or reach out to me via email!
tweakcn: I highly recommend that all teams planning on adding colors and custom typography to their projects check out TweakCN! This is a great tool for finding Shadcn themes and seeing how different colors and typographies can be combined to spruce up your project. This tool is especially nice because it allows you to export the styling config directly into your project, allowing themes and changes to be applied to your entire project relatively easily.
awesomeshadcn/ui: This is a great resource for finding add-ons to Shadcn that allow you to augment the existing components and styling that Shadcn offers. If you are looking for something specific that Shadcn does not provide, check this out.
Shadcn Charts: Many students want to add some sort of data visualizations to their projects. We highly recommend you do this using Shadcn Charts, which ties really well with Shadcn and has a nice API.
Shadcn Dark Mode: These are the official docs for how to add dark mode functionality to your Shadcn project.
Supabase UI: Supabase UI is a library of components that are built on top of Shadcn with tight integration with Supabase. This is a very new library - just got released this month (we sent a Canvas announcement about it)! There are some useful components in here, especially ones relating to realtime.
DnD Kit: I do not necessarily recommend teams to try adding drag-and-drop functionality due to its complexity - but, if you are looking to, this is a great library for adding drag-and-drop functionality to your project. Make sure to read through the documentation and examples thoroughly to see how to use it.
react-markdown: There are many teams that may rely on some sort of textual formatting in their projects. This library allows you to render markdown in your React project, allowing for users to add line breaks, bold text, and other formatting to their text. This is a great way to allow users to customize their text without having to build a custom WYSIWYG editor.
shadcn-editor: This is a great WYSIWYG (what-you-see-is-what-you-get) editor that is built on top of Shadcn and is easy to plug into a project - it gives the user a significant amount of editing functionality, including adding headers, code blocks, formatted text, and LaTeX. Note: This is a community project and is not an official Shadcn component.